React 路由管理 - React-Router-Dom

最新推荐文章于 2024-12-08 10:15:52 发布

原创最新推荐文章于 2024-12-08 10:15:52 发布 · 337 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文介绍了React Router 5.3.0中BrowserRouter、HashRouter的使用以及Link和NavLink组件的功能，重点讲解了它们如何管理路由和导航。Link组件提供灵活的链接行为，而NavLink简化了路径匹配和导航逻辑。

react-router-dom 5.3.0
react-router-dom 在导出 react-router 方法的基础上添加了
BrowserRouter
HashRouter
Link
NavLink
在这里插入图片描述

BrowserRouter 将 history 作为 Router组件的属性

2.HashRouter 将 hash history 作为 Router 组件的属性
Link
接受五个参数：
innerRef: 元素 a 的 ref，或者 <Link ref={ ref }> 传递 ref
onClick: 点击事件
replace: 为 true 是调用 history.replace, false 调用 history.push
target: 默认为_self（当前页面加载）， _blank（新窗口打开），_parent，_top
to: 跳转路径等参数，string，obj, func

Link 接收一个组件，通过 props 和组件创建一个 react元素

Link 组件主要的逻辑在 LinkAnchor组件，实现了如下功能：
1.点击的时候调用 onClick 事件
2.用户按住 meta, ctrl, shift, alt , 或者 target 不为 _self, 或者用户按住鼠标滚轮，使用 a 标签的默认行为
用户调用 event.defaultPrevented时，后续无跳转逻辑
无 2,3情况时阻止 a 标签的默认行为，并调用跳转函数

NavLink
接受如下参数：

依赖 Link 组件，并对传入的参数做整合（根据（传入location || context.location === pathname））