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. python读写excel(xlrd、xlwt)

    一.读excel表 读excel用到xlrd模块,写excel用到xlwt模块: # 1.导入模块 import xlrd # 2.打开Excel文件读取数据 workbook = xlrd.open ...

  2. ECUST_Algorithm_2019_3

    简要题意及解析 1001 给出一个\(n\times m\)连连看的局面,下面有\(q\)次询问:两个位置的块能否消去,即两个位置的连线是否能少于两次转折,回答\(YES/NO\).与一般的连连看不同 ...

  3. C++ 使用老牌库xzip & unzip对文件进行压缩解压

    原文链接 https://www.codeproject.com/Articles/7530/Zip-Utils-clean-elegant-simple-C-Win https://www.code ...

  4. usermod - modify a user account

    -a, --append Add the user to the supplementary group(s). Use only with the -G option. -G, --groups G ...

  5. Django框架的学习

    目前 Django 1.6.x 以上版本已经完全兼容 Python 3.x. 1. 指定django版本的安装 pip install django =1.11

  6. 阿里云安装Cloudera Manager(草稿)

    选择三台同一局域网的阿里云服务器 最初使用阿里云.京东云.百度云的三台不同的服务器,遇到一些问题,没有解决,公网速度也没有保障,还是选择同一局域网的服务器吧 CM有三种不同的安装方式: 通过 Clou ...

  7. vue实现前后台交互

    首先需要前台先安装一个包 cnpm install axios --save 第二还需要解决跨域问题 在settings中添加一条中间件 MIDDLEWARE = [“corsheders.middl ...

  8. window环境mysql卸载不干净

    停止MySQL服务1添加删除程序中卸载MySQL2到安装目录删除MySQL3删除:C:\Documents and Settings\All Users\Application Data\MySQL ...

  9. 【从0到1,搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】01、环境准备

    开发环境 windows+STS(一个针对Spring优化的Eclipse版本)+Maven+SQLServer 环境部署 1.安装SQLServer(使用版本2008R2) 自行安装,此处略过 2. ...

  10. 08 java代码块的概述和分类

    08.01_面向对象(代码块的概述和分类) A:代码块概述 在Java中,使用{}括起来的代码被称为代码块. B:代码块分类 根据其位置和声明的不同,可以分为局部代码块,构造代码块,静态代码块,同步代 ...