I find it hard to use window.location.search together with HashRouter as it always ends up like this: localhost:3000/?id=1#/person
With BrowserRouter it was no problem using window.location.search. Is there any way to make search params appear like this with HashRouter: localhost:3000/#/person?id=1
Search params works fine with HashRouter as you need:
Routes configuration:
const Routes = () => {
return (
<>
<HashRouter>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/person?id=1">Person 1</Link>
</li>
<li>
<Link to="/person?id=2">Person 2</Link>
</li>
</ul>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/person">
<Person />
</Route>
</Switch>
</HashRouter>
</>
)
}
Generated routes in browser when you click the links:
Home: http://localhost:3000/#/
Person 1: http://localhost:3000/#/person?id=1
Person 2: http://localhost:3000/#/person?id=2
Person component, where you can access search params:
import React from 'react'
import { useLocation } from 'react-router-dom'
function Person() {
const location = useLocation()
const searchParams = new URLSearchParams(location.search)
return (
<>
<div>Person, id: {searchParams.get('id') ?? 'No ID'}</div>
</>
)
}
Here is a sandbox