将位置属性传递给页面会生成构建错误 - Link 组件 - Gatsby

Question

阅读 documentation 我发现 Gatsby 具有内置功能，可以使用 state 道具将道具 a 传递到其 Link 组件中的页面。在开发环境中，一切都按预期工作，并且从下面的组件导航时，任何页面始终使用传递的道具正确呈现。但是在构建过程中我得到一个错误 Building static HTML failed for path "/page/", WebpackError: TypeError: Cannot read property 'access' of undefined，对于在该页面内调用的任何 location.state 也会发生同样的情况。

Link 组件

const data = { 
  title: "Hello Guys",
  date: "23 November 2020"
}

<Link
  to="/form"
  state={{
    access: true,
    title: data.title,
    date: data.date
  }}
  > Proceed
</Link>

页数

const Page = ( { location } ) => {

 
    if (location.state.access === true) {
    
    return (
        <>
            <div>{location.state.title}</div>
            <div>{location.state.date}</div>
        </>
    )}

    else {
        return <div>Nada</div>
    }           
}

export default Page

Answer 1

出现您的问题是因为您没有在 Page 组件的所有调用中提供 location（因此没有提供 state 或 access 属性），因此编译失败。

添加条件如下：

const Page = ( { location } ) => {

 
    if (location && location.state && location.state.access) {
    
    return (
        <>
            <div>{location.state.title}</div>
            <div>{location.state.date}</div>
        </>
    )}

    else {
        return <div>Nada</div>
    }           
}

export default Page

如果您使用的是 Optional Chaining Proposal，您可以：

if (location?.state?.access) {...}

您还可以在 props 解构中将 location 设置为默认值，例如：

const Page = ( { location = {} } ) => {}

因此，如果您不发送它，它将导致一个空对象 ({})，因此内部没有任何 state 属性。

将位置属性传递给页面会生成构建错误 - Link 组件 - Gatsby

Passing location props to page generates build error - Link Component - Gatsby

reactjs

gatsby