如何設置活動只有一個鏈接與反應路由器多個url狀態？

我在我的主頁有三個主要鏈接，例如列表，關於和歷史。我想要獲得激活列表鏈接，當我在細節和照片屏幕。如何設置活動的特定鏈接？如何設置活動只有一個鏈接與反應路由器多個url狀態？

這裏是我的路由器代碼，

<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個小時。有人請讓我從這個問題出發

來源

2016-07-06 Sathya

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

this.props.location.pathname

存儲有關您當前URL的信息。這裏有一些僞代碼：

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

來源

2016-07-06 13:21:55 MariuszJasinski

@Mariusjasinski這是拋出錯誤。「Uncaught TypeError：無法讀取未定義的屬性」路徑名「。 – Sathya

我得到相同的錯誤 –

如果你的組件是一個純函數，這將不起作用，因爲它不會通過道具傳遞「位置」。在這種情況下，你應該明確地將'location'對象作爲道具傳遞給你的函數。 – ESWAT

如何設置活動只有一個鏈接與反應路由器多個url狀態？

回答

相關問題