Return to the previous position of the React page

Question

Imagine that I have a very long list called Page A. I scroll down to line 500. This row is also a link to page B, showing the details of the row. After checking the details on page B, I want to go back to page A, but I want to go back to the point where I went to page B, which is line 500. How can I achieve this behavior in a ReactJS application?

Answer 1

This can be achieved in two ways.

1. One is to simply use the id attribute of html.
2. With the help of react-router-dom and props passing.

I have listed method 1 here, suitable for beginners.

This can be achieved through id. I will list a sample html code like jsx

<div>
<p id="1">第一行</p>
<p id="2">第二行</p>
...
...
...
</div>

Assume the page usage is www.samplepage.com If I make the link concrete i.e. www.samplepage.com#1 It will take me to the first row, just like the anchor tag on the same page You can store the label in state and use it.

You can also see similar implementations on github.