[Bug]: "Failed to construct 'URL': Invalid URL" error when using lazy loading and double slash in URL

[mskrzypek]

What version of React Router are you using?

6.21.2

Steps to Reproduce

1. Prepare routing with lazy loaded component at root path:

   createBrowserRouter([
      {
        path: "/",
        lazy: async () => {
          const { Slash } = await import("./components");
          return {
            Component: () => <Slash />,
          };
        },
      },
   ]);

2. Open app in browser with additional slash at the end of the URL, ie. http://localhost:3000//

Expected Behavior

Lazy loaded component is rendered at root URL, even though there are two slashes in the URL.

Actual Behavior

Lazy loaded component is not loading, there is Failed to construct 'URL': Invalid URL error. When component is rendered with element, it is being rendered correctly.

I prepared a reproduction example: https://codesandbox.io/p/sandbox/blissful-ritchie-9szrnk

[fillinmar]

unfortunately, i have the same problem, is there any solution?

[hjonasson]

Looks like a duplicate of #11429

@mskrzypek if it helps I investigated that one slightly. It looks like official URL spec that <host>// should not be a valid URL. You wrote in Expected behavior that the Slash component should get rendered at the root. Why do you expect that in the // route? I am asking as it looks like a nested route to me if anything.