How to create absolute route from an unknown but relative base path

Question

I have a micro-frontend application being loaded into one of several different host apps via Module Federation using webpack. The MFE is agnostic to its hosting app, by design, but through Module Federation, the react router is shared between the host and the MFE.

This means that the MFE could be hosted at one of 2 potential routes, like this:

/container/project/<pId>/users
/container/subscriptions/<sId>/project/<pId>/users

though theoretically more routes could be added in the future, and I'm looking for a solution that is future-proof, so for practical reasons, the MFE does not know what its base-path is (only that one likely exists).

Within the MFE, there are a series of base routes, along with nested routes. Something like this:

/new
/all
/invite
/<uId>
/<uId>/contacts
/<uId>/projects
/<uId>/subscriptions

What I would like to be able to do, is have a series of navigation links for the top-level routes (new, all, and invite) that act as base-routes relative to this MFE, but whenever I try to do that, they end routing from the root of the entire application. So a link like this <Link to="/new"/> will route the user to https://application.com/new instead of https://application.com/container/project/<pId>/users/new

And if I of course can't use a relative link, since the url within my MFE could be at various different hierarchical levels. So a relative link like this <Link to="../new"/> would result in these navigations, depending on where the user is

/invite           =>    /new
/<uId>/contacts   =>    /<uId>/new

the second example there being of course very wrong.

Is there a way to create an anchor point within the react router tree that can act as a base path for my MFE, so that I can wrap my MFE in this anchor point and treat all absolute routes relative to that anchor point?

Answer 1

I may have had a bad react component structure; my navigation links were being rendered outside of the react routes, but by rewriting the structure and leveraging nested routes and the <Outlet/> component, I think I effectively accomplished my goal - the navigation links are now all relative to their current location within the router tree structure, which is what I wanted in the first place!

so now <Link to="new"/> properly always routes to <unknownBasePath>/new no matter where it's clicked from!