其他hook（React Router6）

最新推荐文章于 2023-11-04 12:30:14 发布
最新推荐文章于 2023-11-04 12:30:14 发布
阅读量306 收藏
点赞数
分类专栏： React17/18 文章标签： React Router6 其他hook
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/125169529
版权

文章目录

useInRouterContext()

如果组件在<BrowserRouter/>或<HashRouter/>的上下文中，则useInRouterContext()返回true，否则返回false。

useNavigationType()

useNavigationType()返回导航类型，描述了用户是如何导航至当前页面。其返回值有3种：

  1. PUSH
  2. REPLACE
  3. POP。用户在浏览器中直接打开某个路由组件，刷新页面时会返回POP。

useOutlet()

useOutlet()，用来呈现当前组件中渲染的嵌套路由。
如果嵌套路由没有挂载，则返回null；
如果嵌套路由已经挂载，则返回路由对象

useResolvedPath()

useResolvePath(url)，用于解析路径，解析url中的path、search、hash值。

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十一、【React-Router6】Hooks 汇总
天行健，君子以自强不息
12-03 899
useRoutes()、useNavigate()、useParams()、useSearchParams()、useLocation()、useMatch()、useInRouterContext()、useNavigationType()、useOutlet()、useResolvedPath()
React Router 路由详解
猫老板的豆
10-18 1552
React 本身并不直接包含路由功能，路由功能通常是通过第三方库（如 ）来实现的。 是 React 中最常用的路由库之一，它允许在 React 应用程序中创建单页应用程序（SPA）风格的导航。注意：用于在应用中创建链接，这些链接指向不同的路由（即 URL 路径）。当用户点击链接时，会触发页面跳转。相当于 标签相当于 Vue 中的 NavLink 类似于 Link，但允许指定一个“激活”状态时的样式，激活时会自动添加一个类名（默认为 ）到该链接上。也可以通过 属性自定义激活时应用的类名 Redirect
【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API
热门推荐
xuxuii的博客
08-17 1万+
博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航 回顾上篇文章👉🏻【React Router 6 快速上手一】，今天来学习react-router-dom6版本的另一些相关知识！ 感兴趣的小伙伴一起来看看吧~🤞.........
react随手记
qq_56462589的博客
12-27 217
react随手记
react路由v6版本传递Link选中属性active的第二种写法
huangfengnt的博客
03-01 933
react路由v6版本传递Link选中属性active的第二种写法
React-router6
11-23
React Router 是一个流行的开源库，专门用于管理 React 应用中的路由。React Router v6 是其最新的版本，针对 React 18 和以上版本进行了优化，提供了更简洁的API设计和更好的性能。在这个版本中，主要关注点是模块...
spyke-react-hook-router-link:从React Router的Link逻辑中提取的React钩子，可以更轻松地与第三方UI库集成
05-28
@ spyke / react-hook-router-link 从react-router的逻辑中摘录的内容，可以更轻松地与第三方UI库集成。 如果您使用的是UI库并希望呈现链接，则一开始您可能会提出以下建议： 这种方法的问题可能是，您将失去...
use-react-router：使用React Router的React Hook进行发布订阅行为
02-03
useReactRouter是一个React Hook，它为react-router提供pub-sub行为。 与withRouter高阶组件不同， useReactRouter会在位置更改时重新呈现您的组件！ useReactRouter()返回一个对象，该对象包含HOC将作为props传递...
react入门demo（react18 + react-router6）
09-14
这个"react入门demo"基于React 18和React Router 6，是学习和理解这两个核心技术的好起点。React 18带来了性能优化和一些新的API，而React Router 6则提供了在React应用中管理路由的方法。 React 18的更新主要包括...
实践React路由器：Treehouse的React Router Practice Application
02-10
在这个“实践React路由器：Treehouse的React Router Practice Application”项目中，我们将深入理解如何在实际应用中使用React Router，并结合CSS来创建美观且功能完善的界面。 React Router并不是React库的标准...
React router V6的基本使用
sinat_37089318的博客
05-27 1317
一：概述 React Router 由三个模块组成，分别是： react-router：路由的核心库，提供核心的组件和钩子。 react-router-dom：基于react-router，并添加专门用于DOM的组件，例如：<BrowserRouter / >等。 react-router-native：基于react-router，并添加专门用于ReactNative的API，例如：<NativeRouter / >等。 二：router Component 以下描述的是组件
超超详细ReactRouter v6版本的基本使用
qq_45679015的博客
03-27 4314
先附上官网的地址：react-router-v6 · GitHub Topics · GitHub 一.概述 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如<BrowserRouter>等。 react-router-native: ..
React路由ReactRouter6
qq_39307266的博客
02-24 4108
React路由ReactRouter6 V6路由新增了一些东西，也做了一些替换，路由配置上跟vue更加相似，值得一提的是，react官方提倡函数组件，所以这个例子将使用函数组件说明。 第一步安装路由 npm install react-router-dom 将会自动安装V6版本的路由。首先还是分清导航区和路由组件展示区，整理好布局 左边的为导航区，右边为路由组件展示区，所以在APP组件里依然是定义路由链接 import {NavLink,Link} from 'react-router-dom' Na
[尚硅谷React笔记]——第9章 ReactRouter6
最新发布
qq_56444564的博客
11-04 458
说明:用于包裹整个应用。示例代码:{/*整体结构（通常为App组件）*/}说明:作用与一样，但修改的是地址栏的hash值。备注:6.x版本中、的用法与5.x相同。3. 与v6版本中移出了先前的，引入了新的替代者:。
React Router 6（五）
weixin_43123984的博客
02-07 686
路由的核心库，提供了很多的组件、钩子；：包含react-router所有内容，并添加一些专门用于 DOM 的组件。例如等；：包括react-router所有内容，并添加一些专门用于ReactNative的API。等；2、与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增等。变为等。useParamsuseMatch等。官方明确推荐函数式组件了！！！
React路由6.0
一杯清泉
06-08 703
上次介绍了react路由5.0的一些用法，这次介绍最新的路由6.0用法，相比5.0变化还不少。 路由5.0：​​​​​​​https://blog.csdn.net/yoonerloop/article/details/124070341 ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('roo......
React Router 6
weixin_39927469的博客
07-12 989
React router 6 学习
React-Router6版本的更新引起的路由用法变化
sdasadasds的博客
01-18 2525
React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6.x，当前最新为6.0.2，相对比于之前的5.x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法 话不多说，先列出6.0做出的改变之处： 用法变化 替换为 嵌套路由新写法 推出全新hoo
react router 6 路由数据 重定向
04-29
在 React Router 6 中，重定向可以通过 `<Navigate>` 组件来实现。 假设你想要将 `/old-path` 重定向到 `/new-path`，你可以这样写： ```jsx import { Navigate } from "react-router-dom"; function App() { return ( <Routes> <Route path="/old-path" element={<Navigate to="/new-path" />} /> <Route path="/new-path" element={<NewComponent />} /> </Routes> ); } ``` 当用户访问 `/old-path` 时，页面会自动跳转到 `/new-path`。 你也可以将重定向动态生成。例如，你可以根据用户是否已登录来决定将其重定向到哪个页面： ```jsx import { Navigate, useNavigate } from "react-router-dom"; function App() { const isLoggedIn = true; const navigate = useNavigate(); function handleLogout() { // 登出后重定向到首页 navigate("/", { replace: true }); } return ( <Routes> <Route path="/dashboard" element={isLoggedIn ? <Dashboard /> : <Navigate to="/login" />} /> <Route path="/login" element={<LoginPage onLogin={() => navigate("/dashboard")} />} /> </Routes> ); } ``` 在上面的示例中，如果用户已登录，则会显示 `Dashboard` 组件，否则会将用户重定向到 `/login` 页面。在登录成功后，我们可以通过 `useNavigate` hook 将用户重定向回 `Dashboard` 页面或任何其他页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值