渲染路由器儿童ReactJS

Posted 2021-04-16

嗨，大家好，所以我的网站上有一个带侧边栏的页面，因为这张图显示了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组件SideBar {} this.props.children

这是FullServicePane

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

FullService包含

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

答案

我道歉我认为我发现了错误这是一个孩子的孩子，这让我相信我的巢很深，最后再做了

我的实际组件是

FullService-> 
FullServicePage ->
  ServicePane ->
    Trial 

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