Skip to main content

Routing

Introduction​

We are using the package React Router to handle the routes of the application. Please, read the docs to get familiarized.

Depending on the type of application you are building, you may not need to use any Router at all. So, evaluate this decision with the team, and define if it will be necessary.

Dependencies​

The dependencies to use React Router are already installed, so you should be ready to go. Here's the list of the installed dependencies:

You can read the docs for a better understanding of each.

Router mapping​

The routes support components and lazy loading with next code in App.routes.tsx

  <Suspense fallback={<p>Loading...</p>}>
    <Switch>
      {Routes.map((route) => (
        <Route {...route} key={route.key} />
      ))}
    </Switch>
  </Suspense>

TODO: add support for nested routes

Routes Config Interface​

// Custom Route Interface
export interface RouteConfig extends RouteProps {
  key: string; // for identify route
  routes?: RouteConfig[]; // for nested routes
  path: History.Path;
}

// Base Interface
export interface RouteProps<
        Path extends string = string,
        Params extends { [K: string]: string | undefined } = ExtractRouteParams<Path, string>
        > {
  location?: H.Location;
  component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  render?: (props: RouteComponentProps<Params>) => React.ReactNode;
  children?: ((props: RouteChildrenProps<Params>) => React.ReactNode) | React.ReactNode;
  path?: Path | Path[];
  exact?: boolean;
  sensitive?: boolean;
  strict?: boolean;
}

Usage​

  1. Add the route path to the constants file on the core module
// modules/core/constants/routes.constants.ts
import { Home } from '../modules/Home/Home.component.tsx'

export const Routes: RouteConfig[] = [
  {
    key: 'HOME', // key name for identify route
    path: '/', // path
    exact: true,
    component: Home // view component or container
  },
  ... more routes
];

Lazy Loading Routes​

React has its own recommendations around Code Splitting, in order to get ahead of the performance problems. One simple improvement that we can apply on our app, is Lazy Loading components.

This will allow our app to not load the component's bundle (or module) until it needs to render it on the screen.

We can do this through React.Lazy and Suspense.

Usage​

On our application we will apply a route-based code splitting, meaning that we will lazy load components at a route level.

We just need to follow a few steps:

  1. Add the route path to the constants file on the core module
// modules/core/constants/routes.constants.ts
export const Routes: RouteConfig[] = [
  ... others routes
  ...
  {
    key: 'KEY_ROUTE',
    path: '/my-route',
    component: lazy(() => import('../modules/my-module/MyComponent.container'))
  },
  ... others routes
];

Helper appRoutes constant​

To use the routes defined in the core, you can call appRoutes Object. This return an Object with keyRoute and RouteConfig;

import { appRoutes } from '../core/constants/routes.constants';

// appRoutes; // > { [key: string]: RouteConfig }
// appRoutes = { KEY_ROUTE: RouteConfig, ... others keys and routeConfigs ... } 

// or using destructuring
const { KEY_ROUTE } = appRoutes; // > KEY_ROUTE = RouteConfig;
// Ex: KEY_ROUTE.path