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

• Github Issue #7870
• PR #8831 merged to address issue – It looks like a fix was merged on May 9th, 2022, so hopefully is released soon.

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>
     );
   }