Link "/" does not behave like a filesystem

[WoodyWoodsta]

Context

I have an app with nested routers. There is a nav bar at the bottom of each of the nested pages, which acts as a global nav bar. One of the links on that global nav bar is to navigate to the root of the app, i.e. the top-most router.

Issue

The top-most route in the top-most router is "/", which is also the default route of the app. However, since the Link component which has path "/" is physically located in one of the nested routers, it actually navigates to the root of the nested router, not the root of the app.

Here claims that the path resolution for a Link behaves like a filesystem, but cd / will always take you to the filesystem root no matter how deep you are in the filesystem.

This means it's impossible to Link to the app root without constructing a relative path (../...) based on contextual awareness (the nav bar can be any number of levels deep in the app).

Additional findings

All other absolute paths work as expected such as "/foo" or "/foo/bar/baz", i.e. paths that start with "/". This is because for some reason, Link special cases "/".

Notes

Placing the nav bar at the root of the app, and not in each page, is not a solution based on how we would like pages to transition in our app, how the bar is controlled etc.

Proposed solution

path="/" should be passed via resolve instead of being rewritten to $base.uri, the same way path="/foo/bar would be passed via resolve despite being the same type of path (absolute). resolve immediately returns the path unchanged if it starts with /, so I don't understand why "/" should be rewritten.

[WoodyWoodsta]

I should also mention that the navigate function doesn't suffer from this issue because it passes the path directly to history.replaceState, which treats "/" as the root of the URL. This means that the link action behaviour differs from the Link component.