如何通过Gatsby Head API传递locale？解决IntlProvider缺失报错

为什么Head组件调用useIntl会报错？ #

Gatsby的Head API组件（你导出的Head函数）是独立于页面主组件树之外渲染的，它不会被包裹在gatsby-plugin-intl提供的<IntlProvider>上下文组件中。

而你的页面主组件Index是被Layout包裹的，Layout内部已经包含了gatsby-plugin-intl注入的<IntlProvider>，所以在页面组件里调用useIntl能正常获取上下文；但Head组件不在这个上下文树中，自然找不到intl对象，因此抛出[React Intl] Could not find required intl object的错误。

解决方法：通过usePageContext获取locale #

gatsby-plugin-intl会自动将当前语言区域值注入到页面的context中，你可以通过Gatsby提供的usePageContext钩子直接获取，无需依赖useIntl。

修改你的Head组件代码如下：

import { usePageContext } from "gatsby";
import Seo from "../components/utils/seo";

export const Head = () => {
  const { locale } = usePageContext();
  return <Seo currentLocale={locale} />;
};

验证方式 #

你可以在页面组件中打印pageContext确认locale值是否正确：

const Index = ({ pageContext }) => {
  console.log(pageContext.locale); // 输出当前语言，如en、zh等
  return <Layout location="home" />;
};

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