Navigation

We use React Router V6 to deal with the navigation in the app.

You can find all the route definitions in the router file : ~/core/router/index.js.

Route definitions

Path definition

Always define the route as const and use it wherever you need it in the app :

// ⛔️ No
navigate("lago-route");

// ✅ Yes
const LAGO_ROUTE = "/whaterver";

navigate(LAGO_ROUTE);

// --------------------
const id = "param";
// ⛔️ No

navigate(`/route-with-param/${id}`);

// ✅ Yes
import { generatePath } from "react-router-dom";

const WITH_PARAM_ROUTE = "/route-with-param/:id";

navigate(generatePath(WITH_PARAM_ROUTE, { id }));

Note : all route const name should follow the following pattern : {ROUTE_NAME}_ROUTE

Route object

The route object can be of the following pattern :

import type { RouteObject } from "react-router-dom";

interface CustomRouteObject extends Omit<RouteObject, "children" | "path"> {
  path?: string | string[]; // Several paths can render the same Component
  private?: boolean; // Route is accessible only when user is logged in
  onlyPublic?: boolean; // Route is only accessible when user is NOT logged in
  redirect?: string; // Act as an alias but implies a redirection (used to maintain an old route)
  children?: CustomRouteObject[]; // Child routes -- used when the main component is a layout for example
}

Navigation options

disableScrollTop

React router has a behaviour on navigation, particularly with layouts : if you scroll in a page and then navigate, it will keep the position of the scroll. You can find more infos about it from the V5 doc and multiple issues/questions. In our app, the logic to prevent this behaviour is located in the ~/layout/SideNavLayout file.

But on some cases we would like to keep the scroll (ex while navigating through tabs on a particular page). To do that, you can use the following code while navigating :

navigate(WHATEVER_ROUTE, {
  state: { disableScrollTop: true },
});

History

We could use the basic ReactRouterHistory, unfortunately, to date it misses some informations (ie: access the previous route, is there a previous route in app, if no route add a fallback...) So we've developed a custom route history that you can fin in the ~src/core/apolloClient/reactiveVars/locationHistoryVar.ts file. This just allows to keep track of the in app history.

useLocationHistory Hook

There is then a hook that gives you access to 2 functions :

goBack Allows you to goBack to a previous route, pass a fallback if no route is set and exclude some routes to avoid going back to them

import { useLocationHistory } from "~/hooks/core/useLocationHistory";

const ComponentToGoBack = () => {
  const { goBack } = useLocationHistory();

  return (
    <>
      <Button
        icon="arrow-left"
        onClick={() =>
          goBack(CUSTOMERS_LIST_ROUTE, {
            exclude: [CUSTOMER_DETAILS_TAB_ROUTE, CUSTOMER_DETAILS_ROUTE],
          })
        }
      />
      {/* On click, user will be redirected to the previous route that is not CUSTOMER_DETAILS_TAB_ROUTE or CUSTOMER_DETAILS_ROUTE. If there is no route left, user will be redirected to CUSTOMERS_LIST_ROUTE */}

      <Button
        icon="double-arrow-left"
        onClick={() =>
          goBack(CUSTOMERS_LIST_ROUTE, {
            previousCount: 2,
          })
        }
      />
      {/* On click, user will be redirected to 2 previous route from current location, if there is no route in app available, willbe redirected to CUSTOMERS_LIST_ROUTE */}
    </>
  );
};

onRouteEnter You should probably never use this one, it's only used in the RouteWrapper component to make sure user won't access a route that shouldn't be accessible for him/her according to route config.