Question 236236 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Navigate to new page in React without losing data on current page

I have done some digging on this and I have also queried chat-gpt (lol) but I cannot seem to find any resources that tackle the problem. What I am trying to do is simple: on page A, I load a list of 100 items from my server; I can click into each item which would enable me navigate to a new detailed page for that item. When I click the back button, I do not want to have to load all 100 items again, lose my scroll position etc etc.

I know I can maintain state for my scroll position and just scrollTo() in my useEffect, but it gets a little trickier for the actual data because I don’t want to have to store data for my list of 100 items (could be a lot more than a 100 in production).

Is there a way to neatly do this in react? I currently navigate using the useNavigate() hook.

EDIT–
I need to state something that makes this a real problem. Page A is paginated in batches of 10. There is a ‘more’ button I click which loads the next 10 items from the server. So let’s say I click into element number 50. When i press the back button, I would like to come back to that element. The useEffect will make it so that it’s only the first 10 elements which are loaded again

Tags:

2

Answers


  1. 0

    Try to use React Router Dom. Each item can be a Route that navigates to a new detailed page for that item.

    enter link description here

    Login or Signup to reply.
  2. 0

    I have a similar problem in my work, in that situation I used the "react-query" method from "react-query", which stores all the data loaded from the server in the cache, so when you come back to the previous page we just get the data from cache.

    Link: react query npm package

    I don’t know whether it works for you or not, just sharing my thought.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search