Links inside RouterProvider with basename have inconsistent href handling

[morleytatro]

Provide a general summary of the issue here

When wrapping an app with RouterProvider, the basename provided to the top-level router (eg. from react-router-dom) is used when the handler is fired. However, the actual link target shown in the browser is the href prop without the basename prepended.

🤔 Expected Behavior?

I would expect the link's href attribute in the browser to match the actual destination of the navigation.

😯 Current Behavior

• If you prepend the basename in the link's href, it gets doubled on click, and the destination is non-working.
• If you don't prepend, the navigation works as expected, but is missing the basename in the attribute.

💁 Possible Solution

One option might be to allow RouterProvider to take in a basename so that effected links, when clicked would ignore that part of the path even though it's there.

🔦 Context

It prevents using the useLink hook in apps that have a router basename and are using client-side routing.

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/react-aria-repro-w3vclt

https://w3vclt-5173.csb.app/base/one

I've outlined the working (non prepended) and non-working (prepended) links.

Version

3.29.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS 13.5.2

🧢 Your Company/Team

FigureTechnologies

🕷 Tracking Issue

No response

[rgalanakis]

I just ran into this as well. I solved it like this (after many hours figuring out the problem):

import { useNavigate } from "react-router-dom";
import React from "react";

export default function useFlexiNavigate() {
  const rrnavigate = useNavigate();
  const navigate = React.useCallback(
    (href, options) => {
      if (BASENAME && typeof href === "string" && href.startsWith(BASENAME)) {
        href = href.slice(BASENAME.length);
      }
      return rrnavigate(href, options);
    },
    [rrnavigate],
  );
  return navigate;
}
const BASENAME = import.meta.env.BASE_URL.replace(/\/$/, "");


// Then in your routing code:

  const navigate = useFlexiNavigate();
  return (
    <RouterProvider navigate={navigate}>
      <AppRoutes />
    </RouterProvider>
  );

I haven't tested extensively yet but it seems to do the job.