Gatsby-使用react head/react head&x27为SSR添加元标记；无法在动态创建的页面上工作

我已经研究这个问题一个星期了，但仍然感到困惑。我有一个使用盖茨比和Prismic的网站，我有两种不同类型的页面：静态和动态创建的页面。静态页面可以包括主页、联系我们页面、关于我们页面等。动态页面可以包括博客帖子、服务页面等

我使用react头盔将元数据注入到页面中，但后来我改用react head。这适用于静态页面，它包含在SSR版本的页面中，但不适用于动态页面。我还将一个console.log放在我在所有页面上使用的布局组件上，在静态页面上它会显示在终端上，但在动态页面上它不会

我的配置包括以下插件：

plugins: [
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-resolve-src`,
    `gatsby-plugin-remove-trailing-slashes`,
    `gatsby-plugin-emotion`,
    `gatsby-plugin-preload-fonts`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: "gatsby-source-prismic-graphql",
      options: {
        repositoryName: "<redacted>",
        linkResolver: () => (post) => `/${post.uid}`,
        omitPrismicScript: true,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `sample`,
        short_name: `sample`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `sample-notext.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-107057776-1",
        head: true,
      },
    },
    {
      resolve: "gatsby-plugin-iltorb",
      options: {
        extensions: ["css", "html", "js", "svg", "png", "ttf"],
      },
    },
    `gatsby-plugin-preact`,
    {
      resolve: `gatsby-plugin-html-minifier`,
      options: {
        minifyCSS: true,
        minifyJS: true,
        minifyURLs: true,
        removeEmptyAttributes: true,
        removeComments: true,
      },
    },
    {
      resolve: "gatsby-plugin-html-attributes",
      options: {
        lang: "en",
      },
    },
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        color: "#dd8d83",
        showSpinner: false,
        minimum: 0.4,
      },
    },
    `gatsby-plugin-react-head`,
  ],

插件：[
`盖茨比插件捕获链接`，
`盖茨比`，
`盖茨比插件解析src`，
`盖茨比插件删除尾部斜杠`，
`盖茨比`，
`盖茨比插件预加载字体`，
{
解析：`gatsby源文件系统`，
选项：{
名称：`images`，
路径：`${uu dirname}/src/images`，
},
},
`盖茨比变压器，
`盖茨比，
{
解析：“盖茨比源棱镜图”，
选项：{
repositoryName:“”，
链接解析程序：（）=>（post）=>`/${post.uid}`，
脚本：对，
},
},
{
解析：`gatsby插件清单`，
选项：{
名称：`sample`，
短名称：`sample`，
起始url:`/`，
背景颜色：“663399”，
主题颜色：“663399”，
显示：`minimal ui`，
图标：`sample notext.png`，//此路径相对于站点的根目录。
},
},
{
解析：`gatsby插件google analytics`，
选项：{
trackingId:“UA-107057776-1”，
头：是的，
},
},
{
决议：“盖茨比插件iltorb”，
选项：{
扩展：[“css”、“html”、“js”、“svg”、“png”、“ttf”]，
},
},
`盖茨比插件预演`，
{
解析：`gatsby plugin html minifier`，
选项：{
没错，
真的，
minifyURLs：是的，
RemovemptyAttributes：没错，
removeComments：对，
},
},
{
解析：“盖茨比插件html属性”，
选项：{
朗：“嗯，
},
},
{
解析：`gatsby plugin nprogress`，
选项：{
颜色：“dd8d83”，
showSpinner:错，
最低：0.4，
},
},
`盖茨比头`，
],

页面（动态和静态）通常如下所示：

<Layout
    meta={{
        title: `${post.post_title[0].text} | Not Just a Box Events`,
        description: meta.description,
        image: blog.page_hero_image.url,
    }}
>
    {children}
</Layout>

{儿童}

布局是这样的：

<LayoutContainer className="div">
    <div className="Layout">
        <header>
            <Meta
                name="p:domain_verify"
                content="1228088838575c68d8e15366463bb836"
            />
            <Link rel="preconnect" href="https://images.prismic.io" />
            <Title>{meta.title}</Title>
            <Meta name="title" content={meta.title} />
            <Meta name="description" content={meta.description} />
            <Meta property="og:type" content="website" />
            <Meta
                property="og:url"
                content=""
            />
            <Meta property="og:title" content={meta.title} />
            <Meta
                property="og:description"
                content={meta.description}
            />
            <Meta property="og:image" content={meta.image} />
            <Meta
                property="twitter:card"
                content="summary_large_image"
            />
            <Meta
                property="twitter:url"
                content=""
            />
            <Meta property="twitter:title" content={meta.title} />
            <Meta
                property="twitter:description"
                content={meta.description}
            />
            <Meta property="twitter:image" content={meta.imagge} />
            {headerChildren}
        </header>
        <main className="Layout__content">{children}</main>
        <Footer data={footerInfo} />
    </div>
</LayoutContainer>

{meta.title}
{校长子女}
{儿童}

当我查看动态页面的页面源代码时，我没有看到我试图生成的元标记。我只看到：

<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="theme-color" content="#663399"/><meta name="generator" content="Gatsby 2.21.1"/>

然后是一些CSS代码，等等。没有我想要的元标记

---

请帮助

这比您尝试的要简单得多。只需在任何类似的情况下使用

组件（内置）：

{儿童}

请注意，您可能需要调整组件以将

图像

作为

道具

接收

---

这种方法适用于（静态和动态）页面。SSR不应该影响SEO。

它比您尝试的要简单得多。只需在任何类似的情况下使用

组件（内置）：

{儿童}

请注意，您可能需要调整组件以将

图像

作为

道具

接收

---

这种方法适用于（静态和动态）页面。SSR不应该影响SEO。

本质上，SEO组件仍然使用react。我还是不明白为什么即使我用了反作用头盔，它也不起作用为什么你说的“不起作用”？您的

SEO

组件是否为空？你们是如何使用它的？本质上，SEO组件仍然使用它。我还是不明白为什么即使我用了反作用头盔，它也不起作用为什么你说的“不起作用”？您的

SEO

组件是否为空？你是怎么用的？

<Layout>
<SEO description={meta.description} 
     title={`${post.post_title[0].text} | Not Just a Box Events`} 
     image={blog.page_hero_image.url} />
    {children}
</Layout>