专栏首页考拉阅读前端团队简单粗暴的react路由

简单粗暴的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.在页面中使用

有问题可以留言交流

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Excel快速批量导入生产Cavns并生成图片下载到本地

    首先要解析excel表格 把csv格式的excel转化成html里面的table顺便把需要的信息push到一个数组

    super.x
  • vue + 微信获取用户信息

    本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要...

    super.x
  • 如何优雅的在Vue Project中使用vue-apollo

    一个GraphQL查询可以包含一个或者多个操作(operation),类似于一个RESTful API。操作(operation)可以使两种类型:查询(Quer...

    super.x
  • 第七篇:suds.TypeNotFoun

    想要用Python的suds模块调用webservice地址做自动测试,但是找了很多方法都失败了,最终找到另外一个模块可以作为客户端访问服务器地址。

    py3study
  • Scrapy笔记五 爬取妹子图网的图片 详细解析

    这部分相当有用,咱们不多说,目前是2016.6.22日亲测可用.环境方面是linux_ubuntu_15.04 python_scrapy的环境搭建有问题请看之...

    十四君
  • 微软再曝高危远程代码执行漏洞 临时防护措施戳这里

    北京时间3月24日,微软紧急发布一则Type 1字体解析远程代码执行漏洞警报(ADV200006)。该漏洞是由于Windows内置的Adobe Type Man...

    用户6477171
  • 使用Selenium更改Chrome默认下载存储路径

    上一篇博客写到当不能使用Selenium来操作上传下载接面的时候,我们使用第三方AutoIt来搞定。 Java+Selenium2+autoIt 实现Chrom...

    软测小生
  • Selenium Webdriver之点击图像链接

    图像链接是Web页面中由图像表示的链接,当点击该图片(链接)时,将导航到另一个窗口或页面。

    软测小生
  • DevOps需要NetDevOps的5大理由

    随着云计算、容器技术的大行其道,DevOps这个一度熟悉又陌生的词汇逐渐被IT企业所津津乐道。曾听过Chris Canciosi的这样一番评价,DevOps填补...

    SDNLAB
  • 从零开始学C++之虚继承和虚函数对C++对象内存模型造成的影响(类/对象的大小)

    首先重新回顾一下关于类/对象大小的计算原则: 类大小计算遵循结构体对齐原则 第一个数据成员放在offset为0的位置 其它成员对齐至min(sizeof(me...

    s1mba

扫码关注云+社区

领取腾讯云代金券