[Bug]: "*" not matching a URL with double slashes "//"

[harxki]

What version of React Router are you using?

6.0.2

Steps to Reproduce

1. Prepare an application that uses react router v6.
2. prepare a Route with a path of *.

   { path: "/", element: <Home /> },
   { path: "*", element: <NotFound /> }
   

3. access the url with multiple slashes, such as https://example.com//a

Expected Behavior

This is also happening with Remix.
When accessing https://remix.run//a, the behavior is unintended.
Presumably, the component specified by * should be rendrering even if an unintended url string is given.

Actual Behavior

An error occurs.
I think it's because matchRoutes returns null.

[melloware]

I concur with this issue

[vreezy]

i have the same problem with hashrouter -> #%2F7

What version of React Router are you using?
6.0.2

Steps to Reproduce

<HashRouter>
 <Routes>
  <Route element={<ProcessMap {...props}/>} />
  <Route index element={<ProcessMap {...props}/>} />
  <Route path="%*" element={<ProcessMap {...props}/>} />            
  <Route path="/" element={<ProcessMap {...props}/>} />
   <Route path="/:ident" element={<ProcessPage {...props} />} />
 </Routes>
 </HashRouter>

Actual Behavior
Browser shows blank page

console: index.js:21 No routes matched location "%2F7"

on %* console : "index.js:21 Route path "%" will be treated as if it were "%/" because the * character must always follow a / in the pattern. To get rid of this warning, please change the route path to "%/*".

Expected Behavior
Browser shows ProcessMap
will be even happy if anything shows up

[YousefED]

I'm running into the same issue unfortunately. I would expect * to match any value (including double slashes, if there are any). Unfortunately it either doesn't match, or returns a matched value without the double slash.

This is fixed when I remove this line:

react-router/packages/router/utils.ts

Line 876 in 44fa91c

.replace(/^\/*/, "/") // Make sure it has a leading /

However, that causes many of the other tests to fail. I gave it a go but I lack the right understanding of the architecture to find a fix that keeps the tests stable

[brophdawg11]

This doesn't appear to be an issue anymore, I was able to setup the routes in the original issue and can match / (matches index), // (matches index), and //abc (matches splat) appropriately.

https://codesandbox.io/s/affectionate-dew-vzfdmq

I'm going to close this out, but if there is still a specific issue, please open a new issue with a reproduction.

[fillinmar]

this does not work with loading #8428

[marcellobarile]

I would double check it, as I'm experiencing this issue with v7

[stefan-stankovic-greenstate]

@marcellobarile Did you solve it?

[franciscomntll]

I got it to work by doing this

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);

  if (url.pathname.includes("//")) {
    const normalizedPath = url.pathname.replace(/\/+/g, "/");
    return redirect(normalizedPath + url.search);
  }
}