Code Splitting React

routes.jsx

import { lazy } from 'react';
import { authGuard } from './guards/auth.guard';
import { paths } from './paths';

export const routes = [
  {
    path: paths.LANDING, page: lazy(() => import('../pages/landing/Landing.page')), guards: [], props: {},
  },
  {
    path: paths.AUTH, page: lazy(() => import('../pages/auth/Auth.page')), guards: [], props: {},
  },
  {
    path: paths.HOME, page: lazy(() => import('../pages/landing/Landing.page')), guards: [authGuard],
  },
  {
    path: paths.FORGOTPASSWORD, page: lazy(() => import('../pages/forgot-password/ForgotPassword.page')),
  },
  {
    path: paths.RESETPASSWORD, page: lazy(() => import('../pages/reset-password/ResetPassword.page')),
  },
  { path: paths.REDIRECT, page: lazy(() => import('../pages/_3xx/R3xx.page')) },
  {
    page: lazy(() => import('../pages/_404/E404.page')),
  },
];

Routing.component.jsx

import React, { Suspense, useContext } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';
import { routes } from './routes';
import Loading from './RouteLoading.component';
import Guarded from './guards/Guard.component';
import AppContext from '../App.context';
import Snack from '../components/snack/Snack.component';

const Routing = () => {
  const appContext = useContext(AppContext);
  const { toaster } = appContext;
  return (
    <>
      <Router>
        <Suspense fallback={<Loading />}>
          <Switch>
            {
                routes.map(
                  (route) => (
                    <Route
                        key={route.path || '404'}
                        path={route.path}
                        {...(route.props || {})}
                        exact
                        render={(props) => (
                          route.guards
                            ? <Guarded route={route} {...(props || {})} {...(appContext || {})} />
                            : <route.page {...(props || {})} {...(appContext || {})} />
                        )}
                    />
                  ),
                )
              }
          </Switch>
        </Suspense>
      </Router>
      {
        toaster?.messages?.length > 0
          ? <Snack toasted={toaster.pop()} />
          : null
      }
    </>
  );
};

export default Routing;