nested routes with common layout by react router 4

Question

I am now upgrading my project from react-router 3.0.0 to 4.1.2 and now meet the nested routes problem.

I want to get a page with a sidebar with menus on the left, a header on the top and on the right bottom is the main content part. Studied from here: Nested Routes in v4, my code is just like this:

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

where component AppLayout is a common layout contains

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

The content of AppLayout can be changed, the menus on the sidebar need to be closely related to the the route url. So my problem is, how to get the route paths from Router and set those values into AppLayout, so that menu items can be selected along with the route changes.

score 0 · Answer 1 · answered Jun 03 '18 at 11:20

You can use context for that.

In your appLayout Component:

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

You can get the URL from const { url } = this.context.router.route.match.

nested routes with common layout by react router 4

1 Answers1