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. 【leetcode】996. Number of Squareful Arrays

    题目如下: Given an array A of non-negative integers, the array is squareful if for every pair of adjacen ...

  2. NORDIC内核ARM蓝牙芯片NRF51802/NRF51822

    Nordic  nRF51 系列的IC 和协议堆栈对内存大小.封装类型.接口.周边产品及无线连接提供更多选择. 关于 nRF51 系列 多协议 2.4GHz 射频收发器拥有高性能.超低功耗以及灵活性等 ...

  3. mysql学习-join的使用

    sql的执行顺序是从from 开始 join图

  4. if(!confirm("您确定删除吗?")){return;}

    if(!confirm("您确定删除吗?")){return;}

  5. 20175223 MySQL

    目录 完成结果 要求 1 :导入world.sql 要求 2 :CityWanna.java CityWanna.java 要求 3 :CountryWanna.java CountryWanna.j ...

  6. getstu

    #coding: utf- #title..href... import urllib.request import time url=[ page= j= : url[j]='http://www. ...

  7. 'pip' 不是内部或外部命令,也不是可运行的程序或批处理文件。

    解决方法: 本方法适用于已经成功安装python并配置了环境变量. 1.到官网下载pip.py文件 https://pypi.python.org/pypi/pip#downloads 点击下载,解压 ...

  8. Java学习之构造函数

    构造函数特点:  函数名和类名相同  没有返回值(不用定义返回值类型)作用:  对象初始化注意:  如果类没有定义构造函数时,系统会默认定义一个无参的构造函数  如果定义了构造函数,系统不会定义构造函 ...

  9. (转)GitHub上想下载单个文件方法

    找到该文件,单机raw,如下图: 然后会在网页打开该文件,复制URL,下载即可(如果是不可预览文件,会自动下载). 转自: GitHub上想下载单个文件方法 - Smallcaff的博客 - CSDN ...

  10. (转)Adaboost

    基本原理 Adaboost算法基本原理就是将多个弱分类器(弱分类器一般选用单层决策树)进行合理的结合,使其成为一个强分类器. Adaboost采用迭代的思想,每次迭代只训练一个弱分类器,训练好的弱分类 ...