Nao*_*aor 12 html meta-tags reactjs react-helmet
我在 React 项目中有我的index.html页面，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="title" content="Bucard | Digital Business Card">
<meta name="description" content="Bucard - Description for bucard" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="http://m.digital-card.co.il/zedka/152/images/icon.png" />
<meta property="og:description" content="Bucard - Description for bucard" />
<meta property="og:url" content="https://bucard.co.il/" />
</head>
<body>
<div id="root"></div>
</body>
</html>
并有我的react-helmet部分，它存在于组件中，其自身路径在url上：
<Helmet>
<title>{"Digital card of " + this.state.card.Name}</title>
<meta name="title" content={"Digital card of " + this.state.card.Name} />
<meta name="description" content="Description for the react-helmet section" />
<meta property="og:title" content={"Digital card of " + this.state.card.Name} />
<meta property="og:image" content="http://m.digital-card.co.il/friedman/249/images/icon.png" />
<meta property="og:description" content="Description for the react-helmet section" />
<meta property="og:url" content={"https://bucard.co.il/digitalCard/" + this.state.card.ShortID} />
</Helmet>
现在，这里的问题是，这里唯一替换的标签是 <title> 标签，但没有一个 <meta> 标签被替换。
我没有服务器端渲染，但我有服务器端（node.js）和返回某些值的 json 的函数，我在 React 应用程序中渲染它们。
我搜索了近两周但还没有解决这个问题，这对我的项目非常重要。也尝试过data-react-helmet=true在不同的情况下使用，但仍然不起作用。
谁能帮我解决这个问题吗？多谢 ：）
对于没有 SSR（服务器端渲染）的 SPA，从机器人的角度来看，您的 head 标签位于 dist/public 文件夹中的静态 index.html 文件中。要添加从 head 标签到机器人提供动态元素的功能，您可以：
您可以阅读 - https://github.com/nfl/react-helmet/issues/489
一种对我有用的方法：
将您的流量定向到节点服务器
从该节点服务器返回您的index.html 文件并传递头标签。
return res.render('index', {
headTags: ReactDOMServer.renderToStaticMarkup(tags),
})
这里，标签是 HTML 元素的数组，例如<meta/>, <title/>等。
奖励：您可以在前端导入相同的标签模块来获取Helmet的头标签。
在你的index.html中，你可以使用handlebars读取从节点服务器传递的head标签并在head部分打印head标签。
<head>
{{{
headTags
}}}
...
</head>
并使用车把作为引擎，将其添加到您的节点服务器
app.engine('html', handlebars.engine);
| 归档时间： |
|
| 查看次数： |
14810 次 |
| 最近记录： |