What are the best practices for react-router to return a list page on an e-commerce project?

my app is made in the way of web+ shell. The web end uses the framework of react + react-router. Now there is a problem:

E-commerce websites usually have home pages, album pages, product list pages, product details pages, often home pages and product list pages are very long, so you need to scroll the screen. At this time, if you go to the product details page and return to the product list page, the user actually wants to return to the location he browsed last time.

so now the problem arises. If the home page route ("/"), the commodity list page route"/ list/123" and the product details page route ("/ products/123") are switched due to parallel routes, the original route unmount will occur. Therefore, if you return to the next level route, the data can only be requested after the component didMount , resulting in another request for data. And the browsing position of the page will be relocated to the top. This makes the user experience very unfriendly.

I have done a job before, taking the home route as the parent route and the other route as the child route, so that entering from the home page to other pages will not cause the home page component to be ""unmount"" . The actual effect is still good.

although I can solve the problem of parent-child routing on the home page, there are also many pages that have the same return to the superior route after switching routes, and the higher-level routing component requests data again . I can"t always use the parent-son routing nesting method, which will make the project framework very complicated.

do you have a mature solution to this problem? you can give me a demo library of gitbub or links to other people"s articles.

in addition, can react-native solve this problem, and what are the pitfalls?


well, I looked at the question in the sidebar, https://codeshelper.com/q/10.

.
Menu