react-router-config的使用

原创

挥刀北上

修改于 2020-08-11 06:33:07

5.5K00

代码可运行

文章被收录于专栏：Node.js开发Node.js开发

运行总次数：0

代码可运行

上篇文章我们介绍了在react中如何使用路由，但是随着项目的增大，路由会越来越多，这就需要我们进行集中管理，我们可以自己写脚本，也可以使用react-router-config这个第三方库，这个库简化了配置React-Router，并且对路由实现集中管理，还能实现嵌套路由，下面我们看一下如何使用react-router-config。

react-router-config的使用包含如下三个步骤：

1、按照规则配置静态路由文件，示例代码如下：

import React from 'react';
import {Redirect} from 'react-router-dom';
import AdminLayout from '../layouts/AdminLayout';
import UserLayout from '../layouts/UserLayout';
import AdminClockList from '../application/AdminClockList';
import AdminControl from '../application/AdminControl';
import UserControl from '../application/UserControl';
import UserClockList from '../application/UserControl';
import Home from '../application/Home';
import Login from '../application/Login';
import List from '../application/Login';

export default [
    {
        path:'/admin',
        component:AdminLayout,
        routes:[
            {
                path:'/admin',
                exact: true,
                render:()=>{
                    return <Redirect to={'/admin/control'}></Redirect>
                }
            },
            {
                path:'/admin/control',
                component:AdminControl
            },
            {
                path:'/admin/list/clock',
                component:AdminClockList
            }
        ]

    },
    {
        path:'/user',
        component:UserLayout,
        routes:[
            {   path:'/user',
                exact:true,
                render: () => {
                    return <Redirect to={'/user/control'}></Redirect>
                },
            },
            {
                path: '/user/control',
                component:UserControl
            },
            {
                path:'/user/list/clock',
                component:UserClockList
            },
            {
                path:'/user/list',
                component:List
            }
        ]
    },
    {
        path:'/login',
        component:Login
    },
    {
        path:'/',
        component:Home
    }
]

代码一

仔细阅读代码，我们发现配置文件本质就是一个数组，数组的每一项都有如下属性：path、component、routes、render，（注意：render和component只能使用一个），这里需要注意，如果你的项目路由只有一层，没有嵌套路由，那么可以这样写：

import React from 'react';
import {Redirect} from 'react-router-dom';
import AdminLayout from '../layouts/AdminLayout';
import UserLayout from '../layouts/UserLayout';
import AdminClockList from '../application/AdminClockList';
import AdminControl from '../application/AdminControl';
import UserControl from '../application/UserControl';
import UserClockList from '../application/UserControl';
import Home from '../application/Home';
import Login from '../application/Login';
import List from '../application/Login';

export default [
    {
        path:'/admin',
        component:AdminLayout,
    },
    {
        path:'/user',
        component:UserLayout,
    },
    {
        path:'/login',
        component:Login
    },
    {
        path:'/',
        component:Home
    }
]

代码2

这是最简单的配置。

如果你的路由存在嵌套路由，比方说/admin下面有/admin/control，那么就必须按照代码1来配置，也就是在有嵌套的路由下追加routes属性，routes也是一个数组，数组的每一项也是一个对象，对象具有path属性和component属性。有时根据需求需要跳转，可以配置render属性，render为一个函数，函数内返回一个重定向组件。

2、从react-router-config中导入renderRoutes方法，将上面配置的数据传入此方法。

3、将第二步的计算结果放到Router组件内部，代码如下：

import React from 'react';
import {renderRoutes} from 'react-router-config';
import route from "./routes/index";
import {HashRouter} from 'react-router-dom';
import {Provider} from 'react-redux'
import store from './store/index'
function App(props) {
    return <Provider store={store}>
        <HashRouter>
            {renderRoutes(route)}
        </HashRouter>
    </Provider>
    
}

4、这里需要注意，如果使用了嵌套路由，就需要这一步，如果没有嵌套路由，则忽略这一步。那就是在使用了嵌套路由的组件中设置占位符，本质是按照react-router的规则配置路由，如上文代码1，我们在AdminLayout组件中使用了嵌套路由AdminLayout的代码如下：

import React from 'react';
import {renderRoutes} from 'react-router-config'
const Index = function (props){
    const { route } = props
    return <div>
        <h1>AdminLayout</h1>
        {renderRoutes(route.routes)}
    </div>
}

export default Index;