Router basename is not able to match the URL because it does not start with the basename

Question

After upgrading to React Router v6, my application stopped working and I failed to find a way to achieve the same behavior with version 6.

This is the version I upgraded to: react-router-dom 6.2.1.

This is the code that worked with the previous version 5.2.0:

<Router basename="/#">
  <Route path="/login">
    <Login />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Router>

            
<Link to="/login">Login</Link>

And I navigate to http://localhost:3000/#/login. Now even http://localhost:3000 doesn't work.

This is the full error I get in the browser console:

<Router basename="/#"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.

I've read all I can find on StackOverflow, in the Github issues, the migration guide, tried a number of workarounds, but nothing seems to achieve the old behavior. It's like the v6 doesn't respect URL fragments at all.

I need the URL fragments so that when a user refreshes a page or bookmarks a URL, it actually works.

How to make this work with React Router v6?

Answer 1

This is too sad that react documentation does not specify anything regarding basename in react router v6. however, I tried something and it worked. please find below solution. cheers!

<HashRouter> 
    <Routes>
        <Route path='/app'> {/* put url base here and nest children routes */}
            <Route path='path1' element={ <Somecomponent1 /> } />
            <Route path='path2' element={ <Somecomponent2 /> } />
        </Route>
        <Route path="/*" element={<Navigate to="/app/path1" />}  /> {/* navigate to default route if no url matched */}
    </Routes>
</HashRouter>