作者:真实的米零星_826 | 来源:互联网 | 2020-08-13 23:08
本篇文章给大家带来的内容是关于react路由的简单用法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
我要的是简单粗暴的路由
习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。
那么就自己封装一个吧
1.封装多级路由的情况 ————文件名为routerView.js
import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
return {
props.routes.map((item, index)=>{
console.log(item.path);
return {
if (item.children){
return
}else{
return
}
}}>
})
}
}
}
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.在全局挂载
bug不是我的错
11
发布于
考拉阅读前端团队
21 小时前发布
36 次阅读
·
读完需要 6 分钟
3
我要的是简单粗暴的路由
习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。
那么就自己封装一个吧
1.封装多级路由的情况 ————文件名为routerView.js
import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
return {
props.routes.map((item, index)=>{
console.log(item.path);
return {
if (item.children){
return
}else{
return
}
}}>
})
}
}
}
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.在全局挂载
以上就是react路由的简单用法(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!