chore(deps): update dependency react-router-dom to v6

uiwjs · Jan 3, 2022 · 99479f8 · 99479f8
1 parent 8b9b314
commit 99479f8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -52,25 +52,21 @@
     "@kkt/less-modules": "6.11.0",
     "@kkt/raw-modules": "6.11.0",
     "@kkt/scope-plugin-options": "6.11.0",
-    "@mapbox/rehype-prism": "0.8.0",
-    "@types/react": "17.0.33",
-    "@types/react-dom": "17.0.10",
-    "@types/react-router-dom": "5.3.2",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
     "@types/react-test-renderer": "17.0.1",
     "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.4.3",
+    "@uiw/react-markdown-preview": "3.4.6",
     "@uiw/react-split": "5.8.4",
     "@uiw/react-textarea-code-editor": "1.4.14",
     "husky": "7.0.4",
     "kkt": "6.11.0",
-    "lint-staged": "11.2.6",
-    "prettier": "2.4.1",
+    "lint-staged": "12.1.5",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "6.2.1",
     "react-test-renderer": "17.0.2",
-    "rehype": "12.0.0",
-    "rehype-parse": "8.0.3",
     "tsbb": "3.4.4"
   },
   "eslintConfig": {

diff --git a/website/App.tsx b/website/App.tsx
@@ -1,22 +1,18 @@
 import React from 'react';
-import { Switch, Route, HashRouter } from 'react-router-dom';
+import { Routes, Route, HashRouter } from 'react-router-dom';
 import Home from './pages/run';
 import Docs from './pages/docs';
 import './App.less';
 
 const App: React.FC = () => {
   return (
     <HashRouter>
-      <div>
-        <Switch>
-          <Route exact path="/">
-            <Home />
-          </Route>
-          <Route path="/docs">
-            <Docs />
-          </Route>
-        </Switch>
-      </div>
+      <Routes>
+        <Route path="/" element={<Home />}>
+          <Route index element={<Home />} />
+        </Route>
+        <Route path="/docs" element={<Docs />} />
+      </Routes>
     </HashRouter>
   );
 };

diff --git a/website/pages/docs/index.tsx b/website/pages/docs/index.tsx
@@ -1,17 +1,15 @@
+import { useLocation, Link } from 'react-router-dom';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import GitHubCorners from '@uiw/react-github-corners';
-import { Link } from 'react-router-dom';
 import MDStr from '../../../README.md';
 import styles from './index.module.less';
 
 export default function Docs() {
+  const location = useLocation();
   return (
     <div style={{ margin: '0 auto', maxWidth: 650, paddingTop: 50, paddingBottom: 60 }}>
       <GitHubCorners fixed size={52} target="__blank" href="https://github.com/uiwjs/react-run-web" />
-      <Link
-        className={styles.link}
-        to="/?html=<div>Hello%20World</div>&js=console.log('hello%20world')&css=div%20{%20color:%20red;}"
-      >
+      <Link className={styles.link} to={location.state ? `/?${location.state}` : '/'} state={location.state}>
         <svg viewBox="0 0 1087 1024" height="14" style={{ marginRight: 8 }}>
           <path
             fill="currentColor"

diff --git a/website/pages/run/index.tsx b/website/pages/run/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useLocation, useHistory, Link } from 'react-router-dom';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
 import Split from '@uiw/react-split';
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import Tag from './Tag';
@@ -15,7 +15,7 @@ export default function Run() {
   const [cssStr, setCssStr] = useState('');
   const [jsStr, setJsStr] = useState('');
   const query = useQuery();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const html = query.get('html');
@@ -50,7 +50,10 @@ export default function Run() {
       default:
         break;
     }
-    history.push(`?${query.toString()}`);
+    navigate(`?${query.toString()}`, {
+      replace: true,
+      state: query.toString(),
+    });
   };
 
   return (
@@ -61,7 +64,9 @@ export default function Run() {
           <a href="https://github.com/uiwjs/react-run-web" target="__blank">
             Github
           </a>
-          <Link to="/docs">Docs</Link>
+          <Link to="/docs" state={query.toString() || ''}>
+            Docs
+          </Link>
         </div>
       </div>
       <Split style={{ width: '100%', height: 'calc(100vh - 39px)' }}>