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

Question

与标题一样-activeClassName参数如何与react-router-dom Link组件一起使用？某堂课是活跃的，这意味着什么？在文档中，我们只能找到：

  

className的{​​{1}}在其路由处于活动状态时会收到。默认情况下，没有活动的课程。

但没有说明实际的活动路线是什么。

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

Answer 1

如果该网址与您的to的{​​{1}}相同，则会将Link分配给您的锚标记。假设您有3个标签：

activeClassName

如果您当前的URL是<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> ，则只有选项卡2将具有site.com/tab-2类名，其他选项卡将没有它。

当url为red-text时，以上代码将如下所示，以便突出显示选项卡2。

site.com/tab-2

示例here。