Defining New Route

To define a new route, the following steps should be followed:-

Open the file placed at the following path,

src/routes/index.js

There are two types of routes available in Jumbo.

Restricted Route

RestrictedRoute could be used to restrict the anonymous user from accessing any page which is only available for the authenticated user.

To define a restricted route, simply add the following piece of code at the position where you want to insert your new route:

<RestrictedRoute path="/NewRoutePath" component={YourComponent}/>

Where:

NewRoutePath is the one which will show right after base URL. You can name it based on the purpose of your route.

YourComponent is the one which will render in the content area if the user is authenticated. Otherwise, user will be redirected to the path setup in the RestrictedRoute component.

Public/Normal Route

This route will be publically accessible and do not require user to be authenticated.

To define a public route, simply add the following piece of code at the position where you want to insert your new route:

<Route path="/NewRoutePath" component={YourComponent}/>

Where:

NewRoutePath is the one which will show right after base URL in the browser address bar. You can name it based on the purpose of your route.

YourComponent is the one which will render in the content area.

Defining a sub/child route

First you should create a separate file for the sub routes you are going to define. For that, you can follow the structure Jumbo is using currently.

To define a sub route, it is recommended that you create a nested folder inside the parent route component folder and create an index.js file inside this nested folder you have create.

Consider the example in our cra-demo version.

There is a parent route component Dashboards and that's why we created a Dashboards/ folder inside the routes/ folder.

Then for all of the sub routes we created sub folders inside the Dashboards/ folder naming these with the name of their sub route components (Crypto, Listing, Crm etc.)

Then inside the index.js file of created in these sub folders, you can follow the below structure to define a sub route of a parent route:

const ParentRoute = ({ match }) => {
  const requestedUrl = match.url.replace(/\/$/, '');
  return (    
      <Switch>
        <Route path={`${requestedUrl}/NewSubRoute`} component={YourComponent} />
      </Switch>
  );
  };

Defining a route with lazy loading

If you want to implement the lazy loading to improve the efficiency and performance of your app. You can use the following code snippet from our template as a reference:

const Dashboards = ({ match }) => {
  const requestedUrl = match.url.replace(/\/$/, '');
  return (
    <Suspense fallback={<PageLoader />}>
      <Switch>
        <Redirect exact from={`${requestedUrl}/`} to={`${requestedUrl}/crypto`} />
        <Route path={`${requestedUrl}/crypto`} component={lazy(() => import('./Crypto'))} />
        <Route path={`${requestedUrl}/listing`} component={lazy(() => import('./Listing'))} />
        <Route path={`${requestedUrl}/crm`} component={lazy(() => import('./Crm'))} />
        <Route path={`${requestedUrl}/intranet`} component={lazy(() => import('./Intranet'))} />
        <Route path={`${requestedUrl}/eCommerce`} component={lazy(() => import('./ECommerce'))} />
        <Route path={`${requestedUrl}/news`} component={lazy(() => import('./News'))} />
        <Route path={`${requestedUrl}/misc`} component={lazy(() => import('./Misc'))} />
        <Route component={lazy(() => import('../ExtraPages/404'))} />
      </Switch>
    </Suspense>
  );
};

To know more about the lazy loading please look at react's documentation here: https://reactjs.org/docs/code-splitting.html#reactlazy​