javascript - 如何在浏览器中使用后退和前进按钮浏览页面而不丢失 NextJS 中的页面状态？

在 NextJS 中返回上一页时（使用浏览器的后退按钮时）如何恢复过去的状态？或者一般来说，当使用浏览器的后退和前进按钮在页面之间来回移动时，如何恢复状态？

我有一个项目，我在网格中展示了很多游戏截图（“游戏截图”类似于 Pinterest 的别针）。为了在从 Sanity 获取数据时没有很长的等待时间，我不会一次获取所有数据然后将其this.props存储在this.state.

这是我的情况：

使用加载/game页面
页面从 Sanity 数据库中获取 30 个缩略图，将它们置于状态this.state.gameshots并呈现它们
用户点击缩略图，网址更改为/game?gameshotIndex=14（顺便说一句，这是真正的网址，但它/gameshot/d6fg8a456g在网址栏中显示）
当 url 更改时，会显示一个模式窗口，其中包含游戏截图：this.props.url.query.gameshotIndex && <Modal> ... </Modal>
用户点击模式内的标签链接并转到/tag/d65g4d56gff4g6jfg
用户单击浏览器的后退按钮，并收到错误，因为状态/game已丢失，因此页面this.state.gameshots不需要显示模式。如果它们被一次加载并存储在this.props.gameshots其中，那么你将不得不一次加载所有游戏截图，即使它们有 100000000 个——这意味着巨大的 TTFB 和缓慢的页面加载。

所以我的问题是：如何在浏览器中使用后退和前进按钮浏览页面而不丢失状态？

标签： javascriptreactjsstatebrowser-historynext.js