反应路由器 NavLink 活动答案

【问题标题】：React Router NavLink Active反应路由器 NavLink 活动
【发布时间】：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

标签： reactjs react-router react-router-v4

【解决方案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

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

【讨论】：