封装react路由
思路
类似vue中的路由配置 整个都由路由表操作 更改路由表即可添加对应的路由配置
开始
安装
npm install react-router-dom -S
封装
分俩个文件 分别是路由表 和 路由组件的封装
路由表
负责引入组件和导出对应的路由信息
路由表中的参数可以自行定义
import About from '../pages/about';
import Home from '../pages/home';
import Profile from '../pages/profile';
import News from '../pages/news';
export default [
{
path:'/home',
component: Home
},
{
path:'/about',
component: About,
children:[
{
path:'/about/news',
component:News,
}
]
},
{
path:'/profile',
component: Profile
},
{
from:'/',
redirect:'/home',
exact:true
}
]
封装路由组件
封装路由
import React, { Component } from 'react';
import {
Switch,
Route,
Redirect
} from 'react-router-dom';
class index extends Component {
render() {
let { routes } = this.props;
return (
<Switch>
{
routes.map((item, index) => {
if(item.redirect) {//判断是否重定向
return (
<Redirect from={item.from} to={item.redirect} exact={item.exact} key={index}></Redirect>
)
}
return (//props中包含了操控路由的对象
<Route path={item.path} key={index} component={(props) => {
return (//组件传递一些数据可以写成这样
<item.component {...props} routes={item.children}></item.component>
)
}}></Route>
)
})
}
</Switch>
);
}
}
export default index;
使用
在使用时引入路由表 和封装好的组件这样使用即可
<RouterView *routes*={config}></RouterView>
import React, { Component } from 'react';
import {
BrowserRouter,
Link,
} from 'react-router-dom';
import {RouterView} from '../components';
import config from './config';
class index extends Component {
render() {
return (
<BrowserRouter>
<RouterView routes={config}></RouterView>
<ul>
<li><Link to='/home'>home</Link></li>
<li><Link to='/about'>about</Link></li>
<li><Link to='/profile'>profile</Link></li>
</ul>
</BrowserRouter>
);
}
}
export default index;
在子路由中使用
import React, { Component } from 'react';
import {
Link
} from 'react-router-dom';
import { RouterView } from '../components';
class news extends Component {
render() {
return (
<div>
<Link to='/about/news/nav'>nav</Link>s
{/* 在封装的路由组件中已经分配好了对应的路由表 */}
<RouterView routes={this.props.routes}></RouterView>
</div>
);
}
}
export default news;
Comments | NOTHING