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. TreeSet源码解析笔记

    定义: TreeSet是一个有序的集合,它的作用是提供有序的Set集合.它继承了AbstractSet抽象类,实现了NavigableSet<E>,Cloneable,Serializab ...

  2. Ubuntu apt-get 更新/查看软件

    ubuntu 升级软件: sudo apt-get update 更新源 sudo apt-get upgrade 更新已安装的包 sudo apt-get dist-upgrade 升级系统 ubu ...

  3. ERROR 1290 (HY000): Unknown error 1290

    如有需要可以加我Q群[308742428]大家一起讨论技术,提供有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 记录一次在连接数据库报的一个错误信息: 原因是MySQL正使 ...

  4. JS对象 window对象 屏幕可用高和宽度 1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。 2. screen.availHeight 属

    屏幕可用高和宽度 1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏. 2. screen.availHeight 属性返回访问者屏幕的高度,以像素 ...

  5. https原理 就是两次http

    客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤: (1)客户使用https的URL访问Web服务器,要求与Web服务器建立SSL连接. (2)Web服务器收到客户端请求后,会将网站的证书 ...

  6. DLL 本地定义符号*****在函数****中导入

    把_DLL_ELOGEVENT  定义到你的工程预编译宏中 IPCLASSDLL_DLL https://bbs.csdn.net/topics/300140279

  7. python制作坦克对战

    创建子弹类 import pygame class Bullet(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__i ...

  8. java 获取String出现最多次数的字段

    package hello; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator ...

  9. putty字体和颜色修改

    来源:https://www.igvita.com/2008/04/14/custom-putty-color-themes/ 网站上有putty的注册表,可以修改putty显示的配色方案. 非常棒!

  10. Java中遍历数组的三种方式复习

    1 for循环遍历 通常遍历数组都是使用for循环来实现.遍历一维数组很简单,遍历二维数组需要使用双层for循环,通过数组的length属性可获得数组的长度. 程序示例: package captai ...