React Helmet 不更新元标记

IT技术 html reactjs meta-tags react-helmet
2021-05-25 22:11:26

我在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应用程序中渲染。

我搜索了将近 2 周，但还没有解决这个问题，这对我的项目非常重要。也尝试过放在data-react-helmet=true不同的情况下，但仍然无法正常工作。

任何人都可以帮我解决这个问题吗？非常感谢 ：）

2个回答

对于没有 SSR（服务器端渲染）的 SPA，从机器人的角度来看，您的头部标签位于 dist/public 文件夹中的静态 index.html 文件中。要添加将动态元素从 head 标签提供给机器人的能力，您可以：

  • 使用预渲染服务
  • 或者使用 next.js 在服务器上呈现您的页面（或页面的一部分），以便机器人可以抓取它
  • 研究 SSR 的其他解决方案

您可以阅读 - https://github.com/nfl/react-helmet/issues/489

一种对我有用的方法：

  1. 将您的流量定向到节点服务器

  2. 从这个节点服务器返回你的 index.html 文件并传递 head 标签。

    return res.render('index', {
  headTags: ReactDOMServer.renderToStaticMarkup(tags),
})

在这里，标签是一个 HTML 元素数组，例如<meta/>, <title/>等等。

奖励：您可以在前端导入相同的标签module以获取Helmet的头部标签。

  1. 在您的 index.html 中，您可以使用 handlebars 读取从节点服务器传递的 head 标签并在 head 部分打印 head 标签。

    <head>

  {{{
    headTags
  }}}
  ...
</head>

并将把手用作引擎，请将其添加到您的节点服务器

app.engine('html', handlebars.engine);

我遇到了同样的问题。并如下解决。

在您的服务器文件（例如 server/index.js）中，在 ReactDOMServer.renderToString 之后添加 consthelm = Helmet.renderStatic()。我的代码看起来像：

const app = ReactDOMServer.renderToString(<App />);

const helmet = Helmet.renderStatic()
const indexFile = path.resolve('./build/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
     let updated = data.replace('<div id="root"></div>', `<div id="root">${app}</div>`);
     return res.send(updateHtmlContent(updated, helmet));
  }

并添加以下功能。这是用头盔标签更新 html 内容。

function updateHtmlContent(app, helmet) {
      return `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
          </head>
          <body>
            <div id="root">
              ${app}
            </div>
          </body>
        </html>
      `
    }

这可能对你有帮助:)

其它你可能感兴趣的问题
上一篇onChange 是延迟的一个字符 - Hooks 下一篇如何在 chrome API 中使用 react setState