chore: upgrade react@18 & react-router-dom@5.1

Author: MuYunyun

docs/主题/自定义主题.md

@@ -41,10 +41,9 @@ import styles from './index.less'
 const CustomTheme = (props: CustomThemeProps) => {
   return (
     <Switch>
-      <Route
-        path="/"
-        render={() => <div className={styles.center}>Welcome to your own theme</div>}
-      />
+      <Route path="/">
+        <div className={styles.center}>Welcome to your own theme</div>
+      </Route>
     </Switch>
   )
 }

package.json

@@ -43,8 +43,5 @@
     "eslint-plugin-react": "^7.7.0",
     "gh-pages": "^3.1.0",
     "lerna": "^3.22.1"
-  },
-  "dependencies": {
-    "crd-seed": "0.2.24"
   }
 }

packages/crd-scripts/src/web/Router.js

@@ -1,6 +1,5 @@
 import { BrowserRouter, withRouter, Route, Switch } from 'react-router-dom'
 import theme from 'crd-theme'
-import lazyload from './lazyload'
 import menuSource from './crd.json'
 
 /**
@@ -52,18 +51,19 @@ function menuSourceFormat(data, routePath, article) {
   return arr
 }
 
-const RoutersContainer = withRouter(({ ...props }) => {
-  const passProps = {
-    routeData: routeData(menuSource),
-    menuSource: menuSourceFormat(menuSource),
-    ...props,
-  }
+const RoutersContainer = ({ ...props }) => {
   return (
     <Switch>
-      <Route path="/" render={routeProps => theme(lazyload, { ...routeProps, ...passProps })} />
+      <Route path="/">
+        {() => theme({
+          routeData: routeData(menuSource),
+          menuSource: menuSourceFormat(menuSource),
+          ...props,
+        })}
+      </Route>
     </Switch>
   )
-})
+}
 
 export default function RouterRoot() {
   return (

packages/crd-scripts/src/web/index.js

@@ -1,20 +1,19 @@
-import { renderToPipeableStream } from 'react-dom'
 import { hydrateRoot } from 'react-dom/client'
-import ReactDOMServer from 'react-dom/server';
+import { renderToString } from 'react-dom/server';
 import '@babel/polyfill'
 import { ifDev, ifPrerender } from 'crd-client-utils'
 import RouterRoot from './Router'
 
 if (ifDev) {
   // dev render
-  document.getElementById('root').innerHTML = renderToPipeableStream(<RouterRoot />)
+  document.getElementById('root').innerHTML = renderToString(<RouterRoot />)
   hydrateRoot(
     document.getElementById('root'),
     <RouterRoot />,
   )
 } else if (ifPrerender) {
   // prerender
-  document.getElementById('root').innerHTML = renderToPipeableStream(<RouterRoot />)
+  document.getElementById('root').innerHTML = renderToString(<RouterRoot />)
 } else {
   // prod render:
   hydrateRoot(

packages/crd-scripts/src/web/lazyload.js

@@ -1,12 +1,14 @@
-import { Link } from 'react-router-dom'
+import { Link, useRouteMatch } from 'react-router-dom'
 import { ifProd } from 'crd-client-utils'
 import styles from './index.less'
 
 /**
  * name: the name of tag category.
  */
-const Tags = ({ name }) => {
+const Tags = () => {
   const { user, repo } = DOCSCONFIG || {}
+  const routeMatch = useRouteMatch('/tags/:name') || {}
+  const { name } = routeMatch.params || {}
 
   return (
     <div className={styles.tags}>

packages/crd-seed/component/Tags/index.js

@@ -7,16 +7,12 @@ import './index.less'
 const ThemeSeed = (props) => {
   return (
     <Switch>
-      <Route
-        path="/404"
-        render={routeProps => <NoMatch {...routeProps} {...props} />}
-      />
-      <Route
-        path="/"
-        render={(routeProps) => {
-          return <BasicLayout {...routeProps} {...props} />
-        }}
-      />
+      <Route path="/404">
+        <NoMatch />
+      </Route>
+      <Route path="/">
+        <BasicLayout {...props} />
+      </Route>
     </Switch>
   )
 }

packages/crd-seed/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Switch, Link, Route, Redirect } from 'react-router-dom'
+import { Switch, Link, Route, Redirect, useLocation } from 'react-router-dom'
 import cx from 'classnames'
 import { ifDev, ifProd, ifPrerender } from 'crd-client-utils'
 import Menu from '../component/Menu'
@@ -19,11 +19,10 @@ const { useState, useEffect } = React
 const SubMenu = Menu.SubMenu
 
 function BasicLayout({
-  location,
   routeData,
-  menuSource,
-  indexProps,
+  menuSource
 }) {
+  const location = useLocation()
   const { pathname } = location
   const {
     user,
@@ -248,21 +247,24 @@ function BasicLayout({
       >
         <Switch>
           {/* see https://reacttraining.com/react-router/web/api/Redirect/exact-bool */}
-          <Redirect exact from={ifAddPrefix ? `/${repo}` : `/`} to={ifAddPrefix ? `/${repo}/${defaultPath}` : `/${defaultPath}`} />
+          <Route
+            exact
+            path={ifAddPrefix ? `/${repo}` : `/`}
+            render={() => <Redirect to={ifAddPrefix ? `/${repo}/${defaultPath}` : `/${defaultPath}`} />}
+          />
           {routeData.map((item) => {
             const { path, mdconf, component } = item
             const { abbrlink } = mdconf
             const enhancePath = abbrlink ? `/${abbrlink}` : path
+            const Comp = component
             return (
               <Route
                 key={enhancePath}
                 exact
                 path={ifAddPrefix ? `/${repo}${enhancePath}` : enhancePath}
-                render={() => {
-                  const Comp = component
-                  return <Comp {...item} />
-                }}
-              />
+              >
+                <Comp {...item} />
+              </Route>
             )
           })}
           {
@@ -272,20 +274,20 @@ function BasicLayout({
                   key='/tags'
                   exact
                   path={ifAddPrefix ? `/${repo}/tags` : '/tags'}
-                  render={() => <Tags />}
-                />
+                >
+                  <Tags />
+                </Route>
                 <Route
                   key='/tags/:name'
                   path={ifAddPrefix ? `/${repo}/tags/:name` : '/tags/:name'}
-                  render={({ match }) => {
-                    const { name } = match.params
-                    return <Tags name={name} />
-                  }}
-                />
+                >
+                  <Tags />
+                </Route>
               </>
               : null
           }
-          <Redirect to={ifAddPrefix ? `/${repo}/404` : `/404`} />
+          {/* Todo: follow up how to use Redirect to back up the rest of route. */}
+          {/* <Redirect path='/' to={ifAddPrefix ? `/${repo}/404` : `/404`} /> */}
         </Switch>
         {renderPageFooter()}
       </div>

packages/crd-seed/layout/index.js

@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "crd-client-utils": "^1.8.2",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "^5.1.0",
     "react-switch": "^5.0.1"
   },
   "repository": {

packages/crd-seed/package.json

@@ -14,8 +14,9 @@ const {{name}} = ({routeData, menuSource}) => {
               key={item.path}
               exact
               path={item.path}
-              render={() => <Comp {...item} />}
-            />
+            >
+              <Comp {...item} />
+            </Route>
           )
         })}
       </Switch>