search

remix-run / react-router

Declarative routing for React
https://reactrouter.com
MIT License
52.69k stars 10.21k forks source link

[Feature]: escape basename #8889

Closed alexlobera closed 2 years ago

alexlobera commented 2 years ago

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:

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 commented 2 years ago

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 commented 2 years ago

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[bot] commented 5 months ago

🤖 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[bot] commented 5 months ago

🤖 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!