[Bug]: absolute redirect fails while using base url

[amsal]

What version of React Router are you using?

6.8.0

Steps to Reproduce

• Have a react router application hosted in a sub directory e.g. https://example.com/app1
• https://example.com and https://example.com/app1 are two independent applications. Served using a reverse proxy

app1 is the base path and it is set using basename

const router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      element: (
        <>
          <div>Root</div>
          <Link to="/logout">Logout</Link>
        </>
      ),
    },
    {
      path: "/logout",
      loader: LogoutLoader,
    },
  ],
  {
    basename: "app1",
  }
);

export const LogoutLoader = async () => {
  return redirect("https://example.com");
};

• Go to logout url https://example.com/app1/logout

Expected Behavior

LogoutLoader should redirect user to https://example.com as if it was an external redirect to somewhere like https://google.com. It should be a redirect via browser instead of react-router.

Actual Behavior

React router changes the browser URL but the content of the site is still from https://example.com/app1 instead of https://example.com. In the browser dev tools, no request is made to redirect URL.

Possible bug might be here

react-router/packages/router/router.ts

Line 3130 in 6120207

if (url.origin === currentUrl.origin) {

[timdorr]

This should be fixed by #10033, which is available via 6.8.1-pre.0

[amsal]

hi @timdorr

This doesn't seem to resolve the issue (v6.8.1). I have created a minimal repo to reproduce this.

https://github.com/amsal/rr-basename-redirect.git

Assuming port 5173 is free and used by Vite for this.

• run npm run dev
• go to http://localhost:5173/app1
• click Logout link on the page
• redirect to http://localhost:5173 is not done as an external redirect

Thanks

[brophdawg11]

This is arguably arguably part of #9859 but with the basename we should be able to deduce that this is not an in-app URL and fall into the window.location.assign flow. If anyone is interested in taking a stab at a PR for this, the offending code is inside startRedirectNavigation:

    if (isBrowser && typeof window?.location !== "undefined") {
      let newOrigin = init.history.createURL(redirect.location).origin;

      // ⚠️ This should probably include "OR pathname doesn't start with the basename"
      if (window.location.origin !== newOrigin) {
        if (replace) {
          window.location.replace(redirect.location);
        } else {
          window.location.assign(redirect.location);
        }
        return;
      }
    }

[tomfridental1]

Any update on this one?

[github-actions]

🤖 Hello there,

We just published version 6.8.2-pre.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!

[tomfridental1]

Seems the issue is not fixed, basename: '/v2' <Link to="https://sameorigin.com/someroute" /> still considered as internal url

[brophdawg11]

This issue is for redirect, not Link 😉 . I can take a look into handling this in Link as well though

[tomfridental1]

That will be great 😎

[github-actions]

🤖 Hello there,

We just published version 6.8.2-pre.3 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!

[tomfridental1]

Tested pre.3 looking good, everything works as expected. thank you!

[github-actions]

🤖 Hello there,

We just published version 6.8.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!