Multiple layouts with React Router v4

index.jsx

import React from "react"
import { Route, Switch } from "react-router-dom"

const AppRoute = ({ component: Component, layout: Layout, ...rest }) => (
  <Route {...rest} render={props => (
    <Layout>
      <Component {...props} />
    </Layout>
  )} />
)

const MainLayout = props => (
  <div>
    <h1>Main</h1>
    {props.children}
  </div>
)

const AltLayout = props => (
  <div>
    <h1>Alt</h1>
    {props.children}
  </div>
)

const Foo = () => (
  <p>Foo</p>
)

const Bar = () => (
  <p>Bar</p>
)

const App = () => (
  <div>
    <Switch>
      <AppRoute exact path="/foo" layout={MainLayout} component={Foo} />
      <AppRoute exact path="/bar" layout={AltLayout} component={Bar} />
    </Switch>
  </div>
)

Save my day today!

Thanks a lot :)
it saves a lot of time for me.

The problem here that the layout is recreating itself every route.. Someone has a solution for that?
Beside performance it also losses the context of the layout(The chosen menu item and stuff like that

im using react-router location.state to determine each page layout.
you can check here https://github.com/adhityasan/kao-react-template/blob/master/src/routes/index.jsx

Very usefull thanks

This would cause unnecessary rerendering in every client side navigation

This would cause unnecessary rerendering in every client side navigation

@aiveneh do you have any idea how we can prevent rerendering

This was really useful to me. it saved my day

Thank you, this is cool!