[Feature]: escape basename

[alexlobera]

What is the new or updated feature that you are suggesting?

We should be able to remove the basename from <Link to in some cases. While it's very useful to provide a basename when the app is served from a sub-directory on the server, we may want to disable this feature in some Links. For instance, if the server serves two React Router apps in two different sub-directories and we want to have a client-side (soft) navigation between them.

Example

git clone git@github.com:alexlbr/micro-frontend-react-router-example.git
cd micro-frontend-react-router-example
yarn && yarn dev

The example is running two React Router apps inside a "parent" Nextjs application. React Router App 1 is served from the sub-directory "/react-router-1-sub-pages". React Router App 2 is served from the sub-directory "/react-router-2-sub-pages".  The Nexjs app is served from the root directory "/". 

Steps to reproduce my problem:

• Navigate to http://localhost:3000
• Click on "React Router 1"
• Click on "Lola". Navigation works inside React Router 1 because basename is "/react-router-1-sub-pages"
• Click on "React Router 2" at the top of the page
• Click on "Visit React Router 1" ❌ . I'd like to escape basename in this case

Why should this feature be included?

This would make it possible to use React Router with micro-frontends and:

1. Have soft navigations between different apps.
2. Have multiple independent Routers.

[timdorr]

This was something we specifically changed in #7462.

The best way to implement this now is to just use plain <a> links when going to a separate frontend. Having a special character will cause problems for users that actually want that character in their URLs, so we can't support that.

[alexlobera]

Thanks for your quick response @timdorr. I see that altering the URL as I suggested could cause problems to other users, well spotted! 7462 makes sense if you only have 1 router, which is not my case.

If I add a plain <a> as you suggest then I have a full page reload, which defeats the point of using React Router in my applications 😅. Therefore, the solution you provide doesn't solve the problem for modern web apps.

I'm sure we'll find a better solution given that Remix is "focused on web standards and modern web app UX" 🙂 . How about adding a prop to Link to opt-out of basename without altering to? Example: <Link noBasename to="/some-path". I'm happy to help and give it a go if you are OK with it. Thanks.

[github-actions]

🤖 Hello there,

We just published version 6.22.2-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.22.2 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!