React-Router out of sync with window.location?

Viewed 260

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!

0 Answers
Related