[英]React Router - Nested Routes Not Rendering
我目前正在使用ReactJS进行开发,我想让我了解React Router,并且到目前为止进展顺利,因为出于某种原因,我的嵌套路由无法渲染。
基本上,当我导航到“ / 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)将“未定义”返回到控制台。
外部路由处理程序(在本例中为NavBar
)是父组件,内部路由处理程序( Welcome
)是子组件。
为了使Welcome
渲染,必须在NavBar
的render
方法中输出this.props.children
。
但是,名称NavBar
听起来比作为父组件更适合作为可重用组件。 另一种方法是在Welcome
渲染NavBar
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.