前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单粗暴的react路由

简单粗暴的react路由

作者头像
super.x
发布2019-04-12 15:17:30
8310
发布2019-04-12 15:17:30
举报

我要的是简单粗暴的路由

习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。
那么就自己封装一个吧

1.封装多级路由的情况 ————文件名为routerView.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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.在全局挂载

clipboard.png
clipboard.png

4.在页面中使用

clipboard.png
clipboard.png

有问题可以留言交流

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-02-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 我要的是简单粗暴的路由
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档