react-router-config的使用
原创react-router-config的使用
原创
上篇文章我们介绍了在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;其中renderRoutes(route.routes)的结果为：
其结果是嵌套的三个路由。
以上便是react-router-config的使用步骤，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。