Reactjs 在react router中具有多层选项卡的ActiveClassName

如果嵌套路由的组件与其父路由不同，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" />

选项卡链接定义如下：

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

菜单链接的定义如下：

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

当我点击“Tab1”，然后点击“Menu 2”，激活的类仍然应用于“Tab1”和“Menu 2”（正如它们应该的那样），但是Tab1组件仍然显示。如果我将Tab1Menu2组件路由移到其父级之外

<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”时，将显示选项卡1菜单2组件内容但是，则不能以“TAB1”和“Menu 2”都获得活动类的方式使用activeClassName。。。“菜单2”从“选项卡1”中窃取活动类

---

我希望这样做，Tab1和Menu2都可以同时拥有活动类，并显示tab1menu2组件。如何完成此操作？

您只需从Tab1Component返回

this.props.children

---

我建议您参考react路由器存储库中找到的。它几乎可以处理类似的场景

谢谢死鱼。这确实奏效了。我最终将

更改为

，并简单地添加了{this.props.children}。有趣的是，在我的第一段代码中，如果我将其更改为

，也可以使用