React项目启动本地服务器触发react-helmet报错，附代码寻求排查解决

问题原因 #

你在react-helmet的<Helmet>组件内部额外嵌套了一层<head>标签，违反了组件的使用规则。Helmet组件本身的功能就是将其内部包裹的title、meta等头部标签自动注入到页面的原生<head>节点中，不需要手动在组件内部再次声明<head>标签。

修复方案 #

删除<Helmet>内部包裹的多余<head>、</head>标签，直接将头部标签放在<Helmet>下即可，修改后的代码片段如下：

<Helmet>
    <title> Home | BradGradGraphics</title>
    <meta property="og:description" content="Freelancing service that offers graphic design, illustration, and some small web design work digitally" />
    <meta property="og:url"   content="https://bradgrad.graphics" />
    <meta property="og:type"  content="website" />
    <meta property="og:title" content="BradGradGraphics" />
    <meta property="og:image" content="../images/SplashPgConc.png" />
</Helmet>

额外优化提示 #

你当前og:image使用的相对路径在React打包后可能无法被正确识别，可以将图片导入后使用变量赋值给content属性，或把图片放到项目public目录下使用绝对路径引用，避免分享时图片加载失败。

内容的提问来源于stack exchange，提问作者Brad G.