Routes and layouts in React 16.

AccountLayout.js

// ./account/components/AccountLayout.js

import React, { Component } from 'react';

class AccountLayout extends Component {
    render() {
        return (
            <div className="EXEMPLE_ACCOUNT_LAYOUT">
                {this.props.children}
            </div>
        )
    }
}

export default AccountLayout;

DefaultLayout.js

// ./common/layouts/DefaultLayout.js

import React, { Component } from 'react';

class DefaultLayout extends Component {
    render() {
        return (
            <div className="EXEMPLE_DEFAULT_LAYOUT">
                {this.props.children}
            </div>
        )
    }
}

export default DefaultLayout;

index.js

// ./index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';

import Footer from './common/components/Footer';
import Header from './common/components/Header';
import Routes from './common/components/Routes';

import ScrollToTop from './common/components/ScrollToTop';

import './index.scss';

ReactDOM.render(
    <Router onUpdate={() => console.log('Route updated')}>
        <ScrollToTop>
            <Header />
            <div id="wrap">
                <Routes />
            </div>
            <Footer />
        </ScrollToTop>
    </Router>,
    document.getElementById('root')
);

Routes.js

// ./common/components/Routes.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from './Home';
import NotFound from './NotFound'; // 404

import { routes as account } from '../../account';
import { routes as authentication } from '../../authentication';

const app_routes = [
    account,
    authentication
]

const routes = [].concat(...app_routes)

class Routes extends Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" key="home" component={Home} />

                { routes.map((route) =>
                    <Route
                        exact={true}
                        path={route.path}
                        key={route.key}
                        render={ props => (
                            <route.layout>
                                <route.component {...props} />
                            </route.layout>
                        )}
                    />
                ) }

                <Route key="not_found" component={NotFound} />
            </Switch>
        )
    }
}

export default Routes;

routes_account.js

// ./account/routes.js

// Layout
import AccountLayout from './components/AccountLayout';

// Pages
import Page1 from './views/Page1';
import Page2 from './views/Page2';
import Page3 from './views/Page3';

export const routes = [
    {
        key: 'account_page_1',
        layout: AccountLayout,
        path: '/account/page1', // Page URL
        component: Page1
    },
    {
        key: 'account_page_2',
        layout: AccountLayout,
        path: '/account/page2', // Page URL
        component: Page2
    },
    {
        key: 'account_page_3',
        layout: AccountLayout,
        path: '/account/page3', // Page URL
        component: Page3
    }
]

routes_authentication.js

// ./authentication/routes.js

// Layout
import DefaultLayout from '../common/layouts/DefaultLayout';

// Pages
import ResetPassword from './views/ResetPassword';
import SignIn from './views/SignIn';
import SignUp from './views/SignUp';

export const routes = [
    {
        key: 'reset_password',
        layout: DefaultLayout,
        path: '/reset-password', // Page URL
        component: ResetPassword
    },
    {
        key: 'signup',
        layout: DefaultLayout,
        path: '/signup', // Page URL
        component: SignUp
    },
    {
        key: 'signin',
        layout: DefaultLayout,
        path: '/signin', // Page URL
        component: SignIn
    }
]

ScrollToTop.js

// ./common/components/ScrollToTop.js

import { Component } from 'react';
import { withRouter } from 'react-router-dom';

class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location !== prevProps.location) {
            window.scrollTo(0, 0)
        }
    }

    render() {
        return this.props.children
    }
}

export default withRouter(ScrollToTop);