如果嵌套路由与其父路由不同,则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] 删除。
我来说两句