簡單粗暴的react路由

我要的是簡單粗暴的路由

習慣了 vue-router 路由的用法，再用react-router總感受挺麻煩的。

那麼就本身封裝一個吧

1.封裝多級路由的狀況 ————文件名爲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.定義路由列表對象 ————文件名爲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.在全局掛載

4.在頁面中使用

有問題能夠留言交流