using strict mode with react router 6

Author: Ronald van der Kooij

src/App.tsx

@@ -3,14 +3,16 @@ import './App.css';
 
 import Layout from './Layout/Layout';
 
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 const App: React.FC = () => {
   return (
-    <div>
-      <Router>
-        <Layout />
-      </Router>
-    </div>
+    <React.StrictMode>
+      <div>
+        <BrowserRouter>
+          <Layout />
+        </BrowserRouter>
+      </div>
+    </React.StrictMode>
   );
 };
 

src/Layout/PageContent.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { examplesList } from '../examples/examplesList';
 
 const PageContent = () => {
   return (
     <div className="content-page">
-      <Switch>
+      <Routes>
         {examplesList.map((item) => (
-          <Route key={item.name} exact={item.exact} path={item.path}>
-            <React.Fragment>
-              <h1>{item.name}</h1>
-              {<item.component />}
-            </React.Fragment>
-          </Route>
+          <Route
+            key={item.name}
+            path={item.path}
+            element={
+              <>
+                <h1>{item.name}</h1>
+                {<item.component />}
+              </>
+            }
+          ></Route>
         ))}
-      </Switch>
+      </Routes>
     </div>
   );
 };

src/Layout/Sidebar.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { FC } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import { Link } from 'react-router-dom';
 import { examplesList } from '../examples/examplesList';
-import { withRouter, RouteProps } from 'react-router';
+import { useLocation } from 'react-router';
+
+const Sidebar: FC = () => {
+  const location = useLocation();
 
-const Sidebar = ({ location }: RouteProps) => {
   return (
     <div className="sidebar">
       <List disablePadding dense>
@@ -26,4 +28,4 @@ const Sidebar = ({ location }: RouteProps) => {
   );
 };
 
-export default withRouter(Sidebar);
+export default Sidebar;