1、Router

（1）最基础的路由器，必须有history属性

（2）BrowserRouter和HashRouter都是由Router组件扩展而来

2、BrowserRouter

（1）BrowserRouter利用的是H5 的history API实现URL和UI同步

（2）内部的histroy对象由createBrowserHistory()生成

3、HashRouter

（1）HashRouter是通过改变URL的hash部分来实现URL和UI同步

（2）内部的histroy对象由createHashHistory()生成

4、路由跳转的方式

（1）Link和NavLink

　　使用NavLink的时候要注意，一般会出现第一个NavLink始终存在active类名，加一个exact属性就可以了

（2）当组件被withRouter包裹，组件的props里会又一个对象，对象里包含history、location和match属性，可以用this.props.history.push()进行路由跳转

（3）当路由器是HashRouter时，还可以自己创建history对象进行路由跳转，import { createHashHistory } from 'history'　　createHashHistory().push()进行路由跳转

　　  当路由器是BrowserRouter时，createBrowserHistory().push()跳转时会导致URL改变但界面没更新，原因待研究，但是可以通过hack的方式解决：

　　  　　不用BrowserRouter, 用Router代替，向Router传入封装好的自定义的history对象（createBrowserHistory()），在需要用到createBrowserHistory().push()方法的组件内再导入这个自定义history对象，就可以了

react-router v4 理解的更多相关文章

  1. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  2. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  3. [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 ...

  4. [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redi ...

  5. [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 ...

  6. [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 ...

  7. [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 ...

  8. [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 ...

  9. [React Router v4] Parse Query Parameters

    React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...

  10. [React Router v4] Use Regular Expressions with Routes

    We can use regular expressions to more precisely define the paths to our routes in React Router v4. ...

随机推荐

  1. leetcode.矩阵.73矩阵置零-Java

    1. 具体题目 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: 输出:[ [  [1,1,1],  [1,0,1],  [ ...

  2. WEB前端资源集

    原出处:http://www.cnblogs.com/zhengjialux/archive/2017/01/16/6291394.html 资源网站篇 CSDN:全球最大中文IT社区,为IT专业技术 ...

  3. webservice的使用-axis1-01

    1.搭建axis服务器 1.1 下载axis-bin-1_4.zip文件并解压 1.2 拷贝\axis-1_4\webapps目录下的axis到tomcat目录下的webapps目录下并启动 1.3 ...

  4. Codeforces 490D Chocolate

    D. Chocolate time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  5. mavenFailed to execute goal org.apache.maven.plugins:maven-surefire-plugin解决方法

    在项目上右键==>属性==>java构建路径==>源代码,然后把几个文件夹全部删除,然后再添加文件夹中把它们从新添加,然后再maven intall,部署.

  6. 浅谈Java/Android下的注解

    什么是注解 java.lang.annotation,接口 Annotation,在JDK5.0及以后版本引入. 注解是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通 ...

  7. xargs使用之空格处理

    xargs指定分隔符为'\n' (默认用空格分隔) locate xxx | xargs -d '\n' ls -l xargs使用 -0 参数会以字符串的'\0'结尾为分隔符,可以在文本传给xarg ...

  8. 论文学习——《Learning to Compose with Professional Photographs on the Web》 (ACM MM 2017)

    总结 1.这篇论文的思路基于一个简单的假设:专业摄影师拍出来的图片一般具备比较好的构图,而如果从他们的图片中随机抠出一块,那抠出的图片大概率就毁了.也就是说,原图在构图方面的分数应该高于抠出来的图片. ...

  9. redis搭建主从

    主从概念 ⼀个master可以拥有多个slave,⼀个slave⼜可以拥有多个slave,如此下去,形成了强⼤的多级服务器集群架构 master用来写数据,slave用来读数据,经统计:网站的读写比率 ...

  10. MATLAB生成exe脱离matlab运行可执行程序

    https://blog.csdn.net/u013007900/article/details/53485204 侵权即删. ———————————————— 版权声明:本文为CSDN博主「小木匠_ ...