Skip to main content

Routing

There is a specific url route for every page and tab within a page in Atlantis. Each has a specific url route. When needed, we also have routes for specifc states of a view or tab.

For example, when viewing a document request you are taken to the document request page, with the Inbox tab selected, but the content that is shown is not the inbox but instead, the document request to be completed. There is also a third state of the inbox tab creating a new document request.

The url routes for each of these states in this example are as follows:

  • /docrequests
  • /docrequests/inbox
  • /docrequests/new
  • /docrequests/inbox/:id

Where is routing setup?

In the app.tsx file there is a LayoutRoutes function component. In it, all the different routes in the app are defined.

You will notice that we verify the logged in user has permission to go to the route before we actually add it. This ensure that they will be taken to a not found page in the case they are accidentally routed somewhere they shouldn't have permission to.

In the LayoutRoutes component routes have been grouped by the page they are on.

In the app component (also in app.tsx) you will also notice that we do not render the layout route components until the logged in users account settings and system permissions have been loaded to ensure routes are not rendered until we can validate if they have permission to navigate to a specific route.

RoutePaths.tx

In the RoutePaths.tx folder there are many enums (and types) related to routing. 

RoutePath type

The RoutePath type represents each and every route that can be navigated to in Atlantis. The RoutePath type is actually not an enum, though in usage it operates as one. It is a defined type and is actually a concatenation of many enum types. RoutePath is composed of an enum that represents the route of each page, unless the page doesn't have tabs in which case the route is part of an enum name SingleRoute. For example, we have a DocumentRequestRoutePaththat currently looks like the following.

export enum DocumentRequestRoutePath {     DocumentRequestIndex = '/docrequests',     DocumentRequestInbox = '/docrequests/inbox',     DocumentRequestNew = '/docrequests/new',     DocumentRequestView = '/docrequests/inbox/:id',     DocumentRequestTemplates = '/docrequests/templates',     DocumentRequestTemplateNew = '/docrequests/newTemplate',     DocumentRequestSent = '/docrequests/sent',     DocumentRequestAccountRequests = '/docrequests/all', }

You can see there is a route path the for the page itself, others for each tabs, and even others for states within these tabs.

Why is this helpful?

This allows us to constrain route paths when needed. For example, I can have a function that can accept RoutePaths of a specific page (like document requests). I don't have to worry about handling the other 50+ route paths that exist, only the document request route paths.

RouteParams

In the RoutePaths.tx folder there are enums that end with RouteParams. These represent the variables in route paths that have them. For example, for the path '/docrequests/inbox/:id' there is a variable name ':id'. You can use DocumentRequestRouteParams.Id enum whenever you need to, so you don't have to have magic string anywhere. This is especially important when routing (see How do I route to a specific location?).

Other enums

At the time of this writing, there is only one other type of enum. It is called SelectedDetail . It's purpose is to be used in conjuction with the DocumentRoutePath.GoToNodeDetail (/documents/node/:nodeId/:selectedDetail). The values of this enum are all the valid values that can be used for the :selectedDetail variable.

There will likely be other enums that serve a similar purpose (and maybe even other purposes) and feel free to add other enums and types to this file to make routing as clean as it can be.

How do I route to a specific location?

There currently 2 ways we do routing.

  1. useNavigate() hook.
    • navigate(RoutePath.RouteWithoutVariable) - route that does not have a variable
    • navigate(RoutePath.RouteWithSingleVariable.replace(SomeRouteRouteParams.paramName, valueToReplaceVariableWith);
    • navigate(
           RoutePath.RouteWithMultipleVariable
                .replace(SomeRouteRouteParams.parameName1, param1Value)
                .replace(SomeRouteRouteParams.parameName1, param1Value)
      );
  2. Using Link (import { Link } from 'react-router-dom';) for use with Component Library components.
    • Example from AccountNavMenuItem.tsx
      <Card.Link className='ms-2 my-3' tag={Link} to={RoutePath.UserSettingsIndex} icon={{ ...settingsIcon, size: 'lg' }}>{t(NavMenuKeys.MySettings)}</Card.Link>
    • you need to specify that the tag property is 'Link', and the to is RoutePath.Route. 
    • when a route has variables, you will need to replace the variables as shown in the useNavigate example above.

How do I add a route?

 

Back to top