Gatsby获取各页面当前URL时pathname读取报错解决方法

报错Cannot read properties of undefined (reading 'pathname')的直接原因是解构拿到的location值为undefined，按以下顺序排查即可：

• 先确认组件类型：Gatsby 只会给两类组件自动注入location路由prop：一是放在src/pages目录下的路由页面组件，二是gatsby-node.js中通过createPage生成页面时指定的模板组件。如果写的是被页面引入的普通公共组件，是拿不到默认注入的location prop的，直接解构自然会得到undefined。
• 确认是页面/模板组件仍报错的话，先清理缓存重启服务：Gatsby开发环境热更新偶尔会出现props注入异常的问题，先执行gatsby clean清除缓存后重新启动开发服务，大部分偶现问题会直接解决。
• 检查createPage配置：如果是用createPage生成的页面，检查调用时有没有手动传入自定义的location字段覆盖默认注入的prop，或者有没有错误修改传入组件的props结构。
• 顺带检查gatsby-config.js配置：确认siteMetadata中确实配置了siteURL字段，避免location问题修复后，拼接URL时因为取不到siteURL触发新的报错。

根据组件的类型选对应方案即可：

方案1：组件为普通子组件 #

两种实现方式二选一：

• 父级页面组件拿到自己的location prop后，作为参数透传给子组件
• 直接在子组件里用Gatsby内置的useLocation hook获取location数据，不需要依赖props透传，嵌套再深的组件都能正常拿到，是最推荐的写法。

改造后的可运行代码如下：

import React from "react"
import { graphql, useLocation } from "gatsby"
const Page = ({ data }) => {
  const location = useLocation()
  // 加可选链做兜底，避免极端场景下数据为空触发白屏
  const canonicalUrl = `${data?.site?.siteMetadata?.siteURL}${location?.pathname || "/" }`
  return <div>The URL of this page is {canonicalUrl}</div>
}
export default Page
export const query = graphql`
  query PageQuery {
    site {
      siteMetadata {
        siteURL
      }
    }
  }
`

方案2：组件本身就是页面/模板组件 #

清理缓存重启仍报错的话，检查gatsby-node.js中createPage的逻辑，不要在传入组件的context里覆盖location字段，保持默认注入即可。

提示：不管用哪种方式拿location，都建议加可选链?.做空值兜底，避免个别路由场景下数据未定义导致整个页面崩溃。

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