Skip to content

Instantly share code, notes, and snippets.

@xbklairith
Forked from avinmathew/index.jsx
Created June 5, 2018 08:05
Show Gist options
  • Save xbklairith/eb0cfbff63f75c01ed8f13800a3cf063 to your computer and use it in GitHub Desktop.
Save xbklairith/eb0cfbff63f75c01ed8f13800a3cf063 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>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment