当用户直接导航到页面时，将默认状态传递给链接

Posted 2021-03-26

在我的GatsbyJs应用程序中，我通过<Link/>组件传递状态中的参数。状态中的此参数告知用户导航到页面后要显示的内容。

<Link
  to={`/${link}`}
  state={{ dataRef: dataToDisplay }}
  key={j}
>
  {heading}
</Link>

这很好用。

但是，当用户直接导航到页面（在地址栏中插入地址）时，我收到错误：TypeError: _this.props.location.state is null，因为状态为空。

我尝试了什么：

在我的page组件上，我试图以下列形式将default value传递给this.props.location.state：

const { state = { dataRef: "foo" }} = this.props.location;

但是，这也没有工作并返回相同的错误。所以我的问题是，如何在状态中设置默认的dataRef属性，以便当用户直接在地址栏中键入页面地址时，页面会加载默认参数。

谢谢

答案

const { state = { dataRef: "foo" }} = this.props.location;

如果state是undefined，这将有效，但因为它是null它仍然是null。你尝试过这样的事吗？

const state = this.props.location.state || { dataRef: "foo" }