javascript - 如何使用 React Router 设置仅激活一个链接以实现多个 url 状态？

Question

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

这是我的路由器代码，

<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 个小时努力解决这个问题。请有人帮我摆脱这个问题

Answer 1

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

this.props.location.pathname

存储有关您当前 URL 的信息。这是一些伪代码:

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