React-router v4 multi layout

App.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link, Match, Redirect, Switch } from 'react-router-dom'

import OverviewPage from './page/OverviewPage'
import AccountPage from './page/AccountPage'

/*
  Layouts, inline define here for demo purpose
  you may want to define in another file instead
 */

const DashboardLayout = ({children, ...rest}) => {
  return (
    <div className="page page-dashboard">
      <div className="sidebar">Sidebar here</div>
      <div className="main">{children}</div>
    </div>
  )
}

const LoginLayout = ({children, ...rest}) => {
  return (
    <div className="page page-login">
      <div className="main">{children}</div>
    </div>
  )
}

/*
  Route wrapper
 */

const DashboardRoute = ({component: Component, ...rest}) => {
  return (
    <Route {...rest} render={matchProps => (
      <DashboardLayout>
          <Component {...matchProps} />
      </DashboardLayout>
    )} />
  )
};

const LoginLayoutRoute = ({component: Component, ...rest}) => {
  return (
    <Route {...rest} render={matchProps => (
      <LoginLayout>
          <Component {...matchProps} />
      </LoginLayout>
    )} />
  )
};

/*
   App
 */

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <Redirect to="/login" />
          </Route>
          <LoginLayoutRoute path="/login" component={LoginPage} />
          <DashboardRoute path="/overview" component={OverviewPage} />
          <DashboardRoute path="/account" component={AccountPage} />
        </Switch>
      </Router>
    );
  }
}

export default App;

With this approach its gonna hurt the performance the whole gonna render every time the route matched

excellent, it's helpful