[v6][Bug]: HashRouter and wildcard route "*" does not match when provided with URL with characters between "#" and "/" eg. "#unknown/"

[hrstkatomas]

What version of React Router are you using?

6.2.1

Steps to Reproduce

<HashRouter>
	<Routes>
		<Route path="world" element={"Hello World"} />
		<Route path="*" element={"World not found"} />
	</Routes>
</HashRouter>

And navigate to hash #unknown/world

Expected Behavior

I expect World not found to be rendered. I expect wildcard route to match every unknown path so I can notify user about the problem.

Actual Behavior

Wildcard route <Route path="*" does not match. Shows blank page.

This issue is possibly related to issues #8428 and #8517, but neither mentions HashRouter explicitly. The closest described issue is @vreezy's #8428 (comment)

[vreezy]

Btw my workaround:

   useEffect(() => {
      if(window.location.hash.indexOf("#%") > -1 ) { 
         window.location.hash = ""; 
      }
   });

[Ellie-Yen]

In HashRouter, I face similar problems in the following structure

<HashRouter>
        <Routes>
          <Route path="/" element={<Layout/>}>
            <Route index element={<HomePage/>} />
            <Route path='xxx' element={<XXX/>} />
            <Route path='*' element={<ErrorPage/>} />
          </Route>
        </Routes>
</HashRouter>

In the above structure, it works as follows:

✔matched by path='*', work fine

'https://localhost:8000/#/unknown'
'https://localhost:8000/#/unknown/123'

---
❓expected to be matched by path='*';
but actually is matched by outer path='/' and shows index element

'https://localhost:8000/unknown'
'https://localhost:8000/@'
'https://localhost:8000/@unknown'

---
❌failed, shows blank pages,
throws 'No routes matched location "unknown" ' warns.

'https://localhost:8000/#unknown'
'https://localhost:8000/#unknown/123'

(a server error will occur for URLs like 'https://localhost:8000/@/unknown', 'https://localhost:8000/unknown/123',)

expected behavior

path='*' should match following

'https://localhost:8000/#unknown'
'https://localhost:8000/#unknown/123'
'https://localhost:8000/unknown'
'https://localhost:8000/@'
'https://localhost:8000/@unknown'

index element should only be shown when the URL is

'https://localhost:8000/'

[github-actions]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[brophdawg11]

#unknown/world is not valid here since hash router expects the hash to be a valid path starting with a slash (as a normal non-hash path would). #/unknown/world works as expected.

[filthyrichmoneky]

@brophdawg11 great, but what if for whatever reason the pages goes to /#abc? It can't be handled and we can't even redirect the user to 404. It certainly should not be marked as closed and resolved.

[brophdawg11]

Can you elaborate on the use-case in which your app is ending up at a malformed hash path like #abc instead of #/abc?

[filthyrichmoneky]

There is for example a 3rd library, which upon some interaction returns back to our app (website) with a path like .com/#8ca38640 (I'm assuming they're using that data somehow). This makes however the page go blank, which confuses users.

[vreezy]

Can you elaborate on the use-case in which your app is ending up at a malformed hash path like #abc instead of #/abc?

Sharepoint online. I used the Router in a spfx. If you set a page in edit mode it add some not working routes to the url. Sharepoint didnt use a router. It used it for other behaviors