我目前正在使用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"))
编辑 - 导航栏:
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)正在返回&#39; undefined&#39;到控制台。
答案 0 :(得分:2)
外部路由处理程序(在本例中为NavBar
)是父组件,内部路由处理程序(Welcome
)是子组件。
为了Welcome
呈现,您必须在this.props.children
的{{1}}方法中输出render
。
但是,名称NavBar
听起来更适合作为可重用组件,而不是父组件。另一种方法是在NavBar
内呈现NavBar
。