React router dom does not remount(and then re-render) the previous component when the browser back button is clicked instead it shows cached result

Viewed 13

I have a React Application, in which I have a /feed page(as the landing page) which has all sorts of filters and a /profile/:id page.

Once I apply some filters on my feed page(a filtered list of posts with profile which posted it) and then I navigate to any individual profile, it navigates me to profile.

I am using react-router-dom BrowserRouter for Navigation purpose. Here’s an simplified code for how its all routed in app

<BrowserRouter>
 <Switch>
        <Route exact path="/feed">
          <FeedComponent logout={logout}/>
        </Route>
        <Route exact path="/profile/:id">
          <ProfilesComponent />
        </Route>
        <Redirect from="*" to="/feed" />
   </Switch>
</BrowserRouter>

The problem is once I try to navigate back to the feed page by pressing back button on my browser, rather than rendering feed component from start(with cleared initial filters state), it shows me what I beleive to be a cached version of the feed page with applied filters.

I want the feed component to be freshly mounted rather than with old filter values without needing to refresh the window.location.reload()(as this would trigger additional unecessary verification requests and defeats the purpose using react router).

0 Answers
Related