在 React 中,使用 React Router,列表页面需要如何保持查询状态?

我在开发一个列表查询页面,这个页面在查询的时候会录入一些查询条件
比如:页数,查询参数等等。

当我进入详情页,再点击返回的时候(调用 history.goBack() ),列表页面刷新了。
他没有保持之前的状态。

目前想到的解决方案是使用:url params 来存储查询条件。

就是每次查询,或者重置的时候,history.push(?${currentUrlParams});

示例链接:https://codesandbox.io/s/5v0v...

这样在点击返回的时候,就会访问到一个带参数的链接,就可以让页面通过参数进行一次查询了。

但是,这样实现有些麻烦了(也遭到了同事的吐槽,虽然他们也没有更好的办法),有没有更好的办法呢?

阅读 4.9k
3 个回答

可以把查询条件存到redux或者localstorage里

这正是 redux 的应用场景

我自己看到一篇文章,并且翻译到我的专栏了:https://segmentfault.com/a/11...
主要是单页面应用直接访问带参数的链接,无法直接把URL里面的查询参数,直接带到页面的状态中。
使用URL可以解决这个问题。

推荐问题
宣传栏