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. 微信支持的Authorization code授权模式(公众号开发)(开放平台资料中心中的代公众号发起网页授权)

    链接:https://blog.csdn.net/ASZJBGD/article/details/82838356 主要流程分为两步: 1.获取code 2.通过code换取accesstoken 流 ...

  2. 【JS】JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  3. php time()函数 语法

    php time()函数 语法 time()函数怎么用? php time()函数用来返回当前时间的unix时间戳.语法是time(),返回自从 Unix 纪元(格林威治时间 1970 年 1 月 1 ...

  4. HTML5+CSS3特效设计集锦

    20款CSS3鼠标经过文字背景动画特效 站长之家 -- HTML5特效索引 爱果果h5酷站欣赏  30个酷毙的交互式网站(HTML5+CSS3) 轻松搞定动画!17个有趣实用的CSS 3悬停效果教程 ...

  5. ZROI week4

    考试 前言 起晚了,大概10点才开始看T1,被别人问了T2有点懵逼. 和 这题看了就A掉了,感觉很像原题的样子,是我的错觉吗?? 串串 某神仙有个\(O(n)\)做法问了我一下,我当时也没怎么想(因为 ...

  6. poi各种jar包作用和导入

    poi各种jar包作用和导入 目前POI的最新发布版本是poi-bin-3.17-20170915. 下载地址: Apache POI - Download Release Artifacts  ht ...

  7. 一.jenkins安装(windows环境)

    前提:jdk等已安装 jenkins下载地址:https://jenkins.io/download/ 以我目前的知识记录两种启动方式: 1.直接下载war包 通过   java -jar jenki ...

  8. vim 更改注释颜色

    在 ~/.vimrc 添加命令: highlight Comment ctermfg=green

  9. VTemplate模板引擎的使用--进阶篇

    1.<vt:template>与<vt:include>标签的不同 <vt:template>和<vt:include> 标签都包含file属性,如果这 ...

  10. Supervisord rce(CVE-2017-11610)

    POST /RPC2 HTTP/1.1 Host: localhost Accept: */* Accept-Language: en User-Agent: Mozilla/5.0 (compati ...