将 queryParameters 与 Redux 状态同步并为功能组件反应路由器

Question

我正在寻找集成以下堆栈的最佳实践

• 反应功能组件
• Redux 状态
• 从 URL 查询参数

基本上我有一个带有复杂过滤器组件的搜索页面，它负责处理页面上的过滤可能性。这些过滤器由下拉菜单和复选框组成。如果选择/取消选择过滤器，我会通过动作/事件调度程序/减速器等保持它们的状态。单击按钮提交后，就会对 API 进行异步 HTTP 调用，它将在页面上显示适当的结果

目前一切都运行良好。

棘手的部分是我希望能够通过 URL 共享这些过滤的搜索。我认为最好的方法是使用查询参数更新 URL。如/search?filter1=ok&filter2=true

一旦用户输入 URL，过滤器组件将读取查询参数并更新状态。但是状态如何根据用户的操作附加/删除 URL 查询参数呢？

我只是在寻找不太复杂的解决方案，如果可能的话，使用我当前依赖的能力（我应该使用钩子吗？）

我找到了各种解决方案，但主要是基于 Container 组件，在那里我试图坚持使用带有钩子的功能组件。

在此先感谢您的提示和想法。

安塞尔姆

Answer 1

您可以通过获取 URLwindow.location.pathname并执行必要的拆分、切片和连接来获取基本 URL。之后，您可以使用history.push()方法（如果您使用 React 路由和 BrowserHistory）来更改useEffect(). 它将更改浏览器中的 URL。