阅读文档我发现 Gatsby 具有内置功能，可以使用道具将道具传递到其链接组件中的页面state。在开发环境中，一切都按预期工作，并且从下面的组件导航时，任何页面始终使用传递的道具正确呈现。但是在构建过程中我收到一个错误Building static HTML failed for path "/page/", WebpackError: TypeError: Cannot read property 'access' of undefined，location.state该页面内的任何调用都会发生同样的情况。
链接组件
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
出现您的问题是因为您没有在所有组件调用中提供location（因此没有提供state或access属性），Page因此编译失败。
添加一个条件，例如：
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
如果您正在使用可选链接提案，您可以：
if (location?.state?.access) {...}
您还可以location将props解构中的默认设置为：
const Page = ( { location = {} } ) => {}
所以，如果你不发送它，它会产生一个空对象 ( {})，所以state里面没有任何属性。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句