Question

我对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>

第一级嵌套（例如，a，b，c，d）工作正常并呈现我需要的所有内容。但是二级路线只渲染第一级路线数据。

基本上，我尝试做的是：

<Route path='b' name='b' component={B}>＆lt; - 使用其数据呈现侧导航。

<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＆＃39;。所以问题是如何渲染第二条lvl路线（例如＆＃39; ba＆＃39;＆＃39; bb＆＃39;）？

Answer 1

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

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

反应嵌套路由渲染

1 个答案: