What I want is a simple and rough route.
Accustomed to the usage of vue-router, it is always troublesome to use react-router again.
Then pack one yourself
1. encapsulation of multi-level routing-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 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. Define the routing list object-the file name is index.js
import React from 'react';
//Level 1 Routing
import Tab from '../routes/TabPage';
import Detail from '../routes/Detail';
//secondary routing
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
4. Use in Page
If you have any questions, you can leave a message for communication.