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.
Currently RestrictedRoute is setup with the redux but you can change the logic as per your requirement by editing the RestrictedRoute component defined in the "src/routes/index.js"
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>
  );
  };
ParentRoute is the parent route component and all of the routes defined as a children of the <Switch> inside this parent route component are considered as sub routes.
Where NewSubRoute will show right after the uri for the parent route following a forward slash (/) and YourComponent is the component which will render when this url is accessed in the browser.
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>
  );
};
In the above code snippet:
Dashboards is the parent route component which is loaded inside the routes/index.js
requestdUrl is the constant built with the match prop received
It is necessary to wrap the <Switch> component inside the <Suspense> Component
The fallback prop of the Suspense component uses the <PageLoader> component as a fallback UI during the rendering of the route component.
Then make sure that you load the route component with lazy() function's call.
To know more about the lazy loading please look at react's documentation here: https://reactjs.org/docs/code-splitting.html#reactlazy​
Last modified 2yr ago