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. Python3.5-20190516-廖老师-自我笔记-匿名函数-装饰器

    当函数很简单的时候采用匿名函数很方便.

  2. Clip

    网页中的渲染是由CSS来实现,CSS2就不说了,那个没得说的,最常用的就是个颜色布局什么的. CSS3 自从有了CSS3,相比CSS2变得更具有活力了,CSS3没有什么方法函数的,它跟CSS2一样也是 ...

  3. Java排序算法 [选择、冒泡、快排]

    选择排序: 简述:从数组的第一个元素开始,依次与其他所有的元素对比,如果比自身大或小(取决于升序或降序)交换位置. package com.sort; import java.util.Arrays; ...

  4. 如何在程序中执行动态生成的Delphi代码

    如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...

  5. javascript 对象的设计模式

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

  6. express上传图片

    var express = require('express') var app = express() var proxy = require('http-proxy-middleware') co ...

  7. 搞懂分布式技术14:Spring Boot使用注解集成Redis缓存

    本文内容参考网络,侵删 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutor ...

  8. linux c(一)Helloworld

    终端的屏幕上输入命令如下: 使用vi helloworld.c打开helloworld.c文件,写下如下代码:

  9. CDQ分治&整体二分学习个人小结

    目录 小结 CDQ分治 二维LIS 第一道裸题 bzoj1176 Mokia bzoj3262 陌上花开 bzoj 1790 矩形藏宝地 hdu5126四维偏序 P3157 [CQOI2011]动态逆 ...

  10. 几个常见的漏洞(xss攻击 cookie未清除 nginx信息泄露)与处理方法

    项目在安全检查中发现很多问题,要求整改,其中就有最常见的xss攻击 漏洞描述 渗透测试人员检测到网站筛选框均存在反射型跨站脚本攻击,例如: "><script>alert( ...