activeClassName 如何与 Link 组件一起使用？

Question

如标题 - activeClassName 参数如何与 react-router-dom Link 组件一起使用？某些 class 处于活动状态是什么意思？在文档中我们只能找到：

The className a <Link> receives when its route is active. No active class by default.

但没有解释活动路线实际上是什么。

编辑： 好吧，现在明白了，我可以猜出这句话的意思了。但我仍然认为那很令人困惑。

Answer 1

如果 URL 与 Link 的 to 相同，activeClassName 将分配给您的锚标签。假设您有 3 个选项卡：

<Link to='/tab-1' activeClassName="red-text">Tab 1</Link>
<Link to='/tab-2' activeClassName="red-text">Tab 2</Link>
<Link to='/tab-3' activeClassName="red-text">Tab 3</Link>

如果您当前的 URL 是 site.com/tab-2，只有选项卡 2 会有 red-text class 名称，其他选项卡不会有。

当 url 为 site.com/tab-2 时，上面的代码将呈现如下，因此 Tab 2 将被突出显示。

<a href='/tab-1'>Tab 1</Link>
<a href='/tab-2' class="red-text">Tab 2</Link>
<a href='/tab-3' >Tab 3</Link>

例子here.

activeClassName 如何与 Link 组件一起使用？

How does activeClassName work with Link component?

reactjs

react-router-dom