I'm having trouble getting client-side routing to work properly (with react-router-dom@5.2.0)
I have an <Application> component which returns:
<BrowserRouter>
<Switch>
<Route path="/:filter/:id">
<Something...>
</Route>
<Route path="/">
<SomethingElse...>
</Route>
</Switch>
</BrowserRouter>
Whenever I navigate to [localhost]/rating/good, things work as expected: the proper route is matched (ie. "/:filter/:id") and the <Something> component is rendered.
I have a button which clears what I call filters; whenever I click on it:
- I update the URL with
useHistory().push('/')
The change is immediately observed - I update of my AppState, which triggers an update of my
<Application>component, which in turn means<BrowserRouter>and<Route>are updated.
And that's when I observe something I didn't expect:
The same route as before (ie. path="/:filter/:id") is matched and the <Something> component is rendered -- despite the current URL pathname being "/".
Is this the expected behavior?
If yes, what is react-router using to match routes if not the current window.location?
Now I've got it to work (I think) by updating <Application> with:
const location = { ...useLocation(), pathname: window.location.pathname }
And passing that location object as such:
<Switch location={location}>
But it feels like I'm doing something wrong and that it should have worked without me fiddling with the location object.
Thanks for any hints!