According to the Gatsby docs the location props should be available to all components https://www.gatsbyjs.com/docs/location-data-from-props/.
My pages are under src/pages and are automatically routed using the <Link> inside the header component. However, the below code in the header component returns undefined:
const Header = ({ location }) => {
console.log(location)
Am i missing something? Do i need to explicitly pass down location props to header? As i interpreted the docs, this is done automatically.
An idea had - could it be due to my {children} pass in layout.js?
Layout.js
return (
<>
<Header url={data.site.siteMetadata.siteUrl} />
<main>{children}</main>
Thanks
location property is available in top-level components (pages) so you should get it into a page and drill down into your Header or another component. As it is extracted from the docs:
Sometimes it can be helpful to know exactly what your app’s browser URL is at any given stage. Because Gatsby uses
@reach/routerfor client-side routing, the location prop is passed to any page component and represents where the app is currently
Because Gatsby extends from @reach/router, you can take advantage by using a Layout as a page component, in that case, location will be available in your Layout component, from there, you can lift it down to any desired children component.
In your scenario, the Header component by default, will never have the location data, you should have to pass it from where it's available.