Question

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

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

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

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

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

如果用户访问路径/sendInvite，则链接现在具有活动类集，这是此情况的正确行为。

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

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

Answer 1

您需要将/sendInvite(/:eventId)置于/sendInvite路径

下

它应该是这样的： -

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

这应该让你的父路线保持活跃状态。

您可以查看here，检查用户在路由器中如何处理，这样可以解决您的目的。

Answer 2

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

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

Answer 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*/
}

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

3 个答案: