反应路由器 NavLink 活动

Question

我是 React 和 React-router 的新手。我的侧边栏有一条路线 link 存储信息细节。

// 边栏 Link

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

内部商店信息详细信息容器有一个按钮 link 用于编辑商店信息的路径，如下所示

// Link 编辑信息

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

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

Answer 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

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

反应路由器 NavLink 活动

React Router NavLink Active

reactjs

react-router

react-router-v4