渲染路由器儿童 ReactJS答案

【问题标题】：Render router Children ReactJS渲染路由器儿童 ReactJS
【发布时间】：2016-08-12 13:31:35
【问题描述】：

大家好，我的网站上有一个带有侧边栏的页面，如图所示 page Drawing

该图显示了我的页面，它是应用程序的子页面。我目前正在尝试在标记为的区域中呈现子组件 {this.props.children}。目前我的页面呈现没有子组件的内容。只是空白。

这是我的路由器设置

<Router history={hashHistory}>
    <Route path="/" component={App}>
    <IndexRoute component={LandingPage}/>
    <Route path="serviceitem" component={FullService}>
      <IndexRedirect to="trial"/>
      <Route path="trial" component={Trial}/>
    </Route>
    <Route path="services" component={Services}/>
    <Route path="specials" component={Specials}/>
    </Route>
</Router>

这就是我尝试渲染子组件的方式

这是 ServicePane 组件侧边栏
{this.props.children}

这是 FullServicePane

    <div>
     <NavigationBar/>
     <ServicePane/> 
    </div>

FullService 包含

 <div>
    <FullServicePane/>
    <div className="row">
     <BottomBar/>
    </div>
    </div>

【问题讨论】：

需要更多信息，我假设上面显示的组件是您的 App 组件？你能粘贴着陆页应用程序的全部内容以及你的导入和导出吗？
控制台有错误信息吗？
也可能SideBar应该被渲染成一个组件<SideBar />
我很抱歉，我认为我发现了错误 It is a child of a child，这让我相信我嵌套得太深，最终将我的 ui 改写为更少的代码，结果解决了

标签： reactjs react-router

【解决方案1】：

抱歉，我认为我发现了错误 It is a child of a child，这让我相信我嵌套得太深并最终返工

我的实际组件是

FullService-> 
FullServicePage ->
  ServicePane ->
    Trial

在这种情况下，Trial 是 ServicePane 的子对象，而不是 FullServicePane

【讨论】：