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>
)

That's very useful, thanks a lot.

It looks too good to be true. I tried and it's working. I created a layouts folder in my components and added AppLayout and HomeLayout components.

const Root = ({ store }) => {
    return(
        <Provider store={ store }>
            <BrowserRouter>
                <div>
                    <Switch>
                        <AppRoute exact path="/" layout={ HomeLayout } component={ Home } />
                        <AppRoute path="/signin" layout={ HomeLayout } component={ Signin } />
                        <AppRoute path="/signup" layout={ HomeLayout } component={ Signup } />
                        <AppRoute path="/signout" layout={ HomeLayout } component={ Signout } />
                        <AppRoute path="/dashboard" layout={ AppLayout } component={ RequireAuthentication(Dashboard) } />
                    </Switch>
                </div>
            </BrowserRouter>
        </Provider>
    )
};

Thanks a lot.

thanks yall

I was looking for this 2 hours .. Thank You )

Coool!!
Thanks!!

It seems like once a React app hits moderate complexity React Router v4 starts to look similar to v3. React Router v4's sweet spot seems to be single layout apps. Once you introduce multiple layouts the App component turns into a routes file. Maybe I'm just misunderstanding but sometimes I think the premise of v4 is flawed.

[eslint] 'component' is missing in props validation (react/prop-types)

this error is showing

Thanks alot!

I implemented a default layout this way:

const AppRoute = ({ component: Component, layout: Layout, ...rest }) => (
  if (Layout === undefined) {
    Layout = props => (<React.Fragment>{props.children}</React.Fragment>) // or you can set 'Layout = DefaultLayout'
  }
  <Route {...rest} render={props => (
    <Layout>
      <Component {...props} />
    </Layout>
  )} />
)

Thanks a lot. Was actually what I needed.

Thanks , it really solved my problem

RequireAuthentication

would you share the code of RequireAuthentication here

I'm using the React Router 4 and my is return:

Warning: You should not use <Route render> and <Route children> in the same route; <Route render> will be ignored

Somebody help me

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!