在 react CSR 页面上使用 react-helmet 生成 2 组元标记答案

【问题标题】：Using react-helmet results into 2 sets of meta tags on react CSR page在 react CSR 页面上使用 react-helmet 生成 2 组元标记
【发布时间】：2020-04-14 09:49:54
【问题描述】：

我在我的 react 项目中使用 react-helmet。

我的 index.html 中的元标记是：

<link rel="canonical" href="https://example.com" />
<meta name="description" content="main description">

在组件中，我将元标记设置为：

const ContactUs = () => {
return (
    <div className="less-content-container justify-content-start align-items-start">
        <Helmet>
            <title>Contact Us | Example</title>
            <meta name="description" content={"contact us description"} />
            <link rel="canonical" href={"https://example.com/contact-us"} ></link>
        </Helmet>
    </div>
  );
}

当最终联系我们页面在浏览器中呈现时，我在 Chrome 检查中看到呈现的 html 中的两组元标记。第一组元标记是 index.html 的元标记，第二组元标记是在组件中声明的。

另外，在 Google 网站管理员控制台中，我看到 User-declared canonical 设置为无。这意味着。 Google 爬虫未读取规范元标记。

【问题讨论】：

标签： reactjs react-helmet

【解决方案1】：

遇到了完全相同的问题，并通过在我的index.html 的定义中添加data-react-helmet="true" 属性来解决它。像这样的：

<meta name="description" content="main description" data-react-helmet="true" />

React Helmet 现在应该会在启动时替换 index.html 上的描述。

【讨论】：