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.矩阵.240搜索二维矩阵II-Java

    1. 具体题目 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性:每行的元素从左到右升序排列:每列的元素从上到下升序排列. 示例: 现有矩阵 ...

  2. 迭代器,生成器,yield,yield from理解

    迭代器 说到迭代器就得想说可迭代对象Iterable,实现了__iter__()方法的对象都是可迭代对象,例如很多容器,list ,set, tuples.使用iter方法可以把一个可迭代对象变成迭代 ...

  3. USACO 2014 US Open Fair Photography /// 技巧

    题目大意: 给定n头奶牛 给定n头奶头所在位置和品种 品种只有G H两种 求一段区间的长度 要求区间内包含的品种满足各品种的数量相同 将一个品种的值设为1 另一个设为-1 假设 i<j 而 1~ ...

  4. el-form-item内容过多，及弹窗框宽度属性show-overflow-tooltip设置

    内容过多: :show-overflow-tooltip=true 宽度属性设置: .el-tooltip__popper{ max-width:30% }

  5. NFS挂载error：reason given by server: Permission denied

    首先你得看看你的NFS服务有没有启动 然后你看看你要mount的文件夹有没有在NFS主机共享 然后再看权限对没对

  6. python之将Unicode文本标准化

    在需要比较字符串的程序中使用字符的多种表示会产生问题. 为了修正这个问题,你可以使用unicodedata模块先将文本标准化: s1 = 'Spicy Jalape\u00f1o' s2 = 'Spi ...

  7. go中的string操作

    strings 判断字符串s是否以prefix开头 strings.HasPrefix(s string,preffix string) bool: 判断字符串s是否以suffix结尾 stirngs ...

  8. Input标签文件上传，使用详解

    1.html添加标签按钮 <button ion-button (click)="selectVideo()">添加</button> <input ...

  9. 解决虚拟机克隆的linux系统ip无法正常使用问题

    当我们克隆centos虚拟机无法正常获取IP地址,重启网卡也提示Bringing up interface eth0:  Device eth0 does not seem to be present ...

  10. applicationContext-redis.xml配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...