index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import Relay from 'react-relay';
import { applyRouterMiddleware, Router, browserHistory } from 'react-router';
import { useScroll } from 'react-router-scroll';
import { IntlProvider } from 'react-intl';
import useRelay from 'react-router-relay';
import 'sanitize.css/sanitize.css';
import './index.css';
import createRoutes from './routes';

const rootRoute = {
  component: App,
  childRoutes: createRoutes(),
};

const authHeader = `Bearer ${localStorage.getItem('access_token')}`;

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://localhost:4000/api', {
    headers: {
      Authorization: authHeader,
    },
  })
);

ReactDOM.render(
  <IntlProvider locale="EN-CA">
    <Router
      history={browserHistory}
      render={applyRouterMiddleware(useRelay, useScroll())}
      environment={Relay.Store}
      routes={rootRoute}
    />
  </IntlProvider>
  ,
  document.getElementById('root')
);

routes.js

import Relay from 'react-relay';

const errorLoading = (err) => {
  console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
};

const loadModule = (cb) => (componentModule) => {
  cb(null, componentModule.default);
};

const loadAndCatch = (imported) => (location, cb) => {
  imported.then(loadModule(cb)).catch(errorLoading);
};

const ViewerQueries = {
  viewer: () => Relay.QL`query { viewer }`,
};

export default function createRoutes() {
  return [
    {
      path: '/',
      name: 'dashboard',
      queries: ViewerQueries,
      getComponent: loadAndCatch(System.import('./containers/Dashboard')),
    }, {
      path: 'plan',
      name: 'plan',
      queries: ViewerQueries,
      getComponent: loadAndCatch(System.import('./containers/PlanPage')),
      childRoutes: [
        {
          path: 'contribution',
          name: 'plancontribution',
          getComponent: loadAndCatch(System.import('./containers/PlanContribution')),
        }, {
          path: 'income',
          name: 'planincome',
          getComponent: loadAndCatch(System.import('./containers/PlanIncome')),
        }, {
          path: 'education',
          name: 'planeducation',
          getComponent: loadAndCatch(System.import('./containers/PlanEducation')),
        }, {
          path: 'insurance',
          name: 'planinsurance',
          getComponent: loadAndCatch(System.import('./containers/PlanInsurance')),
        }, {
          path: 'debt',
          name: 'plandebt',
          getComponent: loadAndCatch(System.import('./containers/PlanDebt')),
        },
      ],
    }, {
      path: 'change-password/:resetToken',

      name: 'changepassword',
      getComponent: loadAndCatch(System.import('./containers/ChangePassword')),
    }, {
      path: 'login',
      name: 'login',
      getComponent: loadAndCatch(System.import('./containers/Login')),
    }, {
      path: 'reset-password',
      name: 'resetpassword',
      getComponent: loadAndCatch(System.import('./containers/ForgotPassword')),
    }, {
      path: '*',

      name: 'notfound',
      getComponent: loadAndCatch(System.import('./containers/NotFoundPage')),
    },
  ];
}