複数のURL状態のための反応ルータとのアクティブなリンクを1つだけに設定するにはどうすればよいですか？

Question

私のホームページには、リスト、about、historyという3つのメインリンクがあります。私は詳細と写真の画面にいるときにリストをアクティブにするリンクを取得したい。特定のリンクをアクティブにするには？ここで

は私が詳細と写真にいるとき、常にアクティブリストがリンクしたい私のルータコード、

<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> 

Menuコンポーネント、

<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>