Client side routing

Also see wiki/Server-side-routing.

For client-side routing we use Reach Router (made by Ryan Florence, one of the key engineers from the original React Router team) primarily as it allows nested routers - which facilitate the hierarchal URL structures we use for our wiki/Client-side-'Flows').

app/client/components/user.tsx

The User component in this file, contains all the components which represent the different pages of our system, each with a path attribute and all wrapped in a Router component.

Where these components are nested the path is relative to the parent, as explained in wiki/Client-side-'Flows'.

You will notice lots of looping over ProductTypes, typically to produce the routes for the 'Flows' which have the urlPart of the product as part of the path (e.g. /payment/membership)

Note that we don't have a 'not found' page and instead just redirect back to the root (/) - which hosts Account Overview.

This file exports...

• BrowserUser - brings together User from above and AnalyticsTracker. It's used in user.ts which is loaded in app/client/user.ts where the client-side React hydration after SSR takes place.

• ServerUser - takes in a url param (see wiki/Server-side-routing) and wraps the User component in a ServerLocation which facilitates wiki/Server-side-rendering.