首页 文章

反应路由器4具有共同布局的嵌套路由

提问于
浏览 次
0

我现在将我的项目从react-router 3.0.0升级到4.1.2，现在遇到了嵌套路由问题 .

我想得到一个带左侧菜单的侧边栏页面，顶部和右下角的 Headers 是主要内容部分 . 从这里学习：Nested Routes in v4，我的代码是这样的：

<Router>
  <AppLayout>
    <Route path='/abc' component={ABC} />
    <Route path='/xyz' component={XYZ} />
  </AppLayout>
</Router>

组件AppLayout是一个常见的布局包含

<Layout>
            <AppHeader/>
            <Layout>
                <Sider></Sider>
                <Layout>
                    <Content>
                        <div>{this.props.children}</div>
                    </Content>
                </Layout>
            </Layout>
            <Footer></Footer>
        </Layout>

可以更改AppLayout的内容，侧栏上的菜单需要与路径URL密切相关 . 所以我的问题是，如何从路由器获取路径路径并将这些值设置为AppLayout，以便可以选择菜单项以及路径更改 .

react-router-v4

1 回答

  • 0

    您可以使用上下文 .

    在你的 appLayout 组件中：

    class AppLayout extends Component {
static contextTypes = {
     router: PropTypes.object
}
render (){
   // your code here.
}

    您可以从 const { url } = this.context.router.route.match 获取网址 .

    回复于

相关问题