Home > Article > Web Front-end > Simple usage of react routing (code example)
This article brings you the simple usage of react routing (code examples), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
What I want is simple and crude routing
I am used to the usage of vue-router routing, but it always feels quite troublesome to use react-router again.
Then encapsulate one yourself
1. When encapsulating multi-level routing ————The file name is 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>{ if (item.children){ return <item.component></item.component> }else{ return <item.component></item.component> } }}></route> }) }<redirect></redirect> }</switch> }
2. Define the routing list object — ——The file name is 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. Mount it globally
4. Use # in the page
##If you have any questions, please leave a message
Posted 21 hours ago
Simple and crude react routing##
What I want is simple and crude routingI am used to the usage of vue-router routing, and it always feels quite troublesome to use react-router again. Then encapsulate one yourself1. When encapsulating multi-level routing ————The file name is routerView.jsimport 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>{
if (item.children){
return <item.component></item.component>
}else{
return <item.component></item.component>
}
}}></route>
})
}<redirect></redirect>
}</switch>
}
2. Define the routing list object — ——The file name is index.jsimport 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. Mount globally
report
##Comment
The above is the detailed content of Simple usage of react routing (code example). For more information, please follow other related articles on the PHP Chinese website!