如何为多个 url 状态设置仅使用反应路由器激活一个链路

How to set active only one link with react router for multiple url state?

本文关键字：激活 路由器 一个 链路 url 状态 设置      更新时间：2023-09-26

我的主页上有三个主要链接，例如列表，关于和历史记录。我想在详细信息和照片屏幕中激活列表链接。如何为该特定链接设置为活动状态？

这是我的路由器代码，

<Router history={hashHistory}>
    <Route path="/">
        <IndexRedirect to="home/lists" />
        <Route path="home" component={Home}>
            <Route path="lists" component={Lists} />
            <Route path="details" component={Details} />
            <Route path="photos" component={Photos} />
            <Route path="about" component={About} />
            <Route path="history" component={History} />
        </Route> 
    </Route>
</Route>

菜单组件，

<li><Link to="home/lists" activeClassName="active">Lists</Link></li>
<li><Link to="home/about" activeClassName="active">About</Link></li>
<li><Link to="home/history" activeClassName="active">History</Link></li>

我想在细节和照片中时始终激活列表链接。如何解决此问题。在过去的 3 小时内，我正在努力解决此问题。有人请让我摆脱这个问题

您可以使用路由器中的位置对象。

this.props.location.pathname

存储有关当前 URL 的信息。下面是一些伪代码： 

<Link to="home/lists" className={this.props.location.pathname === 'home/details' || (...) ? 'active' : 'notActive'}>Lists</Link>
相关文章：