反应路由器 - 嵌套路由不渲染-Java 学习之路

我目前正在使用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）正在向控制台返回'undefined' .

1 回答

2

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

为了使 Welcome 渲染，您必须在 NavBar 的 render 方法中输出 this.props.children .

但是，名称 NavBar 听起来更适合作为可重用组件而不是父组件 . 另一种方法是在 Welcome 内渲染 NavBar .

回复于 2024-05-18T16:42:16+08:00

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

1 回答

相关问题