简单粗暴的react路由

我要的是简单粗暴的路由

习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。

那么就自己封装一个吧

1.封装多级路由的情况 ————文件名为routerView.js
import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return {
    props.routes.map((item, index)=>{
      console.log(item.path);
      return {
        if (item.children){
          return 
        }else{
          return 
        }
      }}>
    })
  }
  }
}
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.在页面中使用

有问题可以留言交流

你可能感兴趣的:(react.js,javascript)