反应路由器 NavLink 活动

Posted 2023-02-21

【中文标题】反应路由器 NavLink 活动

【英文标题】：React Router NavLink Active

【发布时间】：2020-03-02 17:31:32

【问题描述】：

我是 react 和 react-router 的新手。我有一个带有路线链接的侧边栏 存储信息详细信息。

// 侧边栏链接

<NavLink to=“/store/information/details”>Information</NavLink>

在商店信息详细信息容器内有一个按钮链接路径来编辑商店信息，如下所示

// 链接到编辑信息

<NavLink to=“/store/information/edit”>Edit Information</NavLink>

问题是我希望侧边栏链接信息在导航时保持活动状态 编辑商店信息容器。当我在编辑存储信息容器中时，活动类被删除。

【问题讨论】：

这能回答你的问题吗？ Active link with React-Router?

没有。这是不同的用例。

您想导航到第二个链接并首先保持活动状态？对吗？

是的，我希望第一个保持活跃

我在 isActive 属性中阅读了这个文档，但不知道如何使用 reacttraining.com/react-router/web/api/NavLink/isactive-func

【参考方案1】：

你可以这样写你的 Navlink 的 isActive：

 isActive=(match, location) => 
 return location.pathname.includes("/store/information/");
    

所以你的整个 Navlink 会是这样的：

      <NavLink
    to="/store/information/details"
    activeClassName="active"
    isActive=(match, location) => 
      return location.pathname.includes("/store/information/");
    
  >
    information page
  </NavLink>

您可以在我为您提供的代码沙箱中找到一个完整的示例：

https://codesandbox.io/s/mystifying-haze-13477

更多资源：https://reacttraining.com/react-router/web/api/NavLink/isactive-func

如果您仍然有任何问题，请告诉我