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. js判断设备(转)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 【leetcode】944. Delete Columns to Make Sorted

    题目如下: We are given an array A of N lowercase letter strings, all of the same length. Now, we may cho ...

  3. redis requires Ruby version >= 2.2.2.

    安装RVM 无法在服务器使用curl命令访问https域名,原因是nss版本有点旧了,yum -y update nss更新一下 yum -y update nss 新建rvm-installer.s ...

  4. paper 141:some paper with ComputerCV、MachineLearning[转]

    copy from:http://blog.csdn.net/zouxy09/article/details/8550952 一.特征提取Feature Extraction: ·         S ...

  5. SQL语句之-通配符

    四.用通配符过滤数据 1.LIKE模糊搜索 2.%0个1个多个字符 SELECT * FROM products WHERE prod_name LIKE 'Fish%' 区分大小写,任意位置,任意次 ...

  6. PHP浮点计算结果返回异常问题

    php中如果直接小数点进行计算的话.比如16.8*3var_dump是50.4.但是return就变成了50.400000000000006.至于是什么原因本人尚不得而知.解决方法是用把计算放入下面的 ...

  7. share memory cache across multi web application

    Single instance of a MemoryCache across multiple application pools on the same server [duplicate] Yo ...

  8. MySQL-视图上进行增删改查

    https://dev.mysql.com/doc/refman/5.7/en/view-updatability.html https://dev.mysql.com/doc/refman/8.0/ ...

  9. vue-cesium中经纬度写反了,报错

    vue-cesium中经纬度写反了,报错 [Vue warn]: Invalid prop: custom validator check failed for prop "position ...

  10. 安装Treserocr遇到的问题

    相关链接: tesseract下载地址:http://digi.bib.uni-mannheim.de/tesseract 一.出现的问题 1.点击进去 进行下载 注意:其中文件名中带有dev的为开发 ...