react-router v3和v4区别
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区别的更多相关文章
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- React Router V4发布
React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...
- [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 ...
- [React Router v4] Redirect to Another Page
Overriding a browser's current location without breaking the back button or causing an infinite redi ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
随机推荐
- fiddler 4 抓取 https 设置
Fiddler抓取https 设置 1.打开fiddler,点击工具栏中的Tools—>Options,点击Actions,选择最后一项,Reset All certificates,然后关闭, ...
- OpenLayers学习笔记(十二)— 飞机速度矢量线预测(二)
根据计算公式实现预测线 作者:狐狸家的鱼 GitHub:八至 之前有一篇博客简单写了一个模拟demo,根据物体当前的速度和方向预测多少时间后所在的位置,具体计算是参考<(译)计算距离.方位以及更 ...
- Java 的内置对象
1.Request对象 该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以获取用户提交的信息. 当Request对象获取客户提交的汉字字符时,会出现乱码问题 ...
- TableStore最佳实践:轻松实现轨迹管理与地理围栏
摘要: 基于TableStore轻松实现亿量级轨迹管理与地理围栏 一.方案背景 轨迹管理系统日常生活中使用非常普遍,如外卖派送轨迹.快递物流流转.车辆定位轨迹等.该场景与地理位置管理类似,核心点与瓶颈 ...
- python--生成器、三元表达式、列表解析、生成器表达式
补充: 在文件开头声明一个空字典,然后在每个函数前加上装饰器,完成自动添加到字典的操作 func_dic={} def make_dic(key): def deco(func): func_dic[ ...
- 78 Ranking SVM
0 引言 Ranking-SVM是SVM的一个变种,通过将排序问题转化为二分类问题,并利用标签数据训练特征权重收敛得到特征模型,完成排序任务,是比较经典的机器学习排序算法. 1 中文版介绍 https ...
- Navicat12破解教程
Navicat12破解教程 1.下载Navicat12 并安装,打开Navicat12 点击14天试用,关闭软件 2.下载注册机: 个人百度网盘(版本更新可能不及时):https://pan.baid ...
- java BufferSegment
package org.rx.util; import java.util.function.Consumer; import static org.rx.core.Contract.require; ...
- (14)C++ 代码重用
valarray<,,,, };//进行高速的数字计算 int a= val.size();//返回包含元素个数 int b= val.sum();//元素总和 int c= val.max() ...
- (2)C++基本类型
一.整形 short .int. long. long long sizeof查看类型所占的字节数 cout << sizeof(short)<<endl;//2 字节 cou ...