update deps

example/package.json

@@ -8,9 +8,9 @@
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
     "react-flow-renderer": "file:../",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.4.3"
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0",
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,10 +34,10 @@
     ]
   },
   "devDependencies": {
-    "@types/dagre": "^0.7.46",
+    "@types/dagre": "^0.7.47",
     "@types/localforage": "0.0.34",
     "@types/react": "file:../node_modules/@types/react",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.3.0"
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.3"
   }
 }

example/src/index.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
 
 import Overview from './Overview';
 import Basic from './Basic';
@@ -163,33 +163,35 @@ const routes = [
   },
 ];
 
-const Header = withRouter(({ history, location }) => {
-  const onChange = (event: ChangeEvent<HTMLSelectElement>) => history.push(event.target.value);
+const Header = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const onChange = (event: ChangeEvent<HTMLSelectElement>) => navigate(event.target.value);
 
   return (
-    <header>
-      <a className="logo" href="https://github.com/wbkd/react-flow">
-        React Flow Dev
-      </a>
-      <select defaultValue={location.pathname} onChange={onChange}>
-        {routes.map((route) => (
-          <option value={route.path} key={route.path}>
-            {route.path === '/' ? 'overview' : route.path.substr(1, route.path.length)}
-          </option>
-        ))}
-      </select>
-    </header>
+      <header>
+        <a className="logo" href="https://github.com/wbkd/react-flow">
+          React Flow Dev
+        </a>
+        <select defaultValue={location.pathname} onChange={onChange}>
+          {routes.map((route) => (
+              <option value={route.path} key={route.path}>
+                {route.path === '/' ? 'overview' : route.path.substring(1, route.path.length)}
+              </option>
+          ))}
+        </select>
+      </header>
   );
-});
+};
 
 ReactDOM.render(
-  <Router>
+  <BrowserRouter>
     <Header />
-    <Switch>
+    <Routes>
       {routes.map((route) => (
-        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
+        <Route path={route.path} key={route.path} element={<route.component />}/>
       ))}
-    </Switch>
-  </Router>,
+    </Routes>
+  </BrowserRouter>,
   document.getElementById('root')
 );