Scroll restoration doesn't work when changing URL without Links

[dziugas-liaudinskas]

Hello, I encountered a problem in my Remix app and cannot solve it, so here I am asking for community help.

I have an e-shop where user can manipulate products list with filters and pagination (for that I use Algolia's InstantSearch). When interacting with them request through Search Provider is made, the URL is changed (eg adds ?page=7) and new results can be seen. Almost everything works as expected.

My issue

If the user navigates to a different page, scrolls down, clicks on a product, the product page opens, then the user clicks the browser's arrow back and is redirected back to the page where he/she was but at the top of it and not where he/she left (I use ScrollRestoration). Now if the user does the same steps everything works as expected (because after clicking the arrow back or reloading that page is written in the router's history?). If I understand correctly this happens because when using filters or pagination browser history is updated but the router's history is not. When pagination changes the URL I can intervene there and get a new updated URL. The problem is that I don't know how I can "add" it to the router's history as the history.push is deprecated. Of course, I don't want the page to be reloaded.

Steps to reproduce:

1. Clone this repository and npm i && npm run dev;
2. Go to the /category/speakers page;
3. Without scrolling press on 7 page and then scroll to the bottom of the page;
4. Click on the last product on the page and then click the browser arrow back to navigate back to the products list;
5. See that you are on the top of the page and not where you left;
6. Repeat the 4th step and now you see that you get back where you left off;

Screen.Recording.2023-07-27.at.11.36.48.mov

When using pagination or filters getKey method in <ScrollRestoration /> is not called (app/root.tsx file);
When using pagination or filters I can get a new URL in the commented-out push method at the app/components/Search.tsx file but I don't know what to do with it there.
At the bottom of the page, you can change the category (speakers <-> TVs) with a Link, and then when clicking the arrow back scroll restoration works and users appears and the bottom of the page where he/she left.

If anyone had a similar issue or knows how I can solve it I would highly appreciate it if you would share your knowledge because that's a quite big issue for us and I'm stuck.

[dziugas-liaudinskas]

Still looking for any help