反应路由器 - 嵌套路由不呈现

我目前正在开发与ReactJS和我试图让我的头围绕React路由器，它到目前为止，因为某些原因，我的嵌套路由不会呈现。反应路由器 - 嵌套路由不呈现

基本上，当我导航到'/ home'时，我想让NavBar渲染并在下面呈现欢迎消息，但由于某种原因只渲染了NavBar，它忘记了呈现欢迎消息。我哪里出错了？

查看下面的代码示例。

感谢。

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"))

编辑 - 的NavBar：

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> 
    ); 
    } 
});

仍然没有什么渲染，但执行console.log（this.props.children）将返回 '未定义' 到控制台。

来源

2017-01-22 Manus Gallagher

外部路由处理程序（在本例中为NavBar）是父组件，内部路由处理程序（Welcome）是子组件。

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

但是，名称NavBar听起来比作为母体分量的可重复使用的部件更合适。另一种方法是在Welcome内呈现NavBar。

来源

2017-01-22 22:23:59

我已经添加了我的navbar.js代码，你能告诉我如何实现this.props.children。对此很新，对不起。我知道我必须创建一个构造函数，但我不确定我会如何去做这件事。 –

在NavBar渲染方法只是有这个地方：'

{this.props.children}

' – Jayce444

@ Jayce444我现在已经做了，嵌套的路线仍然没有渲染。没有编译错误，但{console.log（this.props.children）}将'undefined'返回给控制台。不知道我错了哪里。 –

反应路由器 - 嵌套路由不呈现

回答

相关问题