1.默认路由

v3 <IndexRoute>

v4 <Route exact>

2.授权路由

import Redirect from 'react-router-dom'

< Redirect to="home"> 组件
它会始终执行浏览器重定向,当处于中时,只有其他路由不匹配的情况下,才会渲染重定向组件;

3.包容性路由

<header>
<Route path="/user" component={usertop}/>
<Route path="/user" component={userbottom}/>
<Route path="/user/list" component={userlist}/>
</header>

V3路由有排他性,即一次只能渲染一条,V4中上面的会将匹配的路由的组件都渲染,v4使用来进行路由排他。例上面,匹配路由 /user 时, usertop userbottom 与 userlist 会同时渲染;

路由的战略性布局(即使用排他路由策略)

<header>
<switch>
<Route path="/" exact component={home}/>
<Route path="/user" component={usertop}/>
<Route path="/user/list" component={userlist}/>
<Redirect to="/" />
</switch>
</header>

这样的即使没有home没有exact,它也会被渲染因为Redirect;

路由/user 时,匹配如下:
匹配了/user,不匹配/user/list(因为这里使用了switch排他路由)

react-router v3和v4区别的更多相关文章

  1. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  2. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  3. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  4. [React Router v4] Intercept Route Changes

    If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...

  5. [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redi ...

  6. [React Router v4] Render Multiple Components for the Same Route

    React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...

  7. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  8. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  9. [React Router v4] Render Nested Routes

    With React Router v4 the entire library is built as a series of React components. That means that cr ...

随机推荐

  1. shell中的空格【转载】

    1.定义变量时, =号的两边不可以留空格. eg: gender=femal————right gender =femal———–wrong gender= femal———–wrong gender ...

  2. 【leetcode】1001. Grid Illumination

    题目如下: On a N x N grid of cells, each cell (x, y) with 0 <= x < N and 0 <= y < N has a la ...

  3. vue基础八

    表单控件绑定 1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端 ...

  4. javascript 对象的设计模式

    1.为什么学习设计模式:http://www.iteye.com/news/32092   或  https://blog.csdn.net/pigpigpig4587/article/details ...

  5. mysql授权、删除用户和角色权限

    备份权限 GRANT USAGE ON *.* TO 'backup'@'172.16.0.157' IDENTIFIED BY PASSWORD '*38B4F16EADB1601E713D9F03 ...

  6. Binary Search - Jump on the Stones

    Binary Search algorithm. Wikipedia definition: In computer science, binary search, also known as hal ...

  7. 在 MacBook 上安装 Ubuntu

    建立ubuntu 安裝U盤,加入usb port,按住option key 開機,正常安裝. 完成後,會缺少wifi drive sudo apt-get install bcmwl-kernel-s ...

  8. linux基础知识汇总(二)-vi/vim

    转:http://blog.csdn.net/sky04/article/details/5662582 vi与vim一样都是编辑器,不同的是vim更高级一些,可以理解是vi的高级版本.vi就像Win ...

  9. 数据库的显示、创建、使用 、用户授权管理及忘记root用户后重置密码

    1.显示数据库 show databases; 默认的数据库及大致功能: mysql -- 用户权限 相关数据 test --用于用户测试数据 information_schema -MySQL 本身 ...

  10. 测试过程中bug分类

    测试的核心任务是发现bug.在这之前是分析需求,之后是跟踪bug.跳出具体的项目来看,所有的bug无非是以下五大类. 软件没有实现应该实现的功能:如指定的登录功能. 软件出现了本应该避免的错误:如用户 ...