如何在Gatsby项目中向React ThemeContext同步location.pathname

该需求完全可以实现，不需要额外搭建复杂的跨组件状态同步逻辑，核心思路是利用Gatsby内置的路由响应式能力，将实时页面路径同步到ThemeContext的暴露值中，所有消费该Context的组件就能自动获取到最新路径、完成动态布局适配。

现有代码的前置修正 #

你当前编写的ThemeProvider存在一处解构错误，会直接导致渲染异常：

• 错误代码：const { children } = props.children
  这行代码是对传入的props.children（React子节点对象）解构children属性，根本无法拿到实际要渲染的子组件，正确写法是直接从props本身解构：const { children } = props

实现步骤 #

1. 响应式获取当前路径
   Gatsby的路由层基于*@reach/router*实现，不需要自己监听路由变化、手动将路径存储到本地state，直接引入该库提供的useLocation Hook即可拿到响应式的路由对象：路由切换时Hook会自动触发组件重渲染，返回最新的路径值，只要把这个值放到Context的暴露对象中，所有消费Context的组件都会自动同步拿到最新路径。

   注意：不要引入react-router-dom的useLocation，Gatsby项目中没有对应的路由上下文，引入后会直接报错。

2. 补充Context默认值定义
   在默认的Context状态中新增pathname字段，避免TypeScript类型校验报错。
3. 同步路径到Context暴露值
   在ThemeProvider内部调用useLocation获取当前路径，将其加入Context的返回值对象中即可。

修正后的完整代码 #

import React, { useState, createContext } from 'react'
// 从Gatsby内置路由层引入响应式路径Hook
import { useLocation } from '@reach/router'

// 补充pathname字段的默认值
const defaultState = {
  dark: false,
  setDark: () => {},
  pathname: '',
}
export const ThemeContext = createContext(defaultState)

interface ThemeProviderProps {
  children: any
}

export const ThemeProvider = (props: ThemeProviderProps) => {
  // 修正原有解构错误
  const { children } = props
  const [dark, setDarkTheme] = useState<boolean>(false)
  // 获取当前路由的location对象
  const location = useLocation()

  const setDark = () => {
    setDarkTheme(true)
  }

  return (
    <ThemeContext.Provider
      value={{
        dark,
        setDark,
        // 将实时pathname同步到Context中，路由变化时自动更新
        pathname: location.pathname,
        // 也可以在这里基于路径提前计算好主题属性，减少消费端的逻辑判断
        // 例如: dark: location.pathname.startsWith('/admin') ? true : dark
      }}
    >
      {children}
    </ThemeContext.Provider>
  )
}

关键注意点 #

• ThemeProvider的放置位置需要在Gatsby的路由上下文内部：通常在gatsby-browser.js或根布局文件中包裹ThemeProvider时，Gatsby默认会将Router作为最外层渲染容器，正常放置的情况下不需要额外调整即可正常使用useLocation。
• 不需要额外编写useEffect监听路径变化、手动更新本地state存路径：useLocation本身是响应式的，路由变化时会自动触发ThemeProvider重渲染，Context值会自动更新，这套机制比手动监听性能更好，也不会出现路径不同步的问题。
• 路径值同步完成后，你可以在任意消费ThemeContext的组件中直接读取pathname属性，根据路径规则匹配需要的布局、样式、主题模式，不需要在每个业务组件中单独引入路径Hook。

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