React嵌套路由呈现
问题描述:
我是React的新手,有这样的问题。 我有这样的路线:(f.e A,B,C,d)React嵌套路由呈现
<Router history={browserHistory}>
<Route path='/' name='/' component={App}>
<Route path='a' component={A}></Route>
<Route path='b' name='b' component={B}>
<Route path='ba' component={BA}></Route>
<Route path='bb' component={BB}></Route>
<Route path='bc' component={BC}></Route>
</Route>
<Route path='c' name='c' component={C}></Route>
<Route path='d' component={D}></Route>
</Route>
</Router>
第一级嵌套工作正常,使我所需要的。 但二级路线只呈现一级路线数据。
基本上,我想要做的是:
<Route path='b' name='b' component={B}>
< - 渲染侧导航与它的数据。
<Route path='ba' component={BA}></Route>
<Route path='bb' component={BB}></Route>
<Route path='bc' component={BC}></Route> <- Each route renders its data and has parent route side nav(active link).
因此父路径是这样的:
B = React.createClass(
render: ->
setActiveLink(this.props.location.pathname)
<div className="row">
<div className="col-md-2">
<div className="panel panel-default">
<NavPanel links={nav_panel_data.links} />
</div>
</div>
{
if this.props.children
{this.props.children}
else
<div className="col-md-10">
<h1>Graph CS</h1>
</div>
}
</div>
)
我认为,当你改变航线它重新呈现向孩子们。但它似乎没有儿童属性,并始终呈现'图形CS'。 所以问题是我如何渲染第二层路线(如'ba','bb')?
答
根据你当前的路由配置,当你的路由器匹配一个像这样的路径B >> ba or B >> bb or B >> bc
时,(ba,bb,bc)中的一个应该呈现为B 的当前子节点。看看代码snnipet
{
this.props.children ? this.props.children : <BlankComponent/>
}
即时通讯类似于创建'B'类 –
但它仍然不渲染 –