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

当我点击＆＃34;标签1＆＃34;，然后＆＃34;菜单2＆＃34;时，活动类仍然应用于＆＃34;标签1＆＃34;和＆＃34;菜单2＆＃34; （他们应该），但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>

...当我点击＆＃34;菜单2＆＃34;时，会显示Tab1Menu2Component内容。但是，那么你就不能以这样的方式使用activeClassName＆＃34; Tab 1＆＃34;和＆＃34;菜单2＆＃34;两者都获得活跃的课程......＆＃34;菜单2＆＃34;从＆＃34; Tab 1＆＃34;中窃取活动类。

我想以Tab1和Menu2同时拥有活动类并显示Tab1Menu2Component的方式执行此操作。我该如何做到这一点？

Answer 1

您只需从Tab1Component返回this.props.children。

我建议您参考react-router存储库中的dynamic segments example。它几乎处理类似的情况

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

1 个答案: