ActiveClassName在React-Router中带有多层选项卡

dana 发表于 Dev

达娜

如果嵌套路由与其父路由不同，则React-Router不能识别嵌套路由的组件，但替代方法可防止Link中的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" />

当我单击“制表符1”，然后单击“菜单2”时，活动类仍将应用到“制表符1”和“菜单2”（应按它们的方式），但仍显示Tab1Component。如果我将Tab1Menu2Component路由移到其父级之外...

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

...然后，当我单击“菜单2”时，将显示Tab1Menu2Component的内容。但是，您不能以“ Tab 1”和“ Menu 2”都获得活动类的方式使用activeClassName…“ Menu 2”会从“ Tab 1”中窃取活动类。

我想以一种方式使Tab1和Menu2可以同时具有活动类，并显示Tab1Menu2Component。我该如何完成？

死鱼

您可以简单地this.props.children从Tab1Component返回。

我建议您参考在react-router存储库中找到的动态细分示例。它几乎处理了类似的情况

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。