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.