React-Router相关基础概念

最新推荐文章于 2025-03-01 00:01:29 发布

原创最新推荐文章于 2025-03-01 00:01:29 发布 · 122 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了React Router中的关键概念，如Redirect、BrowserRouter和HashRouter的区别，Route和Link的用法，withRouter和NavLink的特性，以及在React中通过Link和react-router-redux进行页面跳转的方法。重点展示了三种页面跳转方式和NavLink的自定义行为。

（1）Redirect：重定向 eg.<Route exact path="/" render={() =>}/>

（2）BrowserRouter和HashRouter 的区别：

HashRouter 会有一个#，通过这个# HTML 5 History进行前端跳转他的感觉像锚点
BrowserHistory 很简洁没有#，但是需要 server 端支持
（3）Route:eg.

（4）Link：eg.

{item.nane}

（5）withRouter：把不是通过路由切换过来的组件,将react-router的history、location和match三个对象传入到props对象上；

（6）NavLink:是的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有:

activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能
（7）react中页面跳转的两种方式

使用 react-router-dom 中的 Link 实现页面跳转
使用 react-router-redux 中的 push 进行页面跳转【react-router-redux 中包含以下几个函数，一般会结合redux使用：】
push - 跳转到指定路径
replace - 替换历史记录中的当前位置
go - 在历史记录中向后或向前移动相对数量的位置
goForward - 向前移动一个位置。相当于go(1)
goBack - 向后移动一个位置。相当于go(-1)
具体使用时通过发送disppatch来进行页面跳转：

（8）React-router 页面跳转的三种方式：https://blog.csdn.net/Vue2018/article/details/100564775