You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Guys, I am doing a small project and I encountered a problem.
The problem:
I am using the react router v6.4 loader to load data to my "feeds" page. User can scroll down to view feeds.
I want to restore the scroll postion when navigating away and back to "feeds" page. But because I used loader to load data, everytime I navigate back to "feeds" page (both or browser back button), it reloads the data and jumps to the top of the page.
So is there any solution to restore the scroll position while using loader? Or do I have to not use loader for this situation?
Also, I noticed a strange behavior. This happens when navigating from "feeds" page to "show feed" page or from "show feed" to "feeds". When "feeds" is at the top of the page, "show feed" is at the top as well. When "feeds" scrolls down, "show feed" scrolls down as well. This also happens in reverse (scroll "show feed", "feeds" also scrolled).
I have tried <ScrollRestoration /> with configuration, and this answer. They do not work.
<ScrollRestoration /> only helps with that strange behavior, it restores both pages to the top.
Thank you for reading. This is my first post. If there's any problem please point that out, thank you!
update: I found the problem. When I use defer(), <Suspense>, and <Await>, it seems to reload the page whenever I click back to the "feeds" page. That's why it always goes to the top of the page. Can someone teach me why this happens?
I still cannot figure out the strange behavior mentioned above. Why does it happen?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Guys, I am doing a small project and I encountered a problem.
The problem:
I am using the react router v6.4 loader to load data to my "feeds" page. User can scroll down to view feeds.
I want to restore the scroll postion when navigating away and back to "feeds" page. But because I used loader to load data, everytime I navigate back to "feeds" page (both or browser back button), it reloads the data and jumps to the top of the page.
So is there any solution to restore the scroll position while using loader? Or do I have to not use loader for this situation?
Also, I noticed a strange behavior. This happens when navigating from "feeds" page to "show feed" page or from "show feed" to "feeds". When "feeds" is at the top of the page, "show feed" is at the top as well. When "feeds" scrolls down, "show feed" scrolls down as well. This also happens in reverse (scroll "show feed", "feeds" also scrolled).
I have tried
<ScrollRestoration />
with configuration, and this answer. They do not work.<ScrollRestoration />
only helps with that strange behavior, it restores both pages to the top.Thank you for reading. This is my first post. If there's any problem please point that out, thank you!
update: I found the problem. When I use
defer()
,<Suspense>
, and<Await>
, it seems to reload the page whenever I click back to the "feeds" page. That's why it always goes to the top of the page. Can someone teach me why this happens?I still cannot figure out the strange behavior mentioned above. Why does it happen?
Beta Was this translation helpful? Give feedback.
All reactions