chore: 升级 react-router 到 v5 (#3552)

* chore: 升级 react-router 到 v5

* 更新 snapshot

__tests__/components/__snapshots__/404.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Components:404 Custom code & messages 1`] = `
 <div
-  className="container w-xxl w-auto-xs"
+  className="container w-xxl w-auto-xs m-auto"
 >
   <div
     className="text-center m-b-lg"
@@ -23,7 +23,7 @@ exports[`Components:404 Custom code & messages 1`] = `
 
 exports[`Components:404 default View 1`] = `
 <div
-  className="container w-xxl w-auto-xs"
+  className="container w-xxl w-auto-xs m-auto"
 >
   <div
     className="text-center m-b-lg"

examples/components/App.tsx

@@ -6,21 +6,13 @@ import {
   AlertComponent,
   Button,
   Drawer,
+  Spinner,
   ToastComponent
 } from '../../src/components/index';
 import {eachTree, mapTree} from '../../src/utils/helper';
 import {Icon} from '../../src/components/icons';
 import '../../src/locale/en-US';
-import {
+import {withRouter} from 'react-router';
-  Router,
-  Route,
-  IndexRoute,
-  browserHistory,
-  hashHistory,
-  Link,
-  Redirect,
-  withRouter
-} from 'react-router';
 import Select from '../../src/components/Select';
 import InputBox from '../../src/components/InputBox';
 import DocSearch from './DocSearch';
@@ -29,7 +21,14 @@ import DocNavCN from './DocNavCN';
 import Example, {examples} from './Example';
 import CSSDocs, {cssDocs} from './CssDocs';
 import Components, {components} from './Components';
-
+import {
+  BrowserRouter as Router,
+  Route,
+  Redirect,
+  Switch,
+  Link,
+  NavLink
+} from 'react-router-dom';
 declare const _hmt: any;
 
 let ContextPath = '';
@@ -102,7 +101,7 @@ const docVersions = [
   }
 ];
 
-function getPath(path) {
+function getPath(path: string) {
   return path
     ? path[0] === '/'
       ? ContextPath + path
@@ -155,20 +154,20 @@ export class App extends React.PureComponent<{
       themes.find(item => item?.value === localStorage.getItem('amis-theme')) ||
       themes[0],
     locale: localStorage.getItem('amis-locale')
-      ? localStorage.getItem('amis-locale').replace('zh-cn', 'zh-CN')
+      ? localStorage.getItem('amis-locale')?.replace('zh-cn', 'zh-CN')
       : '',
     navigations: [],
     filter: '' // 导航过滤，方便找组件
   };
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
     this.setNavigations = this.setNavigations.bind(this);
     this.setNavigationFilter = this.setNavigationFilter.bind(this);
-    document.querySelector('body').classList.add(this.state.theme.value);
+    document.querySelector('body')?.classList.add(this.state.theme.value);
   }
 
-  componentDidUpdate(preProps, preState) {
+  componentDidUpdate(preProps: any, preState: any) {
     const props = this.props;
 
     if (preState.theme.value !== this.state.theme.value) {
@@ -178,7 +177,7 @@ export class App extends React.PureComponent<{
           const theme = item.getAttribute('title');
           item.disabled = theme !== this.state.theme.value;
         });
-      const body = document.querySelector('body');
+      const body = document.body;
       body.classList.remove(preState.theme.value);
       body.classList.add(this.state.theme.value);
     }
@@ -269,25 +268,31 @@ export class App extends React.PureComponent<{
           )}
 
           <ul className={`HeaderLinks`}>
-            <Link to={`${ContextPath}/zh-CN/docs`} activeClassName="is-active">
+            <NavLink
+              to={`${ContextPath}/zh-CN/docs`}
+              activeClassName="is-active"
+            >
               文档
-            </Link>
+            </NavLink>
 
-            <Link
+            <NavLink
               to={`${ContextPath}/zh-CN/components`}
               activeClassName="is-active"
             >
               组件
-            </Link>
+            </NavLink>
-            <Link to={`${ContextPath}/zh-CN/style`} activeClassName="is-active">
+            <NavLink
+              to={`${ContextPath}/zh-CN/style`}
+              activeClassName="is-active"
+            >
               样式
-            </Link>
+            </NavLink>
-            <Link
+            <NavLink
               to={`${ContextPath}/examples/index`}
               activeClassName="is-active"
             >
               示例
-            </Link>
+            </NavLink>
             <a
               href="https://github.com/fex-team/amis-editor-demo"
               target="_blank"
@@ -307,8 +312,8 @@ export class App extends React.PureComponent<{
               value={this.state.locale || 'zh-CN'}
               options={locales}
               onChange={locale => {
-                this.setState({locale: locale.value});
+                this.setState({locale: (locale as any).value});
-                localStorage.setItem('amis-locale', locale.value);
+                localStorage.setItem('amis-locale', (locale as any).value);
                 window.location.reload();
               }}
             />
@@ -323,10 +328,12 @@ export class App extends React.PureComponent<{
               options={this.state.themes}
               onChange={theme => {
                 this.setState({theme});
-                localStorage.setItem('amis-theme', `${theme.value}`);
+                localStorage.setItem('amis-theme', `${(theme as any).value}`);
                 document
                   .querySelector('body')
-                  .classList[theme.value === 'dark' ? 'add' : 'remove']('dark');
+                  ?.classList[
+                    (theme as any).value === 'dark' ? 'add' : 'remove'
+                  ]('dark');
               }}
             />
           </div>
@@ -339,8 +346,8 @@ export class App extends React.PureComponent<{
               value={this.state.viewMode || 'pc'}
               options={viewModes}
               onChange={viewMode => {
-                this.setState({viewMode: viewMode.value});
+                this.setState({viewMode: (viewMode as any).value});
-                localStorage.setItem('amis-viewMode', viewMode.value);
+                localStorage.setItem('amis-viewMode', (viewMode as any).value);
                 window.location.reload();
               }}
             />
@@ -353,7 +360,7 @@ export class App extends React.PureComponent<{
               theme={this.state.theme.value}
               value={docVersions[0].value}
               options={docVersions}
-              onChange={doc => {
+              onChange={(doc: any) => {
                 if (doc.url && /^https?\:\/\//.test(doc.url)) {
                   window.open(doc.url);
                 } else {
@@ -418,17 +425,17 @@ export class App extends React.PureComponent<{
 
     return (
       <AsideNav
-        navigations={this.state.navigations.map(item => ({
+        navigations={this.state.navigations.map((item: any) => ({
           ...item,
           children: item.children
             ? item.children
-                .filter(item => {
+                .filter((item: any) => {
                   if (item.label) {
                     return filterReg.exec(item.label);
                   }
                   return true;
                 })
-                .map(item => ({
+                .map((item: any) => ({
                   ...item,
                   className: 'is-top'
                 }))
@@ -528,7 +535,7 @@ export class App extends React.PureComponent<{
         <ToastComponent theme={theme.value} locale={this.state.locale} />
         <AlertComponent theme={theme.value} locale={this.state.locale} />
 
-        {React.cloneElement(this.props.children as any, {
+        {/* {React.cloneElement(this.props.children as any, {
           key: theme.value,
           ...(this.props.children as any).props,
           setNavigations: this.setNavigations,
@@ -538,11 +545,165 @@ export class App extends React.PureComponent<{
           locale: this.state.locale,
           offScreen: this.state.offScreen,
           ContextPath
-        })}
+        })} */}
+        {this.renderContent()}
       </Layout>
     );
   }
 
+  renderContent() {
+    const locale = 'zh-CN'; // 暂时不支持切换，因为目前只有中文文档
+    const theme = this.state.theme;
+
+    return (
+      <React.Suspense
+        fallback={<Spinner overlay spinnerClassName="m-t-lg" size="lg" />}
+      >
+        <Switch>
+          <Redirect
+            from={`${ContextPath}/`}
+            to={`${ContextPath}/${locale}/docs/index`}
+            exact
+          />
+
+          {/* docs */}
+          <Redirect
+            from={`${ContextPath}/docs`}
+            to={`${ContextPath}/${locale}/docs/index`}
+            exact
+          />
+          <Redirect
+            from={`${ContextPath}/docs/index`}
+            to={`${ContextPath}/${locale}/docs/index`}
+            exact
+          />
+          <Redirect
+            from={`${ContextPath}/docs/*`}
+            to={`${ContextPath}/${locale}/docs/*`}
+          />
+          <Redirect
+            from={`${ContextPath}/${locale}/docs`}
+            to={`${ContextPath}/${locale}/docs/index`}
+            exact
+          />
+
+          {/* components */}
+          <Redirect
+            from={`${ContextPath}/components`}
+            to={`${ContextPath}/${locale}/components/page`}
+            exact
+          />
+          <Redirect
+            from={`${ContextPath}/components/page`}
+            to={`${ContextPath}/${locale}/components/page`}
+            exact
+          />
+          <Redirect
+            from={`${ContextPath}/components/*`}
+            to={`${ContextPath}/${locale}/components/*`}
+            exact
+          />
+          <Redirect
+            from={`${ContextPath}/${locale}/components`}
+            to={`${ContextPath}/${locale}/components/page`}
+            exact
+          />
+
+          {/* expamles */}
+          <Redirect
+            from={`${ContextPath}/examples`}
+            to={`${ContextPath}/examples/index`}
+            exact
+          />
+          <Redirect
+            from={`${ContextPath}/${locale}/style`}
+            to={`${ContextPath}/${locale}/style/index`}
+            exact
+          />
+          <Route
+            path={`${ContextPath}/${locale}/docs`}
+            render={(props: any) => (
+              <Doc
+                {...{
+                  setNavigations: this.setNavigations,
+                  theme: theme.value,
+                  classPrefix: theme.ns,
+                  viewMode: this.state.viewMode,
+                  locale: this.state.locale,
+                  offScreen: this.state.offScreen,
+                  ContextPath,
+                  showCode: false
+                }}
+                {...props}
+              />
+            )}
+          />
+          <Route
+            path={`${ContextPath}/${locale}/components`}
+            render={(props: any) => (
+              <Components
+                {...{
+                  setNavigations: this.setNavigations,
+                  theme: theme.value,
+                  classPrefix: theme.ns,
+                  viewMode: this.state.viewMode,
+                  locale: this.state.locale,
+                  offScreen: this.state.offScreen,
+                  ContextPath,
+                  showCode: false
+                }}
+                {...props}
+              />
+            )}
+          />
+          <Route
+            path={`${ContextPath}/examples`}
+            render={(props: any) => (
+              <Example
+                {...{
+                  setNavigations: this.setNavigations,
+                  theme: theme.value,
+                  classPrefix: theme.ns,
+                  viewMode: this.state.viewMode,
+                  locale: this.state.locale,
+                  offScreen: this.state.offScreen,
+                  ContextPath,
+                  showCode: false
+                }}
+                {...props}
+              />
+            )}
+          />
+          <Route
+            path={`${ContextPath}/${locale}/style`}
+            render={(props: any) => (
+              <CSSDocs
+                {...{
+                  setNavigations: this.setNavigations,
+                  theme: theme.value,
+                  classPrefix: theme.ns,
+                  viewMode: this.state.viewMode,
+                  locale: this.state.locale,
+                  offScreen: this.state.offScreen,
+                  ContextPath,
+                  showCode: false
+                }}
+                {...props}
+              />
+            )}
+          />
+          <Route
+            render={() => (
+              <div className="Doc-content">
+                <NotFound />
+              </div>
+            )}
+          />
+        </Switch>
+      </React.Suspense>
+    );
+  }
+
   render() {
     const theme = this.state.theme;
     const location = this.props.location;
@@ -552,7 +713,7 @@ export class App extends React.PureComponent<{
         <>
           <ToastComponent theme={theme.value} locale={this.state.locale} />
           <AlertComponent theme={theme.value} locale={this.state.locale} />
-          {React.cloneElement(this.props.children as any, {
+          {/* {React.cloneElement(this.props.children as any, {
             key: theme.value,
             ...(this.props.children as any).props,
             setNavigations: this.setNavigations,
@@ -563,7 +724,8 @@ export class App extends React.PureComponent<{
             offScreen: this.state.offScreen,
             ContextPath,
             showCode: false
-          })}
+          })} */}
+          {this.renderContent()}
         </>
       );
     } else if (/examples/.test(location.pathname)) {
@@ -597,32 +759,32 @@ export class App extends React.PureComponent<{
             position="left"
           >
             <ul className={`HeaderLinks`}>
-              <Link
+              <NavLink
                 to={`${ContextPath}/zh-CN/docs`}
                 activeClassName="is-active"
               >
                 文档
-              </Link>
+              </NavLink>
 
-              <Link
+              <NavLink
                 to={`${ContextPath}/zh-CN/components`}
                 activeClassName="is-active"
               >
                 组件
-              </Link>
+              </NavLink>
-              <Link
+              <NavLink
                 to={`${ContextPath}/zh-CN/style`}
                 activeClassName="is-active"
               >
                 样式
-              </Link>
+              </NavLink>
             </ul>
             {this.renderNavigation()}
           </Drawer>
 
           <BackTop />
 
-          {React.cloneElement(this.props.children as any, {
+          {/* {React.cloneElement(this.props.children as any, {
             key: theme.value,
             ...(this.props.children as any).props,
             setNavigations: this.setNavigations,
@@ -632,7 +794,8 @@ export class App extends React.PureComponent<{
             locale: this.state.locale,
             offScreen: this.state.offScreen,
             ContextPath
-          })}
+          })} */}
+          {this.renderContent()}
         </div>
       </Layout>
     );
@@ -643,35 +806,40 @@ function isActive(link: any, location: any) {
   return !!(link.path && getPath(link.path) === location.pathname);
 }
 
-function navigations2route(navigations) {
+export function navigations2route(
-  let routes = [];
+  navigations: any,
+  additionalProperties?: any
+) {
+  let routes: any = [];
 
-  navigations.forEach(root => {
+  navigations.forEach((root: any) => {
     root.children &&
       eachTree(root.children, (item: any) => {
         if (item.path && item.component) {
           routes.push(
-            <Route
+            additionalProperties ? (
-              key={routes.length + 1}
+              <Route
-              path={
+                key={routes.length + 1}
-                item.path[0] === '/'
+                path={
-                  ? ContextPath + item.path
+                  item.path[0] === '/'
-                  : `${ContextPath}/${item.path}`
+                    ? ContextPath + item.path
-              }
+                    : `${ContextPath}/${item.path}`
-              component={item.component}
+                }
-            />
+                render={(props: any) => (
-          );
+                  <item.component {...additionalProperties} {...props} />
-        } else if (item.path && item.getComponent) {
+                )}
-          routes.push(
+              />
-            <Route
+            ) : (
-              key={routes.length + 1}
+              <Route
-              path={
+                key={routes.length + 1}
-                item.path[0] === '/'
+                path={
-                  ? ContextPath + item.path
+                  item.path[0] === '/'
-                  : `${ContextPath}/${item.path}`
+                    ? ContextPath + item.path
-              }
+                    : `${ContextPath}/${item.path}`
-              getComponent={item.getComponent}
+                }
-            />
+                component={item.component}
+              />
+            )
           );
         }
       });
@@ -680,80 +848,15 @@ function navigations2route(navigations) {
   return routes;
 }
 
-export default function entry({pathPrefix}) {
+export default function entry() {
   // PathPrefix = pathPrefix || DocPathPrefix;
-  const locate = 'zh-CN'; // 暂时不支持切换，因为目前只有中文文档
+
   return (
-    <Router history={browserHistory}>
+    <Router>
-      <Route component={App}>
+      <Switch>
-        <Redirect
+        <Route component={App}></Route>
-          from={`${ContextPath}/`}
+        <Route component={NotFound} />
-          to={`${ContextPath}/${locate}/docs/index`}
+      </Switch>
-        />
-
-        {/* docs */}
-        <Redirect
-          from={`${ContextPath}/docs`}
-          to={`${ContextPath}/${locate}/docs/index`}
-        />
-        <Redirect
-          from={`${ContextPath}/docs/index`}
-          to={`${ContextPath}/${locate}/docs/index`}
-        />
-        <Redirect
-          from={`${ContextPath}/docs/*`}
-          to={`${ContextPath}/${locate}/docs/*`}
-        />
-        <Redirect
-          from={`${ContextPath}/${locate}/docs`}
-          to={`${ContextPath}/${locate}/docs/index`}
-        />
-
-        {/* components */}
-        <Redirect
-          from={`${ContextPath}/components`}
-          to={`${ContextPath}/${locate}/components/page`}
-        />
-        <Redirect
-          from={`${ContextPath}/components/page`}
-          to={`${ContextPath}/${locate}/components/page`}
-        />
-        <Redirect
-          from={`${ContextPath}/components/*`}
-          to={`${ContextPath}/${locate}/components/*`}
-        />
-        <Redirect
-          from={`${ContextPath}/${locate}/components`}
-          to={`${ContextPath}/${locate}/components/page`}
-        />
-
-        {/* expamles */}
-        <Redirect
-          from={`${ContextPath}/examples`}
-          to={`${ContextPath}/examples/index`}
-        />
-        <Redirect
-          from={`${ContextPath}/${locate}/style`}
-          to={`${ContextPath}/${locate}/style/index`}
-        />
-        <Route path={`${ContextPath}/${locate}/docs`} component={Doc}>
-          {navigations2route(DocNavCN)}
-        </Route>
-        <Route
-          path={`${ContextPath}/${locate}/components`}
-          component={Components}
-        >
-          {navigations2route(components)}
-        </Route>
-        <Route path={`${ContextPath}/examples`} component={Example}>
-          {navigations2route(examples)}
-        </Route>
-        <Route path={`${ContextPath}/${locate}/style`} component={CSSDocs}>
-          {navigations2route(cssDocs)}
-        </Route>
-      </Route>
-
-      <Route path="*" component={NotFound} />
     </Router>
   );
 }

examples/components/CssDocs.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
+import {Switch} from 'react-router-dom';
+import {navigations2route} from './App';
 import makeMarkdownRenderer from './MdRenderer';
+function wrapDoc(doc: any) {
+  return {
+    default: makeMarkdownRenderer(doc)
+  };
+}
 
 export const cssDocs = [
   {
@@ -8,40 +15,30 @@ export const cssDocs = [
       {
         label: '快速开始',
         path: '/zh-CN/style/index',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(['../../docs/zh-CN/style/index.md'], (doc: any) => {
+          import('../../docs/zh-CN/style/index.md').then(wrapDoc)
-            cb(null, makeMarkdownRenderer(doc));
+        )
-          })
       },
       {
         label: 'CSS 变量',
         path: '/zh-CN/style/css-vars',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../docs/zh-CN/style/css-vars.md').then(wrapDoc)
-            ['../../docs/zh-CN/style/css-vars.md'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: '辅助类 - 响应式设计',
         path: '/zh-CN/style/responsive-design',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../docs/zh-CN/style/responsive-design.md').then(wrapDoc)
-            ['../../docs/zh-CN/style/responsive-design.md'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: '辅助类 - 状态样式',
         path: '/zh-CN/style/state',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(['../../docs/zh-CN/style/state.md'], (doc: any) => {
+          import('../../docs/zh-CN/style/state.md').then(wrapDoc)
-            cb(null, makeMarkdownRenderer(doc));
+        )
-          })
       }
     ]
   },
@@ -53,109 +50,75 @@ export const cssDocs = [
       {
         label: 'Box Sizing',
         path: '/zh-CN/style/layout/box-sizing',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_box-sizing.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_box-sizing.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Display',
         path: '/zh-CN/style/layout/display',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_display.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_display.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Floats',
         path: '/zh-CN/style/layout/floats',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_float.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_float.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Clear',
         path: '/zh-CN/style/layout/clear',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_clear.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_clear.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Overflow',
         path: '/zh-CN/style/layout/overflow',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_overflow.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_overflow.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Position',
         path: '/zh-CN/style/layout/position',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_position.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_position.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Top / Right / Bottom / Left',
         path: '/zh-CN/style/layout/top-right-bottom-left',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_top-right-bottom-left.scss').then(
-            ['../../scss/helper/layout/_top-right-bottom-left.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Visibility',
         path: '/zh-CN/style/layout/visibility',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_visibility.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_visibility.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Z-Index',
         path: '/zh-CN/style/layout/z-index',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/layout/_z-index.scss').then(wrapDoc)
-            ['../../scss/helper/layout/_z-index.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   },
@@ -166,73 +129,49 @@ export const cssDocs = [
       {
         label: 'Flex Direction',
         path: '/zh-CN/style/flexbox/direction',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/flex/_direction.scss').then(wrapDoc)
-            ['../../scss/helper/flex/_direction.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Flex Wrap',
         path: '/zh-CN/style/flexbox/wrap',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/flex/_wrap.scss').then(wrapDoc)
-            ['../../scss/helper/flex/_wrap.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Flex',
         path: '/zh-CN/style/flexbox/flex',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/flex/_flex.scss').then(wrapDoc)
-            ['../../scss/helper/flex/_flex.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Flex Grow',
         path: '/zh-CN/style/flexbox/grow',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/flex/_grow.scss').then(wrapDoc)
-            ['../../scss/helper/flex/_grow.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Flex Shrink',
         path: '/zh-CN/style/flexbox/shrink',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/flex/_shrink.scss').then(wrapDoc)
-            ['../../scss/helper/flex/_shrink.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Flex Order',
         path: '/zh-CN/style/flexbox/order',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/flex/_order.scss').then(wrapDoc)
-            ['../../scss/helper/flex/_order.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   },
@@ -243,87 +182,58 @@ export const cssDocs = [
       {
         label: 'Grid Template Columns',
         path: '/zh-CN/style/grid/columns',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_columns.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_columns.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Grid Column Start / End',
         path: '/zh-CN/style/grid/column-start-end',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_column-start-end.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_column-start-end.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Grid Template Rows',
         path: '/zh-CN/style/grid/rows',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_rows.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_rows.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Grid Row Start / End',
         path: '/zh-CN/style/grid/row-start-end',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_row-start-end.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_row-start-end.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Grid Auto Flow',
         path: '/zh-CN/style/grid/auto-flow',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_auto-flow.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_auto-flow.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Grid Auto Columns',
         path: '/zh-CN/style/grid/auto-columns',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_auto-columns.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_auto-columns.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Grid Auto Rows',
         path: '/zh-CN/style/grid/auto-rows',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/grid/_auto-rows.scss').then(wrapDoc)
-            ['../../scss/helper/grid/_auto-rows.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Gap',
         path: '/zh-CN/style/grid/gap',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(['../../scss/helper/grid/_gap.scss'], (doc: any) => {
+          import('../../scss/helper/grid/_gap.scss').then(wrapDoc)
-            cb(null, makeMarkdownRenderer(doc));
+        )
-          })
       }
     ]
   },
@@ -333,109 +243,91 @@ export const cssDocs = [
       {
         label: 'Justify Content',
         path: '/zh-CN/style/box-alignment/justify-content',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_justify-content.scss').then(
-            ['../../scss/helper/box-alignment/_justify-content.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Justify Items',
         path: '/zh-CN/style/box-alignment/justify-items',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_justify-items.scss').then(
-            ['../../scss/helper/box-alignment/_justify-items.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Justify Self',
         path: '/zh-CN/style/box-alignment/justify-self',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_justify-self.scss').then(
-            ['../../scss/helper/box-alignment/_justify-self.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Align Content',
         path: '/zh-CN/style/box-alignment/align-content',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_align-content.scss').then(
-            ['../../scss/helper/box-alignment/_align-content.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Align Items',
         path: '/zh-CN/style/box-alignment/align-items',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_align-items.scss').then(
-            ['../../scss/helper/box-alignment/_align-items.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Align Self',
         path: '/zh-CN/style/box-alignment/align-self',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_align-self.scss').then(
-            ['../../scss/helper/box-alignment/_align-self.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Place Content',
         path: '/zh-CN/style/box-alignment/place-content',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_place-content.scss').then(
-            ['../../scss/helper/box-alignment/_place-content.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Place Items',
         path: '/zh-CN/style/box-alignment/place-items',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_place-items.scss').then(
-            ['../../scss/helper/box-alignment/_place-items.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Place Self',
         path: '/zh-CN/style/box-alignment/place-self',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/box-alignment/_place-self.scss').then(
-            ['../../scss/helper/box-alignment/_place-self.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       }
     ]
   },
@@ -446,37 +338,25 @@ export const cssDocs = [
       {
         label: 'Padding',
         path: '/zh-CN/style/spacing/padding',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/spacing/_padding.scss').then(wrapDoc)
-            ['../../scss/helper/spacing/_padding.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Margin',
         path: '/zh-CN/style/spacing/margin',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/spacing/_margin.scss').then(wrapDoc)
-            ['../../scss/helper/spacing/_margin.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Space Between',
         path: '/zh-CN/style/spacing/space-between',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/spacing/_space-between.scss').then(wrapDoc)
-            ['../../scss/helper/spacing/_space-between.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   },
@@ -487,24 +367,16 @@ export const cssDocs = [
       {
         label: 'Width',
         path: '/zh-CN/style/sizing/width',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/sizing/_width.scss').then(wrapDoc)
-            ['../../scss/helper/sizing/_width.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
       {
         label: 'Height',
         path: '/zh-CN/style/sizing/height',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/sizing/_height.scss').then(wrapDoc)
-            ['../../scss/helper/sizing/_height.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   },
@@ -515,169 +387,123 @@ export const cssDocs = [
       {
         label: 'Font Family',
         path: '/zh-CN/style/typography/font-family',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_font-family.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_font-family.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Font Size',
         path: '/zh-CN/style/typography/font-size',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_font-size.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_font-size.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Font style',
         path: '/zh-CN/style/typography/font-style',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_font-style.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_font-style.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Font Weight',
         path: '/zh-CN/style/typography/font-weight',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_font-weight.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_font-weight.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Letter Spacing',
         path: '/zh-CN/style/typography/letter-spacing',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_letter-spacing.scss').then(
-            ['../../scss/helper/typography/_letter-spacing.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Line Height',
         path: '/zh-CN/style/typography/line-height',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_line-height.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_line-height.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'List Style Type',
         path: '/zh-CN/style/typography/list-style-type',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_list-style-type.scss').then(
-            ['../../scss/helper/typography/_list-style-type.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Text Alignment',
         path: '/zh-CN/style/typography/text-align',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_text-align.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_text-align.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Text Color',
         path: '/zh-CN/style/typography/text-color',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_text-color.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_text-color.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Text Decoration',
         path: '/zh-CN/style/typography/text-decoration',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_text-decoration.scss').then(
-            ['../../scss/helper/typography/_text-decoration.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Text Transform',
         path: '/zh-CN/style/typography/text-transform',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_text-transform.scss').then(
-            ['../../scss/helper/typography/_text-transform.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Vertical Alignment',
         path: '/zh-CN/style/typography/vertical-align',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_vertical-align.scss').then(
-            ['../../scss/helper/typography/_vertical-align.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       },
 
       {
         label: 'Whitespace',
         path: '/zh-CN/style/typography/whitespace',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_whitespace.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_whitespace.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Word Break',
         path: '/zh-CN/style/typography/word-break',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/typography/_word-break.scss').then(wrapDoc)
-            ['../../scss/helper/typography/_word-break.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   },
@@ -688,13 +514,11 @@ export const cssDocs = [
       {
         label: 'Background Color',
         path: '/zh-CN/style/background/background-color',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/background/_background-color.scss').then(
-            ['../../scss/helper/background/_background-color.scss'],
+            wrapDoc
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
           )
+        )
       }
     ]
   },
@@ -705,49 +529,33 @@ export const cssDocs = [
       {
         label: 'Border Radius',
         path: '/zh-CN/style/border/border-radius',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/border/_border-radius.scss').then(wrapDoc)
-            ['../../scss/helper/border/_border-radius.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Border Width',
         path: '/zh-CN/style/border/border-width',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/border/_border-width.scss').then(wrapDoc)
-            ['../../scss/helper/border/_border-width.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Border Color',
         path: '/zh-CN/style/border/border-color',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/border/_border-color.scss').then(wrapDoc)
-            ['../../scss/helper/border/_border-color.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Border Style',
         path: '/zh-CN/style/border/border-style',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/border/_border-style.scss').then(wrapDoc)
-            ['../../scss/helper/border/_border-style.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   },
@@ -758,25 +566,17 @@ export const cssDocs = [
       {
         label: 'Box Shadow',
         path: '/zh-CN/style/effect/box-shadow',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/effect/_box-shadow.scss').then(wrapDoc)
-            ['../../scss/helper/effect/_box-shadow.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       },
 
       {
         label: 'Opacity',
         path: '/zh-CN/style/effect/opacity',
-        getComponent: (location: any, cb: any) =>
+        component: React.lazy(() =>
-          (require as any)(
+          import('../../scss/helper/effect/_opacity.scss').then(wrapDoc)
-            ['../../scss/helper/effect/_opacity.scss'],
+        )
-            (doc: any) => {
-              cb(null, makeMarkdownRenderer(doc));
-            }
-          )
       }
     ]
   }
@@ -793,16 +593,23 @@ export default class CSSDocs extends React.PureComponent<any> {
 
   render() {
     return (
-      <>
+      <Switch>
-        {React.cloneElement(this.props.children as any, {
+        {navigations2route(cssDocs, {
-          ...(this.props.children as any).props,
           theme: this.props.theme,
           classPrefix: this.props.classPrefix,
           locale: this.props.locale,
           viewMode: this.props.viewMode,
           offScreen: this.props.offScreen
         })}
-      </>
+        {/* {React.cloneElement(this.props.children as any, {
+          ...(this.props.children as any).props,
+          theme: this.props.theme,
+          classPrefix: this.props.classPrefix,
+          locale: this.props.locale,
+          viewMode: this.props.viewMode,
+          offScreen: this.props.offScreen
+        })} */}
+      </Switch>
     );
   }
 }

examples/components/Doc.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import {Switch} from 'react-router-dom';
 
 import {flattenTree, filterTree, mapTree} from '../../src/utils/helper';
+import {navigations2route} from './App';
 
 import DocNavCN from './DocNavCN';
 
-export default class Doc extends React.PureComponent {
+export default class Doc extends React.PureComponent<any> {
   state = {
     prevDoc: null,
     nextDoc: null
@@ -29,7 +31,7 @@ export default class Doc extends React.PureComponent {
     this.setDocFooter();
   }
 
-  componentDidUpdate(preProps) {
+  componentDidUpdate(preProps: any) {
     if (this.props.location.pathname !== preProps.location.pathname) {
       this.props.setNavigations(DocNavCN, false);
       this.setDocFooter();
@@ -37,11 +39,11 @@ export default class Doc extends React.PureComponent {
   }
 
   setDocFooter() {
-    const newDocs = mapTree(DocNavCN, doc => ({
+    const newDocs = mapTree(DocNavCN, (doc: any) => ({
       ...doc,
       children:
         Array.isArray(doc.children) && doc.children.length
-          ? doc.children.map(item => ({
+          ? doc.children.map((item: any) => ({
               ...item,
               group: doc.group || doc.label
             }))
@@ -59,9 +61,8 @@ export default class Doc extends React.PureComponent {
 
   render() {
     return (
-      <>
+      <Switch>
-        {React.cloneElement(this.props.children, {
+        {navigations2route(DocNavCN, {
-          ...this.props.children.props,
           theme: this.props.theme,
           classPrefix: this.props.classPrefix,
           locale: this.props.locale,
@@ -71,7 +72,19 @@ export default class Doc extends React.PureComponent {
           prevDoc: this.state.prevDoc,
           nextDoc: this.state.nextDoc
         })}
-      </>
+
+        {/* {React.cloneElement(this.props.children, {
+          ...this.props.children.props,
+          theme: this.props.theme,
+          classPrefix: this.props.classPrefix,
+          locale: this.props.locale,
+          viewMode: this.props.viewMode,
+          offScreen: this.props.offScreen,
+          ContextPath: this.props.ContextPath,
+          prevDoc: this.state.prevDoc,
+          nextDoc: this.state.nextDoc
+        })} */}
+      </Switch>
     );
   }
 }

examples/components/DocNavCN.ts

@@ -1,4 +1,10 @@
+import React from 'react';
 import makeMarkdownRenderer from './MdRenderer';
+function wrapDoc(doc: any) {
+  return {
+    default: makeMarkdownRenderer(doc)
+  };
+}
 
 export default [
   {
@@ -8,35 +14,33 @@ export default [
       {
         label: '介绍',
         path: '/zh-CN/docs/index',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/index.md').then(wrapDoc)
-          import('../../docs/zh-CN/index.md').then(makeMarkdownRenderer)
+        )
       },
 
       {
         label: '快速开始',
         path: '/zh-CN/docs/start/getting-started',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/start/getting-started.md').then(wrapDoc)
-          import('../../docs/zh-CN/start/getting-started.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
 
       {
         label: '1.2.0 版本变更',
         path: '/zh-CN/docs/start/1-2-0',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/start/1-2-0.md').then(wrapDoc)
-          import('../../docs/zh-CN/start/1-2-0.md').then(makeMarkdownRenderer)
+        )
       },
 
       {
         label: '常见问题',
         path: '/zh-CN/docs/start/faq',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/start/faq.md').then(wrapDoc)
-          import('../../docs/zh-CN/start/faq.md').then(makeMarkdownRenderer)
+        )
       }
     ]
   },
@@ -47,74 +51,60 @@ export default [
       {
         label: '配置与组件',
         path: '/zh-CN/docs/concepts/schema',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/schema.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/schema.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '数据域与数据链',
         path: '/zh-CN/docs/concepts/datascope-and-datachain',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
           import('../../docs/zh-CN/concepts/datascope-and-datachain.md').then(
-            makeMarkdownRenderer
+            wrapDoc
           )
+        )
       },
       {
         label: '模板',
         path: '/zh-CN/docs/concepts/template',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/template.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/template.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '数据映射',
         path: '/zh-CN/docs/concepts/data-mapping',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/data-mapping.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/data-mapping.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '表达式',
         path: '/zh-CN/docs/concepts/expression',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/expression.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/expression.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '联动',
         path: '/zh-CN/docs/concepts/linkage',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/linkage.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/linkage.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '行为',
         path: '/zh-CN/docs/concepts/action',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/action.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/action.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '样式',
         path: '/zh-CN/docs/concepts/style',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/concepts/style.md').then(wrapDoc)
-          import('../../docs/zh-CN/concepts/style.md').then(
+        )
-            makeMarkdownRenderer
-          )
       }
     ]
   },
@@ -125,36 +115,30 @@ export default [
       {
         label: 'SchemaNode',
         path: '/zh-CN/docs/types/schemanode',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/types/schemanode.md').then(wrapDoc)
-          import('../../docs/zh-CN/types/schemanode.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: 'ClassName',
         path: '/zh-CN/docs/types/classname',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/types/classname.md').then(wrapDoc)
-          import('../../docs/zh-CN/types/classname.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: 'API',
         path: '/zh-CN/docs/types/api',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/types/api.md').then(wrapDoc)
-          import('../../docs/zh-CN/types/api.md').then(makeMarkdownRenderer)
+        )
       },
       {
         label: 'Definitions',
         path: '/zh-CN/docs/types/definitions',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/types/definitions.md').then(wrapDoc)
-          import('../../docs/zh-CN/types/definitions.md').then(
+        )
-            makeMarkdownRenderer
-          )
       }
     ]
   },
@@ -165,84 +149,72 @@ export default [
       {
         label: '工作原理',
         path: '/zh-CN/docs/extend/internal',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/internal.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/internal.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '自定义组件 - SDK',
         path: '/zh-CN/docs/extend/custom-sdk',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/custom-sdk.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/custom-sdk.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '自定义组件 - React',
         path: '/zh-CN/docs/extend/custom-react',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/custom-react.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/custom-react.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '将 amis 当成 UI 库用',
         path: '/zh-CN/docs/extend/ui-library',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/ui-library.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/ui-library.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '扩展现有组件',
         path: '/zh-CN/docs/extend/addon',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/addon.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/addon.md').then(makeMarkdownRenderer)
+        )
       },
       {
         label: '页面交互行为跟踪',
         path: '/zh-CN/docs/extend/tracker',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/tracker.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/tracker.md').then(
+        )
-            makeMarkdownRenderer
-          )
       },
       {
         label: '调试工具',
         path: '/zh-CN/docs/extend/debug',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/debug.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/debug.md').then(makeMarkdownRenderer)
+        )
       },
       {
         label: '移动端定制',
         path: '/zh-CN/docs/extend/mobile',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/mobile.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/mobile.md').then(makeMarkdownRenderer)
+        )
       },
       {
         label: '多语言',
         path: '/zh-CN/docs/extend/i18n',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/i18n.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/i18n.md').then(makeMarkdownRenderer)
+        )
       },
       {
         label: '如何贡献代码',
         path: '/zh-CN/docs/extend/contribute',
-        getComponent: () =>
+        component: React.lazy(() =>
-          // @ts-ignore
+          import('../../docs/zh-CN/extend/contribute.md').then(wrapDoc)
-          import('../../docs/zh-CN/extend/contribute.md').then(
+        )
-            makeMarkdownRenderer
-          )
       }
     ]
   }

examples/components/Example.jsx

@@ -99,6 +99,8 @@ import Tab3Schema from './Tabs/Tab3';
 import TestComponent from './Test';
 
 import {normalizeLink} from '../../src/utils/normalizeLink';
+import {Switch} from 'react-router-dom';
+import {navigations2route} from './App';
 
 export const examples = [
   {
@@ -698,16 +700,23 @@ export default class Example extends React.PureComponent {
 
   render() {
     return (
-      <>
+      <Switch>
-        {React.cloneElement(this.props.children, {
+        {/* {React.cloneElement(this.props.children, {
           ...this.props.children.props,
           theme: this.props.theme,
           classPrefix: this.props.classPrefix,
           locale: this.props.locale,
           viewMode: this.props.viewMode,
           offScreen: this.props.offScreen
+        })} */}
+        {navigations2route(examples, {
+          theme: this.props.theme,
+          classPrefix: this.props.classPrefix,
+          locale: this.props.locale,
+          viewMode: this.props.viewMode,
+          offScreen: this.props.offScreen
         })}
-      </>
+      </Switch>
     );
   }
 }

examples/components/MdRenderer.tsx

@@ -9,7 +9,7 @@ import Overlay from '../../src/components/Overlay';
 import PopOver from '../../src/components/PopOver';
 import NestedLinks from '../../src/components/AsideNav';
 import classnames from 'classnames';
-import {Link} from 'react-router';
+import {Link} from 'react-router-dom';
 import Play from './Play';
 
 class CodePreview extends React.Component<any> {
@@ -157,7 +157,7 @@ class Preview extends React.Component {
   }
 }
 
-export default function (doc) {
+export default function (doc: any) {
   return class extends React.Component {
     popoverDom = null;
 

examples/components/Play.jsx

@@ -280,7 +280,7 @@ export default class PlayGround extends React.Component {
     const query = props.location.query;
 
     try {
-      const scope = query.scope || props.scope;
+      const scope = props.scope;
 
       if (scope && scopes[scope]) {
         schemaContent = scopes[scope].replace(

package.json

@@ -119,7 +119,7 @@
     "@types/react-dom": "^16.0.7",
     "@types/react-dropzone": "^5.1.0",
     "@types/react-onclickoutside": "^6.0.2",
-    "@types/react-router": "^3.0.24",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^16.8.1",
     "@types/react-transition-group": "4.4.3",
     "@types/sortablejs": "^1.3.32",
@@ -163,7 +163,8 @@
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",
     "prismjs": "^1.25.0",
-    "react-router": "3.2.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "5.3.0",
     "react-test-renderer": "^16.8.6",
     "ts-jest": "^27.0.5",
     "ts-json-schema-generator": "0.96.0",

src/components/404.tsx

@@ -20,7 +20,7 @@ export class NotFound extends React.Component<NotFoundProps, any> {
     const {links, footerText, description, children, code} = this.props;
 
     return (
-      <div className="container w-xxl w-auto-xs">
+      <div className="container w-xxl w-auto-xs m-auto">
         <div className="text-center m-b-lg">
           <h1 className="text-shadow text-white">{code || '404'}</h1>
           {description ? (

types/custom/index.d.ts

@@ -7,3 +7,8 @@ declare module '*.md' {
   const content: any;
   export default content;
 }
+
+declare module '*.scss' {
+  const content: any;
+  export default content;
+}