React router sample

import React from 'react';
import Loadable from 'react-loadable';
import Spinner from 'react-spinkit';
import { Route, Switch, Redirect } from 'react-router-dom';

import AppContainer from './AppContainer';
import { Wrapper } from './styles';

const loader = <Spinner name="ball-spin-fade-loader" className="loader" />;

const AppRoutes = () => (
  <Wrapper>
    <Switch>
      <Route
        path="/login"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"LoginContainer" */ './login/LoginContainer'),
          loading: () => loader,
        })}
      />
      <Route
        path="/logout"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"LogoutContainer" */ './login/LogoutContainer'),
          loading: () => loader,
        })}
      />
      <Route
        path="/register"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"RegisterContainer" */ './register/RegisterContainer'),
          loading: () => loader,
        })}
      />
      <Route
        path="/reset-password/:rememberToken"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"ResetPassword" */ './login/ResetPassword'),
          loading: () => loader,
        })}
      />
      <Route
        path="/forgot-password"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"ForgotPassword" */ './login/ForgotPassword'),
          loading: () => loader,
        })}
      />

      <Route
        exact
        path="/get-started"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"ProductTrial" */ './getting-started/GettingStarted'),
          loading: () => loader,
        })}
      />

      <Route
        path="/get-started/:action"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"ProductSelect" */ './getting-started/GettingStarted'),
          loading: () => loader,
        })}
      />

      <Route
        path="/select-plan"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"ProductTrial" */ './selectPlan/SelectPlan'),
          loading: () => loader,
        })}
      />

      <Route
        path="/settings/google/gmail-auth"
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"GmailAuthentication" */ './settings/components/google/GmailAuthentication'),
          loading: () => loader,
        })}
      />
      <AppContainer>
        <Switch>
          <Route
            exact
            path="/"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"Dashboard" */ './dashboard/components/Dashboard'),
              loading: () => loader,
            })}
          />

          <Redirect from="/dashboard" to="/" />

          <Route
            path="/access-denied"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"AccessDenied" */ './common/routes/AccessDenied'),
              loading: () => loader,
            })}
          />

          <Route
            path="/apps"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"AppsModule" */ './apps/Index'),
              loading: () => loader,
            })}
          />

          <Redirect from="/receiving" to="/purchase-orders/receiving" />

          <Route
            name="Purchase orders"
            menu="Purchasing"
            path="/purchase-orders"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"PurchaseOrderModule" */ './purchase-orders/PurchaseOrderModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Inventory"
            menu="Inventory"
            path="/inventory"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"InventoryModule" */ './inventory/InventoryModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Suppliers"
            menu="Suppliers"
            path="/suppliers"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"SupplierModule" */ './suppliers/SupplierModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Shipments"
            menu="Shipments"
            path="/shipments"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"ShipmentModule" */ './shipment/ShipmentModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Production"
            menu="Production"
            path="/production"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"ProductionModule" */ './production/ProductionModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Sales"
            menu="Sales"
            path="/sales"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"SalesModule" */ './sales/SalesModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Report"
            menu="Report"
            path="/reports"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"ReportModule" */ './reports/ReportModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Notification"
            menu="Notification"
            path="/notifications"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"NotificationModule" */ './notifications/NotificationModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Settings"
            menu="Settings"
            path="/settings"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"SettingsModule" */ './settings/SettingsModule'),
              loading: () => loader,
            })}
          />

          <Route
            name="Admin"
            menu="Admin"
            path="/admin"
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"AdminModule" */ './admin/AdminModule'),
              loading: () => loader,
            })}
          />

          <Route
            component={Loadable({
              loader: () =>
                import(/* webpackChunkName:"PageNotFound" */ './common/routes/PageNotFound'),
              loading: () => loader,
            })}
          />
        </Switch>
      </AppContainer>

      <Route
        component={Loadable({
          loader: () =>
            import(/* webpackChunkName:"PageNotFound" */ './common/routes/PageNotFound'),
          loading: () => loader,
        })}
      />
    </Switch>
  </Wrapper>
);

export default AppRoutes;