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. P4363 [九省联考2018]一双木棋

    题面 这种搜索要把后继状态都跑出来之后取Min/Max 也就是回溯的时候进行操作 记得用hash进行记忆化(用map不开O2会TLE) #include<iostream> #includ ...

  2. 16-vim-查找字符或单词-01-查找

    1.常规查找 查找到指定内容之后,使用n查找下一个出现的位置. 命令 功能 /str 查找str 例:/python n 查找下一个 N 查找上一个 2.单词快速匹配(常用) 命令 功能 * 向下查找 ...

  3. 微信小程序app.json文件常用全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...

  4. 2018-8-10-win10-uwp-json

    title author date CreateTime categories win10 uwp json lindexi 2018-08-10 19:16:53 +0800 2018-2-13 1 ...

  5. 小米手机 - Charles无法安装证书 因为无法读取证书

    1.不要使用小米原装的浏览器安装证书 2.使用第三方浏览器安装,如我使用的是UC浏览器 3.使用第三方浏览器安装的证书格式是".pem"格式问卷 4.将这个文件放入小米的downl ...

  6. mysql查找字段空、不为空的方法总结

    1.不为空 Select * From table_name Where id<>'' Select * From table_name Where id!='' 2.为空 Select ...

  7. linux安装zabbix的tar包和另外一个并存

    在安装zabbix客户端的时候,发现存在一个zabbix客户端,现在我们要重新建一个来与之并存 第一步安装: cd /data0/software/ tar xf zabbix-3.0.28.tar. ...

  8. C#中的类型相等与恒等(Equality & Identity)

    l  Equality:如果两个对象是相同的类型,并且它们各自带有相同和等值的属性.(They are instances of the same type and if each of the fi ...

  9. 【在线工具】java开发常用在线工具

    转自:常用工具页面 Java源代码搜索 Grepcode是一个面向于Java开发人员的网站,在这里你可以通过Java的projects.classes等各种关键字在线查看它对应的源码,知道对应的pro ...

  10. jsp中提供的四种属性范围

    参考:http://www.cnblogs.com/xdp-gacl/p/3781056.html 1.当前页:一个属性只能在一个页面中取得,跳转到其他页面无法取得 2.一次服务器请求:一个页面中设置 ...