使用具有可选 URL 参数的 react-router 链接设置活动类答案

【问题标题】：Set active class with react-router Link that has an optional URL parameter使用具有可选 URL 参数的 react-router 链接设置活动类
【发布时间】：2016-12-31 23:56:06
【问题描述】：

如何为包含可选参数的路径设置链接的活动类名称？

以下是我想要实现的一些细节：

我的应用程序中的路由有一个包含可选 URL 参数的路径 - eventId:

<Route path="/sendInvite(/:eventId)" component={SendInviteContainer} />
在我的主导航组件中有一个 <Link/> 指向 /sendInvite 路径（没有可选参数）：

<Link to="/sendInvite" activeClassName="active">Send Invite</Link>

如果用户访问路径/sendInvite，则链接现在有一个活动类集，这是本案例的正确行为。

但是，当用户访问 /sendInvite/15 时，我的导航中指向 /sendInvite 的链接没有活动类集。

关于如何使用地址栏中的可选参数将链接设置为活动的任何想法？

【问题讨论】：

在DOCS 中它说Link 应该是活动的，即使是 URL 指向链接路由的后代 <Link> 可以知道它链接到的路由何时是活动的并且给定任一道具时自动应用activeClassName 和/或activeStyle。如果当前路线是链接路线或链接路线的任何后代，<Link> 将处于活动状态。

标签： reactjs react-router

【解决方案1】：

你需要把你/sendInvite(/:eventId)放在/sendInvite路由下

应该是这样的：-

<Route path="/sendInvite" component={container} >
     <Route path="/sendInvite(/:eventId)" component={SendInviteContainer} />
</Route>

这应该让你的父路由保持活跃。

您可以查看here，查看路由器中如何处理用户部分，它会解决您的目的。

【讨论】：

【解决方案2】：

我认为另一个更好的选择是isActive，例如：

<NavLink
    to='path'
    className='whatever'
    isActive={() => window.location.hash.indexOf('sendInvite') > -1}>
    Title
</NavLink>

【讨论】：

【解决方案3】：

import {NavLink, Route} from 'react-router-dom';
<NavLink 
 ctiveClassName="activeLink" className="month"
 to="/tab1/"
 onClick={() => /*to scroll to top*/
  window.scrollTo({top:0,behavior:"smooth"})
 }
>
Tab 1
</NavLink>

在 CSS 中

.activeLink{
 background-color:#f00; /*for red background*/
}

【讨论】：