There’s currently an incompatibility between react-router-dom@5 and react@18.

Github Issue #7870

Possible Solutions

1. Revert back to React 17 (or React 17 syntax) and fix up the index.js file.

   import { StrictMode } from "react";
   import ReactDOM from "react-dom";
   
   import App from "./App";
   
   ReactDOM.render(
     <StrictMode>
       <App />
     </StrictMode>,
     document.getElementById("root")
   );
   

   

2. Make the React.StrictMode component a child/descendent of the router component. Comment.

   Replace:

   <React.StrictMode>
     ...
     <BrowserRouter>
       ...
     </BrowserRouter>
   </React.StrictMode>
   

   with:

   <BrowserRouter>
     <React.StrictMode>
       ...
     </React.StrictMode>
   </BrowserRouter>
   

   

3. Upgrade to react-router-dom@6 and fix up the routes.

   const App = () => {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/movies" element={<Home type="movies" />} />
           <Route path="/series" element={<Home type="series" />} />
           <Route path="/watch" element={<Watch />} />
         </Routes>
       </Router>
     );
   }