在 React 中导航到新页面而不丢失当前页面上的数据

Question

我对此进行了一些挖掘，并且还查询了 chat-gpt （哈哈），但我似乎找不到任何解决该问题的资源。我想做的很简单：在页面 A 上，我从服务器加载 100 个项目的列表；我可以单击每个项目，这将使我能够导航到该项目的新详细页面。当我单击后退按钮时，我不想再次加载所有 100 个项目、丢失滚动位置等。

我知道我可以维护滚动位置的状态，并且只需在 useEffect 中维护

scrollTo()

，但对于实际数据来说，它会有点棘手，因为我不想为我的 100 个项目的列表存储数据（可能是生产数量远多于 100 个）。

有没有办法在反应中巧妙地做到这一点？我目前使用

useNavigate()

钩子进行导航。

编辑-- 我需要说明一些事情，使这成为一个真正的问题。页面 A 以 10 个为一组进行分页。我单击一个“更多”按钮，该按钮会从服务器加载接下来的 10 个项目。假设我单击了第 50 号元素。当我按下后退按钮时，我想返回到该元素。 useEffect 会使得只有前 10 个元素被再次加载

Answer 1

尝试使用React Router Dom。每个项目都可以是导航到该项目的新详细页面的路线。

在此输入链接描述