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