react-router v4 理解

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

(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对象,就可以了

猜你喜欢

转载自www.cnblogs.com/ruoshuisanqian/p/10848153.html