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. 【leetcode】946. Validate Stack Sequences

    题目如下: Given two sequences pushed and popped with distinct values, return true if and only if this co ...

  2. UNP学习第六章select

    一.I/O复用典型的网络应用场合 当客户处理多个描述字时,必须使用I/O复用,这在前一段中已做了描述. 一个客户同时处理多个套接口时可能的,但很少出现. 如果一个TCP服务器既要处理监听套接口,又要处 ...

  3. layui-treeTable v2.0添加搜索功能

    layui-treeTable 添加搜索功能 在树形表格头部加一个input框: <div class="layui-inline"> <input class= ...

  4. switch 使用使用小技巧

    for (int i=0;i<100;i++) { switch (i) { case 1 ... 10: NSLog(@"case 1 ... 10: = %d",i); ...

  5. python爬虫https://www.imdb.com/chart/top的电影

    目标:爬取https://www.imdb.com/chart/top网页上面的电影top20 直接上main.py代码: #!/usr/bin/python35 # -*- coding:utf-8 ...

  6. 72、salesforce call RESTful 的方式

    通过Chrome的Postman 来call salesforce的restful api https://login.salesforce.com/services/oauth2/token?gra ...

  7. SQL server 2012序列号 注册码

    企业核心版: FH666-Y346V-7XFQ3-V69JM-RHW28 商业智能版: HRV7T-DVTM4-V6XG8-P36T4-MRYT6 开发版: YQWTX-G8T4R-QW4XX-BVH ...

  8. Linux监控cpu,内存,磁盘脚本

    #!/bin/bash # CPU_us=$(vmstat | awk '{print $13}' | sed -n '$p') CPU_sy=$(vmstat | awk '{print $14}' ...

  9. 运维 05 Shell基本命令

    Shell基本命令   前言 前面咱们已经成功安装了Linux系统--centos7,那么现在跟着超哥奔向Linux的大门. Linux命令行的组成结构 [root@oldboy_python ~]# ...

  10. elasticsearch-6.0.1安装

    elasticsearch-6.0.1安装 0. 介绍:     ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎:是目前全文搜索引擎的首选. ...