Gatsby Helmet使用location prop报错及页面唯一body类添加方案咨询

1、location prop未定义的原因 #

• Gatsby只会给src/pages目录下的顶级页面组件自动注入location prop，自定义的SEO组件不会默认获取该值，你需要在页面组件调用SEO组件时，手动将页面拿到的location prop传入，未传入的情况下该参数默认就是undefined。
• 你的代码存在prop类型定义错误：location: PropTypes.string配置不对，location本身是对象类型，需要修改为location: PropTypes.object，否则即使正确传参也会触发类型校验错误。
• 额外补充一个潜在bug：你的代码里titleTemplate={'%s | ${site.siteMetadata.title}'}用了单引号包裹模板字符串，要改成反引号包裹才能正确解析变量，即titleTemplate={`%s | ${site.siteMetadata.title}`}。

2、给每个页面添加唯一标识的更优方案 #

最简便的方案是直接使用Gatsby内置的useLocation hook，不需要依赖父组件传参，也不会出现漏传参数导致的报错，修改成本很低：
首先在SEO组件的引入部分新增hook引入：

import { useStaticQuery, graphql, useLocation } from "gatsby"

之后组件内部直接调用hook获取路径即可，不需要再接收location prop：

const SEO = ({ description, lang, meta, title }) => {
  const location = useLocation()
  // 可以按需求处理路径，比如去掉首尾斜杠，首页可以默认赋值为home
  const mylocation = location.pathname.replace(/^\/|\/$/g, '') || 'home'
  // 其余原有逻辑保持不变
}

该方案在开发环境和生产构建的静态页面中都可以正常运行，不需要额外全局配置。如果需要全局统一处理，也可以在gatsby-browser.js和gatsby-ssr.js中配置对应钩子，监听路径变化动态修改body类名，不需要每个页面单独处理。

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