How to remember last used pages/Tabs in react Hooks?

user_17951398 0
Viewed 181

I am making a React app with 2 menu items Home and Find(two different urls). Home consists of sub tabs - a, b, c and Find consists of d, e, f. I am working on tab 'b' from Home and navigated to find page to look something, now when I click on the Home menu on the top, I am no longer in tab 'b'. How do I remember the previous path in react hooks any help or clue?

react-hooks reactjs
1 Answers

When navigating to another page-level component, the component will unmount, the state of the component will be clear from the memory by GC.

There are 3 options:

  1. Redux - Put data in redux store, the data in redux store can be accessed by any component inside redux Provider.
  2. react context - CRUD the data in context, it's almost the same as redux.
  3. Lift state up - Lift state up to parent component of these page-level components. Pass the state and the setState into these page-level components. E.g. The parent component is App, maintain the state for page-level components, it never unmounts except refresh the application so the state will always be there.
  4. External storage - local storage, session storage, etc..
  5. URL parameters - Put the selected tab in the URL parameter, when the user access the URL, get the selected tab from the URL parameter.
user_64635580
Related