Question

我是新来的反应和反应路由器。我有一个带有路线链接的侧边栏存储信息详细信息。

//侧边栏链接

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

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

//链接到编辑信息

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

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

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活动

1 个答案: