Question

我在reactjs应用程序中尝试嵌套路由。我有3条路线的路线＆＃34; NewHome＆＃34;。这就是我的路线结构的样子

 <Route path='/app' onEnter={hasAuth}>
                    <IndexRoute component={NewHome}>
                        <IndexRoute component={Reviews}/>
                        <Route>
                            <Route path={"/reviews"} component={Reviews}/>
                            <Route path={"/search"} component={Search}/>
                            <Route path={'/user-profile-page'} component={UserProfilePage}/>
                        </Route>
                    </IndexRoute>

所以当我加载我的应用程序时，第一个页面是/ app。在这里我看到NewHome得到渲染，这是预期的。在这个NewHome，＆＃34;评论＆＃34;未显示/呈现，这是索引路径。

我想要的是什么：我希望评论是NewHome中的默认/第一个视图。我的标题中有个人资料图片。当我点击它时，评论应该带我到/ user-profile-page＆＃39;路线。我已经附加了所需的方法来点击那张照片

to_profile_page(){
        this.context.router.push('/user-profile-page')
    }

结果：评论未呈现。此外，当我点击个人资料图片时，网址会从/ app更改为/ user-profile-page几分之一秒，然后再次返回/ app。我无法看到我的个人资料页面。

这是我的NewHome

class NewHomePage extends Component {
    render() {
        return (
            <div className={c.container}>
                <div className="page-content-wrapper full-height">
                    {/*<!-- START PAGE CONTENT -->*/}
                    <div className="content full-height">
                        <div className="container-fluid container-fluid-media full-height no-padding">
                            <div className="row full-height no-margin">
                                <NewSidebar/>
                                {this.props.children}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


export default withStyles(c)(NewHomePage)

我做错了什么？

Answer 1

将其引用到此 github issue ，似乎不允许嵌套IndexRoute，您可以改为重构您的路线，例如

<Route path='/app' onEnter={hasAuth}>
   <Route component={NewHome}>
      <IndexRoute component={Reviews}/>
      <Route>
          <Route path={"/reviews"} component={Reviews}/>
          <Route path={"/search"} component={Search}/>
          <Route path={'/user-profile-page'} component={UserProfilePage}/>
      </Route>
   </Route>
</Router>

未呈现的子路线

1 个答案: