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. fiddler 4 抓取 https 设置

    Fiddler抓取https 设置 1.打开fiddler,点击工具栏中的Tools—>Options,点击Actions,选择最后一项,Reset All certificates,然后关闭, ...

  2. OpenLayers学习笔记(十二)— 飞机速度矢量线预测(二)

    根据计算公式实现预测线 作者:狐狸家的鱼 GitHub:八至 之前有一篇博客简单写了一个模拟demo,根据物体当前的速度和方向预测多少时间后所在的位置,具体计算是参考<(译)计算距离.方位以及更 ...

  3. Java 的内置对象

    1.Request对象 该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以获取用户提交的信息.    当Request对象获取客户提交的汉字字符时,会出现乱码问题 ...

  4. TableStore最佳实践:轻松实现轨迹管理与地理围栏

    摘要: 基于TableStore轻松实现亿量级轨迹管理与地理围栏 一.方案背景 轨迹管理系统日常生活中使用非常普遍,如外卖派送轨迹.快递物流流转.车辆定位轨迹等.该场景与地理位置管理类似,核心点与瓶颈 ...

  5. python--生成器、三元表达式、列表解析、生成器表达式

    补充: 在文件开头声明一个空字典,然后在每个函数前加上装饰器,完成自动添加到字典的操作 func_dic={} def make_dic(key): def deco(func): func_dic[ ...

  6. 78 Ranking SVM

    0 引言 Ranking-SVM是SVM的一个变种,通过将排序问题转化为二分类问题,并利用标签数据训练特征权重收敛得到特征模型,完成排序任务,是比较经典的机器学习排序算法. 1 中文版介绍 https ...

  7. Navicat12破解教程

    Navicat12破解教程 1.下载Navicat12 并安装,打开Navicat12 点击14天试用,关闭软件 2.下载注册机: 个人百度网盘(版本更新可能不及时):https://pan.baid ...

  8. java BufferSegment

    package org.rx.util; import java.util.function.Consumer; import static org.rx.core.Contract.require; ...

  9. (14)C++ 代码重用

    valarray<,,,, };//进行高速的数字计算 int a= val.size();//返回包含元素个数 int b= val.sum();//元素总和 int c= val.max() ...

  10. (2)C++基本类型

    一.整形 short .int. long. long long sizeof查看类型所占的字节数 cout << sizeof(short)<<endl;//2 字节 cou ...