Question: How can we improve the way we generate links?

[dmfalke]

The following needs refinement.

Creating links within the context of a web app can be error prone. Our websites are designed as a collection of apps that are integrated into a single page application via a route configuration. In many cases, the same app code can be used under multiple routes. This can make it challenging with an app needs to navigate to different pages. It is tempting to hardcode an absolute path (relative to the SPA (single page application) root url), but this does not work well if an app is used under more than one route. It is also tempting to use ../ prefixes to make relative paths, but this does not work well when the component at different nesting levels.

Some options that come to mind:

1. Pass a baseUrl around to allow absolute paths to be constructed. The baseUrl would be relative to the spa root url.
2. Add React context to set a baseUrl for that component subtree. This can be used implicitly by a special link component; or it could be explicit by accessing the value via a hook, or a callback function passed to the link component.