Question

我有一个链接列表

<NavLink className="item" activeClassName="item-active" to="/url?filter=1">filter 1</NavLink>
<NavLink className="item" activeClassName="item-active" to="/url?filter=2">filter 2</NavLink>
<NavLink className="item" activeClassName="item-active" to="/url?filter=3">filter 3</NavLink>

我的问题是所有链接都具有项目有效的类名。有没有办法使其更具体？谢谢

Answer 1

使用isActive属性指定何时启用网址。

const isUrlActive = (match, location) =>
  location.pathname + location.search === `/url${search}`;

  <NavLink
    className="item"
    activeClassName="item-active"
    to="/url?filter=1"
    isActive={isUrlActive}
  >filter 1</NavLink>
  <NavLink
    className="item"
    activeClassName="item-active"
    to="/url?filter=2"
    isActive={isUrlActive}
  >filter 2</NavLink>
  <NavLink
    className="item"
    activeClassName="item-active"
    to="/url?filter=3"
    isActive={isUrlActive}
  >filter 3</NavLink>

参考：https://github.com/ReactTraining/react-router/issues/5379

Answer 2

NavLink documentation中有两个可能有用的道具：

exact：它看起来像是一个不错的候选者，但在Router中进一步阅读（因为它应该以相同的方式工作）表明它是对还是错，匹配仅适用于网址的pathname部分。
isActive：它使您可以编写额外的匹配行为。在这里，您可以检查位置的查询部分（符号?之后的部分），以及它是否与组件to属性相匹配。检查两个参数 match 和 location ，您可能会发现有必要这样做。

activeClassName用于具有相似网址的链接

2 个答案: