React-router-dom 5.x 和 lazy懒加载 实现多层路由嵌套

实现路由嵌套网上可以找到各种方法，在react-router-dom3.x和4.x的时候路由的嵌套是差不多的，但在5.x的时候路由嵌套变得不一样了，这也是我踩了两天坑找到的解决方案：

这是我的react和react-router-dom的版本：

"react": "^17.0.2",
"react-router-dom": "^5.2.0",
复制代码

按照要求我们需要将路由配置分离出来一个JS文件，然后暴露：

/router/routerList.js

import { lazy } from 'react';

const routerList = [
  {
    path: "/", // 路径
    name: "首页", // 名字
    exact: true, // 精准匹配
    component: lazy(() => import('../page/main/index')) // 懒加载方案
  },
  {
    path: "/user",
    name: "用户管理",
    exact: true,
    component: lazy(() => import('../page/user/index')),
    routes: [
      {
        path: "/user/userList",
        name: "用户列表",
        exact: true,
        component: lazy(() => import('../page/user/userList/index')),
        routes: [
          {
            path: "/user/userList/userDetail",
            name: "用户详情",
            exact: true,
            component: lazy(() => import('../page/user/userList/userDetail/index')),
          }
        ]
      }
    ]
  }
]
export default routerList;
复制代码

这里我用了react的lazy懒加载方式，加快上线的加载速度。

接下来就是react-router-dom5.x的嵌套方案：

/router/index.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import React, { Suspense, Fragment } from 'react';
import routerList from './routerList';

class CustomRoute extends React.Component {
  // 递归方法
  routerListRecursion = (routerList) => {
    return Object.assign(routerList).map(({ path, exact, routes, component: LazyComponent }, key) => {
      let newItem = { path, exact, routes };
      if (routes && routes.length) {
        return (
          <Fragment key={`fragment${key}`}>
            <Route key={key} {...newItem} render={(props) => <LazyComponent {...props} />}></Route> // 为方便组件之间的传参 利用render
            <Switch key={`switch${key}`}>
              {this.routerListRecursion(routes)}
            </Switch>
          </Fragment>
        )
      } else {
        return <Route key={key} {...newItem} render={(props) => <LazyComponent {...props} />}></Route>
      }
    })
  }
  render() {
    return (
      <BrowserRouter>
        <Suspense fallback={<span>Loading...</span>}> // Lazy要求有的Loading组件
          <Switch>
            {this.routerListRecursion(routerList)} // 执行递归方法
          </Switch>
        </Suspense>
      </BrowserRouter>
    );
  }
}
export default CustomRoute;
复制代码

这样就实现了一个基于react-router-dom 5.x的路由嵌套，在主入口写入CustomRouter组件：

index.js

import ReactDOM from 'react-dom';
import CustomRoute from './router/index';

ReactDOM.render(
  <CustomRoute/>,
  document.getElementById('root')
);
复制代码

参考文献：blog.csdn.net/Vue2018/art…

本人React小白一枚，如果代码有问题，有可以优化的问题，思路有问题等等，麻烦留下评论一起探讨，万分感谢！！！