Question

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

我想获得一个带左侧菜单的侧边栏页面，顶部和右下角的标题是主要内容部分。从这里学习：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，以便可以选择菜单项以及路径更改。

Answer 1

您可以使用上下文。

在appLayout组件中：

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

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

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

1 个答案: