index.js

import React from 'react'
import { connect } from 'react-redux'
import { setLanguage } from 'redux-i18n'
import { BrowserRouter as Router } from 'react-router-dom'

import Route from 'services/router'

import * as authData from 'data/auth'
import * as persist from 'data/persist'

import app from 'scenes/App/routes'
import auth from 'scenes/Auth/routes'

import I18n from 'components/I18n'

import './styles'

const Root = ({ isAuthenticated, isRehydrated, lang, setLanguage }) => isRehydrated ? (
  <Router>
    <I18n setLanguage={setLanguage} initialLang={navigator.language || navigator.userLanguage} lang={lang}>
      <Route {...auth()} isAuthenticated={isAuthenticated} />
      <Route {...app()} isAuthenticated={isAuthenticated} />
    </I18n>
  </Router>
) : (
  <Router>
    <div>Loading...</div>
  </Router>
)

const mapState = state => ({
  lang: state.i18nState.lang,
  isAuthenticated: authData.get('isAuthenticated')(state),
  isRehydrated: persist.get('isRehydrated')(state)
})

const mapDispatch = {
  setLanguage
}

export default connect(mapState, mapDispatch)(Root)

route-compose.js

import React from 'react'
import { Route, Redirect, Switch, withRouter } from 'react-router-dom'

const routeCompose = parent => route => ({
  ...route,
  path: route.path.indexOf('/') === 0 ? route.path : `${parent.path}/${route.path}`,
  auth: parent.auth,
  isAuthenticated: route.isAuthenticated || parent.isAuthenticated
})

const routesCompose = (parent, routes = []) => routes.map(routeCompose(parent))

const ComponentWrapper = ({ component: Component, routes, ...props}) => (
  <Component {...props}>
    {routes && routes.map((route, i) => (
      <Compose key={i} {...route} />
    ))}
  </Component>
)

const PrivateRoute = ({ isAuthenticated, component, routes, ...rest }) => (
  <Route {...rest} render={props => isAuthenticated
    ? <ComponentWrapper {...props} component={component} routes={routesCompose(rest, routes)} />
    : <Redirect to={{pathname: '/login', state: { from: props.location }}}/>
  } />
)

const PublicRoute = ({ isAuthenticated, component, routes, ...rest }) => (
  <Route {...rest} render={props => isAuthenticated
    ? <Redirect to={{pathname: '/', state: { from: props.location }}}/>
    : <ComponentWrapper {...props} component={component} routes={routesCompose(rest, routes)} />
  } />
)

const RouteWrapper = ({ auth, ...route }) => auth
  ? <PrivateRoute {...route} component={withRouter(route.component)} />
  : <PublicRoute {...route} component={withRouter(route.component)} />

const LayoutWrapper = ({ component: Layout, routes, ...parent }) => (
  <Switch>
    {routes && routes.map(({component: Component, ...route}, i) => (
      <Compose key={i} {...routeCompose(parent)(route)} component={props => (
        <Layout>
          <Component {...props} />
        </Layout>
      )} />
    ))}
  </Switch>
)

const Compose = ({ layout, ...rest }, context) => layout
  ? <LayoutWrapper {...rest} />
  : <RouteWrapper {...rest} />

export default Compose

routes.js

import App from './'

const routes = () => ({
  path: '',
  component: App,
  auth: true  
})

export default routes