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

存储有关您当前网址的信息。这是一些伪代码：

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

如何设置只有一个链接与反应路由器为多个url状态？

1 个答案: