[Bug]: useFetcher load method does not respect basename

[cantti]

What version of React Router are you using?

6.4.5

Steps to Reproduce

Create an app like this

import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  useFetcher,
} from "react-router-dom";

const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <App />,
    },
    {
      path: "/load",
      loader: () => {
        console.log("load");
        return null;
      },
    },
  ],
  { basename: "/base" }
);

function App() {
  const fetcher = useFetcher();
  return (
    <button type="button" onClick={() => fetcher.load("/load")}>
      Click Me!
    </button>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Expected Behavior

No errors, "load" in console.

Actual Behavior

Browser displays message to user:

Unhandled Thrown Error!
404 Not Found

[brophdawg11]

We plan to get this added - right now fetchers don't support relative routing or basename (a bit of an oversight), but we are going to do it as part of a larger initiative to move all relative (and basename) routing logic into the @remix-run/router and out of the component-layer. You can follow along (and upvote!) in this proposal: #9588

[brophdawg11]

This is handled in #10336 and should be available in the next release

[brophdawg11]

Reopening until this is released to npm

[brophdawg11]

Aligning with Remix here - will close this issue with awaiting release. This will be available once React Router 6.11 is released.

[github-actions]

🤖 Hello there,

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

[brophdawg11]

@sarahdrs Can you provide a reproduction? This seems to be working in a simple example (ensure you add /base to the sandbox window URL): https://codesandbox.io/s/weathered-dew-9uuo14?file=/src/index.js