首页 > 其他 > 详细

react-router v4 理解

时间:2019-05-11 12:48:33      阅读:143      评论:0      收藏:0      [点我收藏+]

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

react-router v4 理解

原文:https://www.cnblogs.com/ruoshuisanqian/p/10848153.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!