React Router：无限滚动并恢复滚动位置

Question

我正在构建一个ReactJS / React-Router应用，并寻求有关构建无限滚动和处理后退按钮/滚动位置的建议。

现在我有两页：

• ListPage包含一个项目列表，并在用户接近列表末尾时支持无限滚动（将提取新项目并将其追加到列表底部）。

• ItemPage包含项目详细信息。

我要满足一些要求：

ListPage和ItemPage的

1. URL路径名应该不同。即\代表ListPage，\item代表ItemPage；

ListingPage上的

2. 项应该是真实的<a href>链接。它们不能是简单的按钮，因为某些用户喜欢右键单击并“在新标签页中打开链接”；

3. 当用户打开一个项目时，浏览器地址栏中的网址应相应更改；

4. 当用户从ItemPage到ListPage按下后退按钮时，ListPage不应重新加载，并且以前的滚动位置应保持不变。

我要跟踪的一个好例子是https://www.producthunt.com/，但我不确定实现这一目标的好方法。

提前谢谢！