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

时间:2018-12-19 11:54:36

标签: javascript reactjs state browser-history next.js

在NextJS中返回上一页时(使用浏览器的后退按钮时)如何恢复过去的状态?还是一般来说,使用浏览器的前进和后退按钮在前进和后退页面之间移动时如何恢复状态?

我有一个项目,其中我在网格中显示许多游戏截图(“游戏截图”类似于Pinterest引脚)。为了避免从Sanity获取数据时的等待时间过长,我不会一次全部获取数据,然后将其存储在this.props中,而是分批存储,这就是为什么将它们存储在this.state中的原因

这是我的情况:

  • 使用会加载/game
  • 页面从Sanity数据库中获取30张缩略图,将其设置为this.state.gameshots的状态并呈现出来
  • 用户单击缩略图,URL更改为/game?gameshotIndex=14(顺便说一下,这是真实的URL,但在URL栏中显示/gameshot/d6fg8a456g
  • URL更改后,将显示一个模式窗口,其中包含游戏截图:this.props.url.query.gameshotIndex && <Modal> ... </Modal>
  • 用户点击模式内的标签链接,然后转到/tag/d65g4d56gff4g6jfg
  • 用户单击浏览器的后退按钮,并得到一个错误,因为/game的状态丢失了,因此该页面不需要this.state.gameshots来显示模式。如果将它们立即加载并存储在this.props.gameshots中,则可以正常工作-但是,即使有100000000个游戏快照,您也必须一次加载所有,这意味着庞大的TTFB和缓慢的页面加载。

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

1 个答案:

答案 0 :(得分:0)

也许您可以使用localStorage.setItem('images', this.state.gameshots)并存储所需的内容。
当用户返回时,您可以使用localStorage.getItem('images')获取此数据并显示给用户。这样可以避免再次请求获取图像。
希望能解决您的问题。 :D