react-router v6的Link组件relative属性解释

已于 2024-03-28 09:09:08 修改
阅读量254 收藏
点赞数 1
文章标签： react.js javascript 前端
于 2024-03-26 14:16:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aexwx/article/details/137044588
版权
本文介绍了ReactRouter6中Link组件的relative属性在route和path模式下的行为差异：path返回相对路径的上一级，而route则返回路由层次结构的父级。同时提到了preventScrollRest的补充内容。
摘要由CSDN通过智能技术生成

Link组件有一个名为relative的属性,值为route或path,默认为route

当Link的to为两个点时,配置relative=route|path会有不同的效果, 之前由于路径嵌套不够深,看不出区别,于是尝试加深路径,一眼就看出了区别

官方解释

| React Router6 中文文档

下方代码请看根路径/cd及其二级路由

如果当前路径是http://localhost:5173/cd/ak/wa/aa/kk 那么会在Lbl组件内

点击<Link to='..' relative="route">BRoute点点点,默认为route</Link>
返回到http://localhost:5173/cd

点击 <Link to='..' relative="path">Path点点点</Link>会返回到
http://localhost:5173/cd/ak/wa/aa

所以在处理两个点的路径时,path是回到相对路径的上一级,通俗的讲就是网址上的斜杠少一层

而route意味着回到程序员配置该路由时的父级,也就是路由的层次结构

最后补充一个

Link组件的preventScrollRest

大猫会长
关注
React Router组件
Tech in Pieces
07-23 589
三种类型组件 路由组件 路由匹配组件 导航组件。 在使用这些组件前，需要import import { BrowserRouter, Route, Link } from "react-router-dom"; 当然 在import前 请手动安装第三方库react-route-dom v5 npm install react-router-dom@5 下面分别来看： 路由组件 对于Web项目来说，react-router-dom提供了< BrowserRouter >和< Hash
react-router中Link/的属性详解
11-29
本文主要给大家介绍了关于react-router中 的属性的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 使用Link标签 // 字符串定位描述符 String location descriptor. <Link to="/hello"> Hello </Link> // 对象定位描述符 Object location descriptor. <Link to={{ pathname: '/hello', query: { name: 'ryan' } }}> Hello </Link> // 函数返回定位描述符Function returning location d
15行代码实现 React-router-dom 中的 Link 组件
qq_43477721的博客
07-19 280
import React from 'react' import { useHistory } from "react-router-dom" interface LinkProps { to: string; } export const AsLink: React.FC<LinkProps> = ({ children, to }) => { const history = useHistory() return ( <a href={to} onClic
React RouterV6 设置＜Link＞的激活状态（React does not recognize the `activeStyle` prop的解决方法）
weixin_45830447的博客
04-18 1929
需求 如图，需要在当前页面时，当前页面的导航颜色变为黄色 问题 在V6版本以下，Link标签会有activeStyle属性或者activeClassName属性，这两个属性都可以设置router激活状态时Link的样式，即当前页面为Link所指页面时Link的样式。 但是，在V6中，使用这两个属性会出现报错如图，会提示找不到该方法。 提示说可以把其中的大写改成小写，但是这个方法是错误的，并不能达到我们想要的效果。 解决 在V6中，已经删除了activeStyle属性以及activeClassName属性
React-Hook 轮子公开课（从零开始）用最基础的方式写出一个简单的组件库——第四课【Link】文字链接组件
韩旭的博客
07-12 471
有兴趣的同学 可以先着手看源码，之前写的一系列开源组件库项目（有帮助的同学也帮忙点个star👍）其实谈到文本链接组件，我们可以参考向element、antd这些其实可以把这些看成是一个个的文字按钮组件，只不过底层就是使用a标签去实现的，又或者，我不想让其拥有a标签的href属性的话，底层完全就可以使用span标签来包裹文本，总的来说其实就相当于对文本进行了一个封装，我们可以通过属性进行判断到底是一个链接组件，还是一个单纯类似按钮功能的文本样式组件，简单的来讲我们只需要对其进行一个颜色封装即可，当然主要的也.
React:使用＜Link＞组件进行页面跳转，url变化但是页面无变化
zhangzhuo1130的博客
11-21 1493
React:使用组件进行页面跳转，url变化但是页面无变化
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-...
基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架
11-04
Hooks Admin 是一个全面的后台管理框架，它充分利用了React18、React-Router V6、Redux、React Hooks、TypeScript以及Vite2等现代前端技术，同时采用了流行的Ant Design UI库，为开发者提供了高效且易用的开发环境。...
spyke-react-hook-router-link:从React Router的Link逻辑中提取的React钩子，可以更轻松地与第三方UI库集成
05-28
@ spyke / react-hook-router-link 从react-router的逻辑中摘录的内容，可以更轻松地与第三方UI库集成。 如果您使用的是UI库并希望呈现链接，则一开始您可能会提出以下建议： 这种方法的问题可能是，您将失去...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
在升级到`react-router-dom` v4后，开发者可能会遇到在子组件中通过`this.props.history`无法获取到`history`对象的情况。这是因为v4版本引入了一些变化，特别是对于如何在组件中使用`history`进行了调整。传统上，`...
React-router-V6.0路由的使用
qq_46065861的博客
11-10 5050
我的有道云参考文档 一、路由的介绍 React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步 通过react-router主要创建单页面的大型应用（SPA） 二、安装路由 先通过npx create-react-app搭建一个项目 1、在react的项目中安装路由react-router或者react-router-dom npm install react-router-dom --save package.json里
React-路由（一）
最新发布
唯见青山不见君
04-18 886
React-路由（一）
React router（v6）
m0_54476873的博客
11-20 2558
react router v6 详解，改变，用法，动态路由，默认路由，路由传参，react router hooks，嵌套路由，demo
React学习笔记_React Router 6
qq_20470063的博客
03-10 703
React学习笔记
React Router中link标签和a标签的区别
cx18333的博客
06-09 879
在 React Router 中，`` 组件是用来处理路由导航的，它会生成一个可以点击的链接，并根据配置的路由规则更新应用程序的 URL。而 `` 标签是 HTML 中的原生链接元素，通过 href 属性指定链接的目标 URL，点击时会直接跳转到该 URL。
React 路由（Router、Link、Route）
jojo1001的博客
11-15 1202
React Router 1.Router Router我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。 import { BrowserRouter as Router } from "react-router-dom"; class Main extends Component{ render(){ return( <Router> <div>
【React】SPA - 路由机制 - react-router-dom - 基本路由 - 嵌套路由 - 传递参数 - 路由跳转
YK菌的博客
06-15 1411
前端路由
react-router4 - 实现Link组件进行点击跳转
冲锋
06-03 2359
原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to='/mine'>Mine</Link> <div> <Route component={Home} path='/' exact></Route> <Route comp
React-router V4中Link组件的坑
a15088712506的博客
01-23 6631
初学react，跟着教程码下来，到了页面跳转的时候遇到个坑 最开始报错Link组件没找到，如图 然后跟着教程里的方法 Import { Link } from ‘react-router’  引入了Link组件，又报错了，说react-router依赖里面没有一个叫Link的组件，如图 百度了半天，发现写的没毛病，去node_modules里面找react-route
react-router-dom v6 有onBeforeChange属性吗
07-13
在 react-router-dom v6 中，没有直接的 `onBeforeChange` 属性来定义路由拦截器。 在 react-router-dom v6 中，可以使用 `useNavigate` hook 和 `useLocation` hook 来实现路由拦截。下面是一个示例： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值