useFetcher.submit causes 404 when basename is set in react-router.config.ts

[fushihara]

Reproduction

stackblitz
https://stackblitz.com/edit/2025-10-17-41732624-836b-4844-4054-e103b9099801?file=src%2Fapp%2Froutes%2Farticle.tsx

When basename is specified in react-router.config.ts, calling useFetcher().submit() causes the client to navigate to a 404 page.
This issue does not occur when no basename is set.

2025-10-17-01-09-42.mp4

After tracing the execution in debug mode, I found that the problem seems to originate in the normalizeTo function.
It appears that the normalizedPath string is being constructed incorrectly.
For example, when I set:
basename = "/react-router-base/"

the resulting value of normalizedPath becomes:
/react-router-base/react-router-base/?index
—notice that basename is duplicated.

If I manually change the value of normalizedPath in the debugger to:
/react-router-base/?index
the 404 behavior disappears and everything works correctly.

I filed another issue yesterday, but I realized that I described the wrong root cause.
This new issue correctly points out the actual problem.

System Info

from stackblitz

❯ npx envinfo --system --npmPackages '{vite,react-router,@react-router/*}' --binaries --browsers
   System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: 7.9.4 => 7.9.4 
    @react-router/node: 7.9.4 => 7.9.4 
    @react-router/serve: 7.9.4 => 7.9.4 
    react-router: 7.9.4 => 7.9.4 
    vite: 7.1.10 => 7.1.10

Used Package Manager

npm

Expected Behavior

navigation to 404 page.
↓ here is a movie
https://github.com/user-attachments/assets/45a48a82-75ce-40da-a450-ecf167300647

Actual Behavior

When calling fetcher.submit(), the page should not switch to a 404 screen.

[rururux]

It certainly might be a bug, but in the first place, I don't think you need useFormAction if you want to submit to the current route.
Also, useFetcher's submit() is designed to always return a Promise<void>, so if you want to use the return value, you need to reference fetcher.data.

export default function Page({ params, loaderData }: Route.ComponentProps) {
  const fetcher2 = useFetcher();

  useEffect(() => {
    console.log(`server side response?:`, fetcher2.data);
  }, [fetcher2.data]);

  return (
    <>
      test
      <hr />
      <hr />
      <Form method="post" navigate={false}>
        <input type="hidden" name="title" defaultValue="foo" />
        <button type="submit">server-side-process-1</button> ← watch server side
        console
      </Form>
      <hr />
      <div>
        <button
          onClick={() => fetcher2.submit({ title: 'bar' }, { method: 'post' })}
        >
          server-side-process-2
        </button>{' '}
        ← click to redirect 404 why?
      </div>
    </>
  );
}

[fushihara]

@rururux
Thanks for your reply!
I understand that to use the return value of a fetcher, I need to reference fetcher.data. That part is not the issue here.
The current problem is that the moment I execute fetcher2.submit, the screen immediately switches to a “404 not found” page.
When I traced the process in debug mode, I found that the issue is an incorrect value in the normalizedPath variable when a basename is set.
As a result, the server-side action is never executed, and fetcher.data remains empty.
This clearly shows that the fetcher isn’t functioning properly.
There’s no issue when basename is not specified.

[rururux]

I see. I can confirm that a problem is indeed occurring.
It looks like the basename is being set again on the following line:

react-router/packages/react-router/lib/router/router.ts

Lines 4536 to 4538 in 64f82f1

	if (basename !== "/") {
	path.pathname = prependBasename({ basename, pathname: path.pathname });
	}

I will investigate a bit further.