De acuerdo con los documentos de Gatsby, los accesorios de ubicación deberían estar disponibles para todos los componentes https://www.gatsbyjs.com/docs/location-data-from-props/ .
Mis páginas están en src/pages y se enrutan automáticamente usando el <Link> dentro del componente de encabezado. Sin embargo, el siguiente código en el componente de encabezado devuelve undefined:
const Header = ({ location }) => { console.log(location)¿Me estoy perdiendo de algo? ¿Necesito pasar explícitamente los accesorios de ubicación al encabezado? Como interpreté los documentos, esto se hace automáticamente.
Tuve una idea: ¿podría deberse a mi pase de {children} en layout.js?
Diseño.js
return ( <> <Header url={data.site.siteMetadata.siteUrl} /> <main>{children}</main>Gracias
La propiedad de location está disponible en los componentes de nivel superior (páginas), por lo que debe ingresarla en una página y profundizar en su Header u otro componente. Como se extrae de los documentos :
A veces, puede ser útil saber exactamente cuál es la URL del navegador de su aplicación en una etapa determinada. Debido a que Gatsby usa
@reach/routerpara el enrutamiento del lado del cliente , la propiedad de ubicación se pasa a cualquier componente de la página y representa dónde se encuentra actualmente la aplicación.
Debido a que Gatsby se extiende desde @reach/router , puede aprovechar el uso de un Layout como componente de página, en ese caso, location estará disponible en su componente de Layout , desde allí, puede bajarlo a cualquier componente secundario deseado.
En su escenario, el componente Header de forma predeterminada nunca tendrá los datos de location , debe pasarlo desde donde esté disponible.