我目前正在使用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
渲染,您必须this.props.children
以的render
方法输出NavBar
。
但是,该名称NavBar
听起来比作为父组件更适合作为可重用组件。另一种方法是在内进行渲染。NavBar
Welcome
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句