反应路由器的位置状态在路由改变时变得不确定

Question

我想url query 在位置上存储为状态。

~   history.push({
+     ...history.location,
+     search: query.toString(),
+     state: {
+       myState: query.toString(),
+     },
+   })

我怀疑在路线改变时获得状态，但当我从其他路线回来时state变成undefined状态。

Answer 1

这就是state（来自 History API）的工作原理。状态附加到会话中的某个位置，null当您直接导航到页面时，状态不存在（或者更确切地说，是）。

一般来说，我不建议使用 location.state 来传递除临时数据（如重定向位置）之外的任何内容。如果您需要将数据附加到某个位置，我建议您使用路径参数或搜索参数，并拥有一个可以从中查找该数据的存储。

// path params
{ pathname: `/path/name/${SOME_ID}` }
// search params
{ search: `?someID=${SOME_ID}` }

如果您确实想使用 location.state，您的路线将需要有某种备份计划，以便在 location.state 为 null 时使用某些默认值。

Answer 2

它的第二个参数history.push(path, [state])

history.push("path/you/want/to/push/to", { state: myState: query.toString() })

您可以从以下位置查找状态location.state

注意：该状态在其他路线中也不可用。每条路由都有自己的状态，其他路由无法访问该状态。

它在文档中说明在这里

通常，您只需使用字符串，但如果您需要添加一些在应用程序返回到该特定位置时可用的“位置状态”，则可以使用位置对象。如果您想根据导航历史记录而不仅仅是路径（如模态）来分支 UI，这非常有用。