Gatsby中如何从Layout向子组件传递Props？遇history.listen报错

Hey there, let's break down how to pass props from your Layout component to child components like Header, and fix that frustrating TypeError: undefined is not an object (evaluating 'history.listen') error you're hitting.

1. Basic Prop Passing Setup #

First, let's get the core prop-passing right. Your Layout component can accept any props you need, then pass them directly to its child components (like Header) while still rendering the children content.

Here's a working example:

Layout Component (src/components/Layout.js) #

import React from 'react'
import Header from './Header'
import './layout.css'

// Accept props like siteTitle, currentPath, etc.
const Layout = ({ siteTitle, currentPath, children }) => {
  return (
    <div className="layout-container">
      {/* Pass props to Header */}
      <Header pageTitle={siteTitle} activePath={currentPath} />
      <main>{children}</main>
      <footer>
        © {new Date().getFullYear()}, Built with Gatsby
      </footer>
    </div>
  )
}

export default Layout

Header Component (src/components/Header.js) #

import React from 'react'

// Receive and use the props from Layout
const Header = ({ pageTitle, activePath }) => {
  return (
    <header className="site-header">
      <h1>{pageTitle}</h1>
      <nav>
        {/* Example: Use activePath to highlight current nav link */}
        <a href="/" className={activePath === '/' ? 'active' : ''}>Home</a>
        <a href="/about" className={activePath === '/about' ? 'active' : ''}>About</a>
      </nav>
    </header>
  )
}

export default Header

2. Fixing the history.listen Error #

That error almost always happens when a component (like Header) tries to access the history object directly without being wrapped in Gatsby's routing context. Here's how to fix it:

Option 1: Pass Routing Data from Page Components #

Instead of trying to access history in Layout/Header, get the routing info in your page components (which are always in the routing context) and pass it down as props.

Use Gatsby's useLocation hook from @reach/router to get the current path:

// src/pages/index.js
import React from 'react'
import { useLocation } from '@reach/router'
import Layout from '../components/Layout'

const IndexPage = () => {
  const location = useLocation()
  
  return (
    <Layout 
      siteTitle="My Awesome Gatsby Site" 
      currentPath={location.pathname}
    >
      <h1>Welcome to My Site!</h1>
    </Layout>
  )
}

export default IndexPage

Option 2: Use useLocation Directly in Child Components #

If your Header needs to react to route changes (like updating active links), you can use useLocation directly in the Header component—just make sure it's used within a component that's part of Gatsby's routing tree (which it will be if it's rendered by Layout, which is used by page components).

// src/components/Header.js
import React, { useEffect } from 'react'
import { useLocation } from '@reach/router'

const Header = ({ pageTitle }) => {
  const location = useLocation()

  // Listen for route changes
  useEffect(() => {
    console.log(`Navigated to: ${location.pathname}`)
  }, [location])

  return (
    <header className="site-header">
      <h1>{pageTitle}</h1>
      <nav>
        <a href="/" className={location.pathname === '/' ? 'active' : ''}>Home</a>
        <a href="/about" className={location.pathname === '/about' ? 'active' : ''}>About</a>
      </nav>
    </header>
  )
}

export default Header

This way, you don't even need to pass the path as a prop from Layout—Header can fetch it on its own, avoiding any history context issues.

3. Common Mistakes to Avoid #

• Don't access history in Layout directly: Layout components might be used in contexts outside of routing (like static queries), so they won't have access to the routing context.
• Ensure routing hooks are used in routed components: Only components rendered by page components or within Gatsby's router can use useLocation, useHistory, etc.

内容的提问来源于stack exchange，提问作者lukas