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. SpringCloud-技术专区-Hystrix-使用指南

    Maven依赖配置 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...

  2. 线程分离pthread_detach()中的return()和pthread_exit()

    #include <stdio.h> #include <pthread.h> pthread_t tid[]; void *func_2(void *arg); void * ...

  3. android 自定义标题

    public class MainActivity extends Activity { /** Called when the activity is first created. */ @Over ...

  4. System.Web.Mvc 4.0.0.1 和 4.0.0.0 区别

    只是一个安全补丁的问题:  http://www.microsoft.com/zh-cn/download/details.aspx?id=44533&WT.mc_id=rss_alldown ...

  5. JS window对象 返回下一个浏览的页面 forward()方法，加载 history 列表中的下一个 URL。

    返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...

  6. HDU-4568 TSP+最短路

    题意:给一个n行m列的矩阵,矩阵上的数字代表经过代价(这里要注意每经过一次都要付出代价),矩阵上有几个宝藏,猎人可以从任意边界进去矩阵取完所有宝藏后从任意边界出来. 解法:一看到宝藏数量小于等于13且 ...

  7. Dubbox服务的提供方配置

    在src/main/resources下创建applicationContext-service.xml ,内容如下: <?xml version="1.0" encodin ...

  8. Tmux 简单配置使用

    Tmux Prefix (prefix) Tmux 使用 Prefix 以将自身的快捷键与其它应用区分,运行 Tmux 快捷键时首先按下这个 Prefix (默认是 Ctrl-b 组合键),松手后紧接 ...

  9. 自定义solr域中的配置

    <!-- IKAnalyzer--> <fieldType name="text_ik" class="solr.TextField"> ...

  10. 富文本 保存转义StringEscapeUtils.unescapeHtml4(

    StringEscapeUtils.unescapeHtml4( [org.apache.commons.lang.StringEscapeUtils.escapeHtml(str)] [String ...