Reactjs 反应路由器-嵌套路由不渲染

Reactjs 反应路由器-嵌套路由不渲染,reactjs,web,react-router,Reactjs,Web,React Router,我目前正在使用ReactJS进行开发,我正在尝试了解ReactRouter,它一直运行良好,因为出于某种原因,我的嵌套路由不会渲染 基本上,当我导航到“/home”时,我希望导航栏呈现,欢迎消息呈现在下面,但由于某些原因,只有导航栏呈现,它忘记了呈现欢迎消息。我错在哪里 请参阅下面的代码示例 谢谢 ReactDOM.render(( <Router history={hashHistory}> <Route path="/" component={Login}/&g

我目前正在使用ReactJS进行开发,我正在尝试了解ReactRouter,它一直运行良好,因为出于某种原因,我的嵌套路由不会渲染

基本上,当我导航到“/home”时,我希望导航栏呈现,欢迎消息呈现在下面,但由于某些原因,只有导航栏呈现,它忘记了呈现欢迎消息。我错在哪里

请参阅下面的代码示例

谢谢

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={Login}/>
    <Route path="/signup" component={Signup}/>
    <Route path="/companyregistration" component={CompanyRegistration}/>
    <Route path="/adduserdetails" component={AddUserDetails}/>
    <Route component={NavBar}>
      <Route path="/home" component={Welcome} />
    </Route>
  </Router>
), document.getElementById("app"))
ReactDOM.render((
),document.getElementById(“应用程序”))
编辑-导航栏:

export default React.createClass({
  render() {
    return (
      <div>
        <AppBar
            showMenuIconButton={false}
            title={<img src={"img/logo-nav.png"}/>}
            iconElementRight={
                <RaisedButton 
                  onClick={signOut} 
                  label="Sign Out" 
                  primary={true} 
                  style={styles.button}         
                  icon={ 
                      <FontAwesome 
                        className='super-crazy-colors' 
                        name='sign-out' 
                        style={{ color: '#B71C1C' }}
                      />
                    }
                />
            }
          /> 
          {console.log(this.props.children)}
          <div>{this.props.children}</div>
      </div>
    );
  }
});
export default React.createClass({
render(){
返回(
{console.log(this.props.children)}
{this.props.children}
);
}
});
仍然没有呈现任何内容,但是console.log(this.props.children)正在向控制台返回“undefined”

外部路由处理程序(在本例中为
NavBar
)是父组件,而内部路由处理程序(
Welcome
)是子组件

为了使
Welcome
呈现,您必须在
NavBar
render
方法中输出
this.props.children


但是,名称
NavBar
听起来更适合作为可重用组件,而不是作为父组件。另一种方法是在
Welcome
中呈现
NavBar

我已经为NavBar.js添加了代码,你能告诉我如何实现这个.props.children吗。很抱歉,这是新的。我知道我必须创建一个构造函数,但我不确定该怎么做。在NavBar渲染方法中,只需在某个地方创建:
{this.props.children}
@Jayce444我现在已经创建了,嵌套的路由仍然没有渲染。没有编译错误,但是{console.log(this.props.children)}正在向控制台返回“undefined”。不知道我哪里出错了。