React嵌套路由呈现

Question

我是React的新手，有这样的问题。 我有这样的路线：（f.e A，B，C，d）

<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'）？

Answer 1

根据你当前的路由配置，当你的路由器匹配一个像这样的路径B >> ba or B >> bb or B >> bc时，（ba，bb，bc）中的一个应该呈现为B 的当前子节点。看看代码snnipet

{ 
       this.props.children ? this.props.children : <BlankComponent/> 
}