Reset state after route change

JavaScript
1

I have a react functional component in which when i navigate to from “x” route to “y” and then come back to “x” route then states of “x” component are not cleared.

App.tsx

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Navigate to="/laptops" />} />
        <Route path="/laptops" element={<Laptop />} />
        <Route path="/laptops/laptops-store" element={<LaptopsListing />} />
        <Route path="/error" element={<PageError />} />
        <Route path="*" element={<Navigate to="/error" replace />} />
      </Routes>
    </>
  )
}

and Navbar(common component for all route) has a Link

<Link to="/">
    <img alt="laptops" />
</Link>

I have some state variables in LaptopsListing component which doesn’t reset after changing route from navbar and coming back to LaptopsListing.
I tried cleaning this state in cleanup function of useeffect but still value is persistent on route change.
How can i reset component on route change?

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.