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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当用户直接导航到页面时,将默认状态传递给链接相关的知识,希望对你有一定的参考价值。

在我的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;

如果stateundefined,这将有效,但因为它是null它仍然是null。你尝试过这样的事吗?

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

以上是关于当用户直接导航到页面时,将默认状态传递给链接的主要内容,如果未能解决你的问题,请参考以下文章

React/Redux 存储状态未保存

重定向到 React 中的另一条路线时如何传递状态/道具?

如何在页面加载时设置 useState 挂钩的状态?

当应用程序未运行状态时点击通知时如何导航到特定的目标页面?

如何通过道具异步传递道具给孩子?

在React本机页面之间传递数据