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 ...
随机推荐
- C++ 使用老牌库xzip & unzip对文件进行压缩解压
原文链接 https://www.codeproject.com/Articles/7530/Zip-Utils-clean-elegant-simple-C-Win https://www.code ...
- Cesium截图功能
首先安装 canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...
- cocos2D-X call JNIHelper
#ifndef _WIN32 JNIEnv *j = JniHelper::getEnv(); if (j == nullptr || j == NULL) {test += "JNIEnv ...
- python--函数的返回值、函数参数的使用、名称空间与作用域、函数嵌套、函数对象
今天学习内容有函数的返回值.函数参数的使用.名称空间与作用域.函数嵌套. 下来我们一一查看. 函数的返回值 看几个栗子: def func(x): y=func() print(y) def foo( ...
- JavaScript 六种继承方式
title: JS的六种继承方式 date: 2017-06-27 05:55:49 tags: JS categories: 学习 --- 继承是面向对象编程中又一非常重要的概念,JavaScrip ...
- Vue - 前端本地项目开发过程中webpack打包内存泄漏问题解决方法
编译项目出现如下错误: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 原因: n ...
- CentOS 安装MySQL5.7 源码方式安装
MySQL rpm方式安装:https://www.cnblogs.com/deverz/p/9560403.html 1.卸载已经安装的MySQL yum list installed mysqlr ...
- promise基础用法
/** * Created by liyinghao on 2016/11/6. */ const fs = require('fs'); /* * 新建一个Promise对象,Promise就是一个 ...
- shell 从函数文件中调用函数的方法
你可以把所有的函数存储在一个函数文件中 你可以把所有的文件函数加载到当前脚本或命令行 加载函数文件中所有函数的方法: source xxx.sh
- java 重新学习 (六)
一.java7以后,使用带泛型的接口,类定义变量,那么调用构造器创建对象时构造器的后面不必带上泛型.List<String> list = new ArrayList()<>; ...