React-router5.x配置路由模块化及嵌套路由

安装

npm install react-router-dom

在​​src​​​目录下新建​​router文件夹​​​创建​​index.js文件​​

注意导入路径，​​@​​​为我项目配置路径，默认指向​​src​​目录

import { lazy } from 'react';
// 基于路由进行代码分割     
// 经测试可进行路由懒加载
// https://zh-hans.reactjs.org/docs/code-splitting.html#route-based-code-splitting
const router = [
    {
        path: "/",
        component: lazy(() => import('@/views/Beau/Beau.jsx')),
        exact: true
    }, {
        path: "/data",
        component: lazy(() => import('@/views/Data.jsx')),
        exact: true
    }, {
        path: "/user",
        component: lazy(() => import('@/views/User.jsx')),
        exact: false,
        children: [
            {
                path: "/user",
                component: lazy(() => import('@/views/User/Index.jsx')),
                exact: true,
            }, {
                path: "/user/info",
                component: lazy(() => import('@/views/User/Info.jsx')),
                exact: true,
            }
        ]
    },
]
export default

​​App.js​​文件进行导入配置

import './App.less';
import router from "./router"
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import React, { Suspense } from 'react';
function App() {
  return (
    <Router>
      <div id="App">
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            {
              router.map((item) => {
                return (
                  <Route exact={item.exact} path={item.path} key={item.path}
                    render={props => (
                      <item.component {...props} routes={item.children} />
                    )} />
                )
              })
            }
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}
export default App;

嵌套路由页面​​User.jsx​​的写法

import React, { Component, Suspense } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
class User extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <Router>
                <div>
                    <Link to="/user">用户首页</Link>
                    <Link to="/user/info">-----用户信息页</Link>
                    <Suspense fallback={<div>Loading...</div>}>
                        <Switch>
                            {
                                this.props.routes.map((item) => {
                                    return (
                                        <Route exact={item.exact} path={item.path} key={item.path} component={item.component} />
                                    )
                                })
                            }
                        </Switch>
                    </Suspense>
                </div>
            </Router>
        );
    }
}

export default User;

重新启动项目即可
源码地址

https://github.com/skywalk94/react-demo.git