如何使用 React 恢复后退按钮上的过滤器？

Question

ItemList：呈现预定义项目的列表。

当您单击列表中的项目时，您将被重定向到另一个包含 ItemDetails 组件的页面，它会显示有关该项目的一些详细信息。

当您在详情页面使用后退按钮时，您将返回列表页面，但过滤器将消失。我该怎么做才能恢复过滤器？如何使用 React 恢复后退按钮上的过滤器。

Answer 1

将您的过滤器存储在 URL（查询字符串）中，然后通过使用 query-string，您可以从 URL 中捕获它们。

例如：

网址：/serach?keyword=helloworld?sort=alphabetic

const parsed = queryString.parse(location.search);
console.log(parsed); // {keyword: "helloworld", sort: "alphabetic"}