Simple and Rough react Routing

  javascript, react.js

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>{, index)=>{
 return <Route path={item.path} key={index} render={(props)=>{
 if (item.children){
 return <item.component {...props} routes={item.children}></item.component>
 return <item.component {...props}></item.component>
 }<Redirect from="/" exact to="/tab/index"></Redirect>

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.