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

Question

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

classNamea在其<Link>路由处于活动状态时接收。默认情况下没有活动类。

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

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

标签： reactjsreact-router-dom

Answer 1

如果 URL 与to您的 相同Link，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类名，其他选项卡将没有它。

当 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>

这里的例子。