Skip to content

Instantly share code, notes, and snippets.

@avinmathew
Created August 8, 2017 11:54
Show Gist options
  • Save avinmathew/e82fe7e757b20cb337d5219e0ab8dc2c to your computer and use it in GitHub Desktop.
Save avinmathew/e82fe7e757b20cb337d5219e0ab8dc2c to your computer and use it in GitHub Desktop.
Multiple layouts with React Router v4
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>
)
@mlbd-tanvir-raj
Copy link

This would cause unnecessary rerendering in every client side navigation

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

@vipinc007
Copy link

This was really useful to me. it saved my day

@damoqiongqiu
Copy link

Thank you, this is cool!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment