如何防止位置对象在重新加载 reactjs 时重置

Question

我正在使用 Link 来重新直接调用另一个组件。 像这样的东西

<Link to={{ pathname: "/app/" + app.appId, appDetail: { app: app } }}>>

在调用路径 /app/:appId 它调用 AppDetails 组件。 我在 location 对象中获取 appDetail 对象。

但是在重新加载路线 /app/:appId 时，位置对象中的这个 appDetail 变得未定义。 那么如何防止这种情况发生，以便在重新加载 /app/:appId 时，来自 location 对象的 appDetail 不应未定义

Answer 1

有很多方法可以控制这种行为，这里是一种：尝试将位置对象放在 if 条件中，例如：

if(!location) {
  return <>Loading...</>
}

上述条件将保持执行，直到条件满足

Answer 2

有state属性可以将数据传递给其他组件。 所以你可以做这样的事情：

<Link to={{
  pathname: "/app/" + app.appId,
  state: { appDetail: { app: app }}
}}>

并在其他组件中获取appDetail ：

const { appDetail } = this.props.location.state;