首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React路由器v6的NavLink上缺少isActive属性

React 路由器 v6 的 NavLink 组件确实没有 isActive 属性。在 React 路由器 v6 中,可以使用 useLocation 钩子和 matchPath 函数来实现类似的功能。

useLocation 钩子用于获取当前页面的 URL 信息,而 matchPath 函数用于判断当前 URL 是否与指定的路径匹配。结合这两个工具,可以手动实现 NavLink 的 isActive 功能。

以下是一个示例代码:

代码语言:txt
复制
import { useLocation } from 'react-router-dom';
import { matchPath } from 'react-router';

function NavLink({ to, activeClassName, children }) {
  const location = useLocation();
  const isActive = !!matchPath(location.pathname, to);

  return (
    <a href={to} className={isActive ? activeClassName : ''}>
      {children}
    </a>
  );
}

在上述代码中,我们自定义了一个 NavLink 组件,它接受 to、activeClassName 和 children 作为属性。通过 useLocation 钩子获取当前页面的 URL 信息,并使用 matchPath 函数判断当前 URL 是否与 to 属性匹配。如果匹配,则给链接添加 activeClassName 类名,否则不添加。

这样,我们就可以在 React 路由器 v6 中使用自定义的 NavLink 组件来实现类似于 React 路由器 v5 中 NavLink 的 isActive 功能了。

请注意,上述代码仅为示例,实际使用时可能需要根据具体情况进行适当的修改和调整。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

react 中router v6 与 v5 区别

react-router-dom 更新到v6 , 本文分享下v6 与 v5 的一些区别 1. v6 中 Switch 名称变为 Routes 代码如下: import { Routes } from...,不要忘记写成标签形式2Route 标签必须包含在Routes标签里,会不然报错 3. v6 中,exact 属性不再需要 v6 内部算法改变,不再需要加exact实现精确匹配路由,默认就是匹配完整路径..." element={} /> 4. v6 中,Route 先后顺序不再重要,React Router 能够自动找出最优匹配路径 5.v6 保留Link,NavLink..., 但是NavLink的activeClassName属性被移除 删除了 activeClassName 样式,如果想自己给它设置想要的highligh样式....可以通过style属性修改actived的状态, 通过箭头函数接收到isActive参数值; style接收一个css样式数据返回值进行修改NavLink> active状态样式。

2.8K20
  • React路由 及 React 路由中核心组件

    属性 component 属性 Route:render 路由组件传参 动态路由 Link 组件 to 属性 NavLink 组件 activeStyle activeClassName isActive...这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由,其本质上与后端路由的思想是一样的。...前端路由 前端路由只是改变了 URL 或 URL 中的某一部分,但一定不会直接发送请求,可以认为仅仅只是改变了浏览器地址栏上的 URL 而已,JavaScript 通过各种手段处理这种 URL 的变化...同时根据 Route 中的设置把对应的组件显示在指定的位置 to 属性 to 属性类似 a 标签中的 href NavLink 组件 NavLink 与 Link 类似,但是它提供了两个特殊属性用来处理页面导航...className isActive 默认情况下,匹配的是 URL 与 to 的设置,通过 isActive 可以自定义激活逻辑,isActive 是一个函数,返回布尔值 Switch 组件

    1.4K20

    React NavLink的使用

    NavLink的概述NavLink是react-router-dom库中的一个特殊导航链接组件,它可以帮助我们在React应用程序中创建导航链接,并根据当前活动的URL自动添加活动链接的样式。...NavLink的使用方法首先,确保您已经安装了react-router-dom库:npm install react-router-dom接下来,让我们看一个使用NavLink的示例:import React...NavLink的常用属性NavLink组件支持以下常用属性:to: 指定链接的目标URL。exact: 是否进行精确匹配。strict: 是否进行严格匹配。...isActive: 自定义激活链接的条件函数。activeClassName: 活动链接的样式名称。activeStyle: 活动链接的内联样式。location: 自定义链接的位置对象。...这些属性使得我们可以根据需要来配置NavLink的行为和样式。

    1.4K10

    React Router V6详解

    hash是location 对象的属性,它指的是当前链接的锚,也就是从【#】号开始的部分。 不过,虽然SPA有它的优点,也得到了主流框架的支持,但它也存在一定的局限性。...事实上,react-router并不是一个库,塔包含3个库:react-router、react-router-dom和react-router-native,分别用来适配浏览器环境和手机原生环境。...Link不再支持component属性; NavLink 的exact属性替换为end; 添加Outlet组件,用于渲染子路由; 使用之前,可以先使用下面的命令进行安装。...、location、match就会被放进这个组件的props属性中,可以实现对应的功能。...之所以取消正则路由,是因为如下几点原因: 正则路由为V6版本的路由排序带来很多问题,比如,如果定义一个正则的优先级; 正则路由占据了React Router近1/3的体积; 正则路由能表达的,V6版本都支持

    7.9K50

    离开页面前,如何防止表单数据丢失?

    我们将讨论如何使用纯 JavaScript 处理此类情况,使用 React Router v5 中的 Prompt 组件以及在 React Router v6 中使用 useBeforeUnload 和...应用程序的最终版本可以在 CodeSandbox 上进行测试,代码可在 GitHub 上获得。...when 属性是一个布尔值,用于确定是否应该显示提示,而 message 属性表示向用户显示的文本。...我们可以使用这个钩子来复制版本5中 Prompt 组件的行为,但首先,我们需要调整我们的 App 组件以使用新的数据路由器,因为它们是 unstable_usePrompt 钩子工作所必需的。...我们探讨了如何使用纯JavaScript处理这种情况,使用 beforeunload 事件以及在React中使用React Router v5中的 Prompt 组件和React Router v6中的

    5.9K20

    React 入门学习(十)-- React 路由

    SPA 而为了减少这样的情况,我们还有另一种应用,叫做 SPA ,单页应用程序 它比传统的 Web 应用程序更快,因为它们在 Web 浏览器本身而不是在服务器上执行逻辑。...,分好导航区、展示区 要引入 react-router-dom 库,暴露一些属性 Link、BrowserRouter... import { Link, BrowserRouter, Route }...,如果我们在 Link 和 Route 中分别用路由器管理,那这样是实现不了的,只有在一个路由器的管理下才能进行页面的跳转工作。...NavLink 标签时,就会自动的在类上添加一个 active 属性 NavLink className="list-group-item" to="/about">AboutNavLink>...我们可以看到左侧的元素类名在不断的切换,当然 NavLink 标签是默认的添加上 active 类,我们也可以改变它,在标签上添加一个属性 activeClassName 例如 activeClassName

    1.7K10

    React-Router-基本使用

    , 可以通过手动路由跳转来实现(后续文章嵌套路由在介绍)NavLink除了 Link 可以修改资源地址外,还可以通过 NavLink 修改,也是可以的。...NavLink 注意点:NavLink 在匹配路由的时候, 是利用当前资源地址从左至右的和 path 中的地址进行匹配的只要当前资源地址从左至右完整的包含了 path 中的地址那么就认为匹配默认情况下...NavLink 在匹配资源地址时, 是模糊匹配如果必须和资源地址一模一样才匹配, 那么需要添加 exact 属性, 开启精准匹配当前资源地址: /home/aboutto 中的地址: /hometo 中的地址...: /home/about关于 NavLink 更多的 Api 可去官方文档进行查看:图片如上图中的我所标记出来的一个属性是设置选中激活状态下的样式,如果是模糊匹配出现的效果就是其它的 Link 状态链接的样式也会进行更改...但是在 v5 与 v6 好像 React 已经做出了改动特性与语法会有所不同,本篇文章到此为止就差不多就如上这些内容了,其它的内容我会再起一篇文章继续介绍。

    25820

    react-router-dom使用指南(最新V6)

    "; to foo; 2.2 NavLink 组件 NavLink组件和Link组件的功能是一致的,区别在于可以判断其to属性是否是当前匹配到的路由 NavLink...组件的style或className可以接收一个函数,函数接收一个含有isActive字段的对象为参数,可根据该参数调整样式 import { NavLink } from “react-router-dom...”; function Foo() { return ( NavLink style={({ isActive }) => ({ color: isActive ?...为/foo/bar时:Foo 中的 Outlet 会显示为 Bar 组件 七、全匹配路由 定义: path属性取值为时,可以匹配任何(非空)路径,该匹配拥有最低的优先级。...如在点击a标签的回调函数中使用 event.preventDefault() 阻止默认事件,此时URL的改变不会带来任何UI上的更新。

    4.5K21

    React 入门学习(十)-- React 路由

    SPA 而为了减少这样的情况,我们还有另一种应用,叫做 SPA ,单页应用程序 它比传统的 Web 应用程序更快,因为它们在 Web 浏览器本身而不是在服务器上执行逻辑。...,分好导航区、展示区 要引入 react-router-dom 库,暴露一些属性 Link、BrowserRouter... import { Link, BrowserRouter, Route }...,如果我们在 Link 和 Route 中分别用路由器管理,那这样是实现不了的,只有在一个路由器的管理下才能进行页面的跳转工作。...NavLink 标签时,就会自动的在类上添加一个 active 属性 NavLink className="list-group-item" to="/about">AboutNavLink>...我们可以看到左侧的元素类名在不断的切换,当然 NavLink 标签是默认的添加上 active 类,我们也可以改变它,在标签上添加一个属性 activeClassName 例如 activeClassName

    1.9K10

    使用 TypeScript 编写 React.js 应用 | 笔记

    单击表单上的保存按钮 验证卡片是否显示更新的数据 刷新浏览器 验证项目是否仍处于更新状态 注意: 更新后卡片会被排到最后, 目前没有在代码中排序 错误推断, 发现并不对, db.json 保存更新并不会重新排序...路由器 Router 创建另一个页面(容器组件) 创建 HomePage 组件。...添加两个 NavLink> 组件(由 React 路由器提供)并将它们设置为访问配置的路由。...可以将任何 标记改为 NavLink> ,并添加 to 属性以设置 href 。...build 目录的内容 serve build 假设你想要提供单页应用程序或仅提供静态文件(无论是在你的设备上还是在本地网络上), 包 serve 是提供静态内容的 Web 服务器。

    87990
    领券