盖茨比位置道具不可用

Question

根据 Gatsby 文档，所有组件都应该可以使用位置道具 https://www.gatsbyjs.com/docs/location-data-from-props/。

我的页面位于 src/pages 下，并使用标题组件内的 <Link> 自动路由。但是，标题组件中的以下代码返回未定义：

const Header = ({ location }) => {

console.log(location)

我错过了什么吗？我是否需要明确地将位置道具传递给标题？当我解释文档时，这是自动完成的。

有一个想法 - 可能是由于我的 {children} 传入 layout.js？

Layout.js

return (
<>
  <Header url={data.site.siteMetadata.siteUrl} />
  
  <main>{children}</main>

谢谢

Answer 1

location 属性在顶级组件（页面）中可用，因此您应该将其放入页面并深入到您的Header 或其他组件中。因为它是从docs中提取的：

有时，准确了解您应用的浏览器可能会有所帮助 URL 处于任何给定阶段。因为盖茨比使用@reach/router client-side 路由，位置属性传递给任何页面组件 并表示应用当前所在的位置

因为 Gatsby 是从 @reach/router 扩展而来的，您可以通过使用 Layout 作为页面组件来利用这种优势，在这种情况下，location 将在您的 Layout 组件中可用，从那里，您可以解除它向下到任何所需的子组件。

在您的场景中，默认情况下 Header 组件永远不会有 location 数据，您应该从可用的地方传递它。