アクティブルータ名が反応ルータ内の複数層タブの場合

Question

React-Routerは、親ルートと異なる場合、ネストされたルートのコンポーネントを認識しませんが、リンク内のactiveClassNameは意図したとおりに機能しません。

私は、次の多段タブレイアウトでサイトを持って次のように

+---------+---------+ 
| Tab 1 | Tab 2 | 
+   +---------+---------------------------+--------+--------+ 
|            | Menu 1 | Menu 2 | 
+-----------------------------------------------+  +--------+ 
|                 | 
~                 ~ 

私のルートが定義されています。

<Router history={browserHistory}> 
    <Route path"/" component={App}> 
    <Route path="Tab1" component={Tab1Component}> 
     <Route path="Menu1" component={Tab1Component} /> 
     <Route path="Menu2" component={Tab1Menu2Component} /> 
    </Route> 
    <Route path="Tab2" component={Tab2Component} /> 
    </Route> 
</Router> 

次のようにタブのリンクが定義されています。

<Link to="/Tab1/Menu1" activeClassName="active" /> 
<Link to="/Tab2"  activeClassName="active" /> 

メニューリンクは次のように定義されています。

<Link to="/Tab1/Menu1" activeClassName="active" /> 
<Link to="/Tab1/Menu2" activeClassName="active" /> 

「Tab 1」、「メニュー2」をクリックすると、「Tab 1」と「Menu 2」にアクティブクラスが適用されますが、Tab1Componentは引き続き表示されます。私はその親...

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <Route path="Tab1" component={Tab1Component}> 
     <Route path="Menu1" component={Tab1Component} /> 
    </Route> 
    <Route path="Tab1/Menu2" component={Tab1Menu2Component} /> 
    <Route path="Tab2" component={Tab2Component} /> 
    </Route> 
</Router> 

外Tab1Menu2Componentルートを移動した場合...その後Tab1Menu2Componentのコンテンツは、私は「メニュー2」をクリックしたときに表示されます。 BUTの場合、 "Tab 1"と "Menu 2"の両方がアクティブなクラスを取得するような方法で、activeClassNameを使用することはできません。 "メニュー2"はアクティブなクラスを "タブ1"から盗みます。

Tab1とMenu2の両方が同時にアクティブなクラスを持ち、Tab1Menu2Componentが表示されるようにしたいと思います。これをどのように達成するのですか？

Answer 1

Tab1Componentからthis.props.childrenを返すことができます。

反応ルータリポジトリにあるdynamic segments exampleを参照することをお勧めします。類似のシナリオを扱っています。