更改路由时，react路由器的位置状态变得不确定

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

查找状态

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

在文档here

中有说明

  

通常只使用一个字符串，但是如果需要添加一些“位置”   状态”，只要应用返回该状态即可   特定位置，则可以使用位置对象代替。这是   如果要基于导航历史记录而不是分支UI，则很有用   只是路径（如模式）。