如何协调 React 的 setState 与使用 URL 作为单一事实来源？

Question

在 React 的文档中，他们通常建议放弃使用 this.forceUpdate，而是建议尽可能使用 this.setState。

在我的应用程序中，我有一个包含滑出式窗格的组件。它具有嵌套元素，单击每个项目会以不同方式更新 URL。例如，我可以通过在其中四处单击来导航到以下 URL：

site.com/posts/create
site.com/posts/read
site.com/posts/4895734
site.com/posts/5465462
site.com/messages/43455
site.com/messages/create

单击这些项目中的每一个应该会更新组件的视图并根据 URL 以不同方式显示它。但是，仅调用 window.history.pushState 来更新 URL 不会导致 React 更新（为此您需要调用 setState 或 forceUpdate）。

因此，我不确定如何进行。我宁愿不复制“真实来源”并在 React 的状态变量中镜像 URL，因为这样就会在 URL 是否应该用于确定状态与组件的状态变量之间存在冲突.让 URL 成为唯一的事实来源似乎更好。

但是，如果是这种情况，那么每次我更改 URL 时，我都必须执行 this.forceUpdate 或一些空操作调用，例如 this.setState({ asdf: 5 })。这肯定会起作用，但是 React 的文档特别警告在应用程序的所有地方调用 forceUpdate。

有没有更好的方法？

Answer 1

我不确定您的路由配置是什么，但是您使用的是 history 包吗？ https://reactrouter.com/core/api/history

示例：

应该 mount/rerender 对 url 进行更改，并提供通过路由器传递状态的能力。

编辑：

简化版

How to reconcile React's setState with using the URL as the single source of truth?