脚本宝典收集整理的这篇文章主要介绍了简单粗暴的react路由,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我要的是简单粗暴的路由
习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。
那么就自己封装一个吧
1.封装多级路由的情况 ————文件名为routerView.js
import React From 'react';
import {Switch, redirect, Route} from 'dva/router';
export default (props)=>{
return <Switch>{
props.routes.map((item, index)=>{
console.log(item.path);
return <Route path={item.path} key={index} render={(props)=>{
if (item.children){
return <item.component {...props} routes={item.children}></item.COMponent>
}else{
return <item.component {...props}></item.component>
}
}}></Route>
})
}<Redirect from="/" exact to="/tab/index"></Redirect>
}</Switch>
}
2.定义路由列表对象 ————文件名为index.js
import React from 'react';
// 一级路由
import Tab from '../routes/TabPage';
import Detail from '../routes/Detail';
// 二级路由
import Rank from '../routes/RankPage';
import SeArch from '../routes/SearchPage'
import Index from '../routes/Indexpage';
export default {
routes: [{
path: '/tab',
component: Tab,
children: [{
path: '/tab/index',
component: Index
},
{
path: '/tab/rank',
component: Rank
},
{
path: '/tab/search',
component: Search
}]
},
{
path: "/detail",
component: Detail
}]
}
3.在全局挂载
4.在页面中使用
有问题可以留言交流
以上是脚本宝典为你收集整理的简单粗暴的react路由全部内容,希望文章能够帮你解决简单粗暴的react路由所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。