Using React Router to create a new page-CodePudding

I'm trying to add a new page to my project.

The code is working OK, until I add the following code:

index.js:

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

And to the App.js:

import { Link, Route, Routes } from "react-router-dom";
<Routes>
        <Route path="/" element={<App />}></Route>
        <Route path="/watchlist" element={<Watchlist />}></Route>
      </Routes>
      <Link to="/watchlist">Watchlist</Link>

What should I change to make the code work?

Thanks!

CodePudding user response：

index.js :

import {Route, Routes, BrowserRouter } from "react-router-dom";
import App from "./App";
import Watchlist from "./Watchlist";

root.render(
  <StrictMode>
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<App />}></Route>
        <Route path="/watchlist" element={<Watchlist />}></Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

App.js :

return (
   <div className="App">
      <Link to="/watchlist">Watchlist</Link>
      <h1>Movie App</h1>
      <Nav handleSubmit={handleSubmit} handleChange={handleChange} />
      {moviesData.length === 0 && (
        <h2 className="main__text">Start exploring</h2>
      )}
      {movies}
    </div>
 );