React-Router6-useInRouterContext、useNavigationType、useOutlet、useResolvedPath

已于 2022-10-06 14:56:39 修改
阅读量1.6k 收藏 2
点赞数
分类专栏： React 文章标签： react
于 2022-10-06 14:34:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40429067/article/details/127182836
版权

1. useInRouterContext

useInRouterContext()
  • 作用：如果组件在Router的上下文中呈现，则useInRouterContext返回true，否则返回false
  • 返回值为布尔值，判断当前组件是否存在路由上下文内，也就是是个被BrowserRouter或者HashRouter所包裹，如果被包裹则返回true

2. useNavigationType

  • 作用： 返回当前的导航类型（用户是如何来到当前页面的）
  • 返回值：POP、PUSH、REPLACE
  • 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）

3. useOutlet

  • 作用： 用来呈现当前组件中要渲染的嵌套路由
    在这里插入图片描述
  • useOutlet可以拿到<OutLet/>占位容器内所存放的组件对象

4. useResolvedPath

  • 作用： 给定一个URL值，解析其中的path、search、hash值
  • 可以输入任意路径地址，不是当前系统的也可以
    在这里插入图片描述
35s
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React报错之useNavigate() may be used only in context of Router
「 虚幻私塾」
08-09 2218
比如说，当用户登录后，你不想让用户能够点击回退按钮，再次回到登录页面。换句话说，由这种方式导航到新的路由，不会在浏览器历史堆栈中推入新的条目。一旦你的整个应用都被Router组件所包裹，你可以随时随地的在组件中使用react router所提供的钩子。钩子使用了Router组件提供的上下文，所以它必须嵌套在Router里面。用Router组件包裹你的React应用程序的最佳位置是在你的。时，浏览器历史堆栈中的当前条目会被新的条目所替换。文件中，因为那是你的React应用程序的入口点。函数的参数与组件上的。.
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
【react框架】更新更麻了，React Router 6的使用学习记录
庞囧的博客
05-14 1520
文章目录前言安装选择路由模式historyhashLInk/routes/routeNavigateNavlinkuseRoutes使用路由表嵌套路由 前言 代码来源B站尚硅谷教学视频，可结合之前的路由文章【react框架】学习记录9-学习路由react-router-dom的使用 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router：路由的核心库，提供了很多的：组件、钩子。 react-router-dom：包含react-router所有内容，
RouteContext
weixin_33937778的博客
03-31 1024
　　我们知道，Startup.cs 中的 Configure(IApplicationBuilder app) 中，我们使用 app.UseMvc()在 UseMVC() 代码执行的过程中，它可以接收一个 Action 形式的委托，我们使用这个委托可以进行自定义路由的配置，默认情况下，我们一般会如下进行配置： 　　app.UseMvc(r...
React 使用 Outlet默认渲染页面
LOVE_mingjing的博客
05-29 2268
关于React 路由配置，以及Outlet接收参数，调用父方法(下次补充)，个人粗浅的看法。
React-Router6-路由组件参数传递
qk
10-03 2236
参数传递
【16】基础知识：React路由 - React Router 6
weixin_45559449的博客
10-19 561
了解React Router 以三个不同的包发布到 npm 上，它们分别为1、react-router：路由的核心库，提供了很多的组件、钩子。2、react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如等。3、react-router-native：包括 react-router 所有内容，并添加一些专门用于 ReactNative 的API，例如等。与 React Router 5.x 版本相比，改变了什么？1、内置组件的变化：移除。
koa-react-router：用于koa 2的react-router中间件
02-03
npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所...
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
react-router-CN：React Router V4中文文档
02-19
React Router核心组件 用于DOM绑定的React Router 用于的React路由器 React Router和Redux的集成 静态路由配置帮助助手 加群交流 React技术交流1群（已满）： React技术交流2群： 鸣谢 感谢支持React Router的...
React-router6
11-23
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); function handleClick() { navigate('/about'); } ``` 6. **Params and Query Strings**：传递参数可以通过路径占位符...
【React】react-router v6 基础 （含代码）
qq_43682422的博客
04-14 581
几分种学会react-router v6
React-router的outlet组件
m0_46339022的博客
07-19 2523
因此，在你的代码中，当路径为’/markdown’时，React Router会查找匹配的Route组件，并从它的RouteContext对象中获取对应的Outlet组件，然后将它渲染到页面上，从而实现了路由切换。这种通过React Context实现组件查找的方式可以让React Router更加灵活和高效，因为它避免了通过props层层传递组件的麻烦，同时也提高了性能，因为组件查找过程不需要通过组件树进行逐层查找，而是直接从Context中获取所需组件，从而避免了大量的props传递和组件重复渲染。
React学习笔记
qq_56624658的博客
04-08 1792
1.hello_react 2.jsx的语法规则 3.React中定义组件 函数式组件
react-router-dom v6 通过outlet实现keepAlive 功能
m0_67403240的博客
03-11 2724
keepAlive代码： import React, { useRef, useEffect, useReducer, useMemo, memo } from 'react' import { TransitionGroup, CSSTransition } from 'react-transition-group' import { useLocation } from 'react-router-dom' const KeepAlive = props => { const { in.
react-router6|路由
weixin_57660777的博客
08-05 277
在 React Router 中，最外层的 API 通常就是用 BrowserRouter。BrowserRouter 使用时，通常用来包住其它需要路由的组件，所以通常会需要在你的应用的最外层用它，比如如下。这个库和 React Context 来实现的，所以当你的用户前进后退时，switch的作用是，第一次匹配路由后，之后就不在匹配路由。如果嵌套路由已经挂载，则显示挂载的嵌套路由。这个库会记住用户的历史记录，这样需要跳转时可以直接操作。第二个解构赋值的参数是设置query的变化，不经常使用。
react随手记
qq_56462589的博客
12-27 174
react随手记
第40节——路由初识，定义路由组件
weixin_57017198的博客
09-29 169
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
react路由v6版本传递Link选中属性active的第二种写法
huangfengnt的博客
03-01 933
react路由v6版本传递Link选中属性active的第二种写法
react-router-dom5和react-router-dom6的区别
最新发布
03-30
而React Router DOM 6使用yarn进行安装，命令为`yarn add react-router-dom@next`。 2. 路由组件：在React Router DOM 5中，使用`<Route>`组件来定义路由。而在React Router DOM 6中，使用`<Route>`组件的替代方案`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值