react-路由简单封装
首先在react项目的src文件夹下创建文件：例：router.view.js和router.config.js
router.config.js---生成并抛出路由配置表
//引入路由试图组件
import Table from "../component/table";
import About from "../component/about";
import Log from "../component/log";
import Login from "../component/login";
import LoginSucceed from "../component/loginSucceed";
import MySy from "../component/table/mySy";
import TuiJ from "../component/table/tuiJ";
import XinX from "../component/table/xinX";
import My from "../component/table/my";
const routers = [
{ //重定向配置
from:'/',
to:'/table'
},
{
path:'/about',
component:About
},
{
path:'/login',
component:Login
},
{
path:'/loginSucceed',
component:LoginSucceed
},
{
path:'/log',
component:Log
},
{
path:'/table',
component:Table,
children:[ //一级路由配置
{
from:'/',
to:'/table/mySy',
children:[ //二级路由配置
{
from:'/', //一级路由重定向
to:'/table/mySy/ErJiRouter'
},
{
path:'/table/mySy/ErJiRouter',
component:ErJiRouter
}
]
},
{
path:'/table/mySy',
component:MySy
},
{
path:'/table/tuiJ',
component:TuiJ
},
{
path:'/table/xinX',
component:XinX
},
{
path:'/table/my',
component:My
},
]
}
]
export default routers
router.config.js 加载路由视图组件大函数
import React, { Component } from 'react'
//引入路由内置组件
import { Switch, Route, Redirect } from 'react-router-dom'
export default class Index extends Component {
render() {
const { routers } = this.props //得路由落配置表
const routerList = routers.filter(item => !item.to) //筛选出不是重定向的路由数据
//筛选是重定向数据并生成
const MyRedirect = routers.filter(item => item.from).map((item, key) => <Redirect key={key} from={item.from} to={item.to}></Redirect>)
return (
<Switch>
{
//生成路由对象 路由组件等
routerList && routerList.map((item, key) => <Route path={item.path} key={key}
//路由嵌套，二级路由 ， ...props 二级路由可以获取到props
render={props => <item.component {...props} routers={item.children}></item.component>}
></Route>).concat(MyRedirect) //添加重定向
}
</Switch>
)
}
}
app.js文件下
import React from 'react';
//引入路由配置表
import routers from './router/router.config'
//引入加载路由的组件
import MyRouter from './router/router.view'
//引入路由内置组件
import { BrowserRouter } from 'react-router-dom'
function App() {
return (
<BrowserRouter>
//加载、展示路由试图组件并传入路由配置表
<MyRouter routers={routers}></MyRouter>
</BrowserRouter>
);
}
export default App;
在此需要提醒下，如果路由视图组件写在app.js文件夹下时，每个页面都会存在路由组件
注意：
一、二级路由或三级路由需在对应有路由的组件下引入添加：
import MyRouter from '../../router/router.view'
<MyRouter routers={this.props.routers}></MyRouter>
<NavLink to="路由表对应地址">首页</NavLink>