Merge pull request #1862 from andreyworkspace/bugfix/v10

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

package.json

@@ -39,39 +39,39 @@
     "zustand": "^3.6.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-runtime": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
-    "@babel/preset-typescript": "^7.16.5",
-    "@rollup/plugin-alias": "^3.1.8",
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
-    "@svgr/rollup": "^6.1.2",
+    "@svgr/rollup": "^6.2.1",
     "@types/d3": "^7.1.0",
-    "@types/react": "^17.0.37",
+    "@types/react": "^17.0.38",
     "@types/resize-observer-browser": "^0.1.6",
-    "autoprefixer": "^10.3.6",
-    "babel-preset-react-app": "^10.0.0",
-    "cypress": "^9.1.0",
-    "postcss": "^8.4.4",
-    "postcss-cli": "^9.0.2",
+    "autoprefixer": "^10.4.2",
+    "babel-preset-react-app": "^10.0.1",
+    "cypress": "^9.3.1",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
     "postcss-nested": "^5.0.6",
-    "prettier": "2.5.0",
+    "prettier": "2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "release-it": "^14.11.8",
-    "rollup": "^2.63.0",
+    "release-it": "^14.12.4",
+    "rollup": "^2.66.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-typescript2": "^0.31.1",
-    "rollup-plugin-visualizer": "^5.5.2",
+    "rollup-plugin-visualizer": "^5.5.4",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "16 || 17",