文章/答案/技术大牛

发布

问反应头盔不更新元标签
EN

Stack Overflow用户

提问于 2020-10-03 13:17:28

回答 2查看 10.7K关注 0票数 10

我在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头盔部分，它存在于组件中，在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>

现在，这里的问题是--这里唯一替代的标记是标记，但是没有一个标记被替换为。

我没有服务器端呈现，我有服务器端(node.js)和函数，它们返回一些值的json，这是我在自己的react应用程序中呈现的。

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

有人能帮我弄清楚吗？非常感谢:)

html

reactjs

meta-tags

react-helmet

回答 2

Stack Overflow用户

发布于 2020-11-19 04:37:44

对于没有SSR的SPA (服务器端呈现)，从bot的角度来看，头标记位于dist/公用文件夹中的静态index.html文件中。要添加从head标记到bots的动态元素的服务功能，您可以：

service

Alternatively
使用预呈现
使用next.js在服务器上呈现页面(或页面的一部分)，这样机器人就可以爬行这个
，查看用于pre

的其他解决方案。

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

一种对我有效的方法：

将流量引导到节点服务器

来自此节点服务器的

返回index.html文件并传递头部标记。

返回res.render('index'，{ headTags: ReactDOMServer.renderToStaticMarkup(标签)，})

在这里，标记是<meta/>, <title/>等HTML元素的数组。

额外好处:您可以在前端导入相同的标记模块，以获取头盔的头部标记。

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

要使用车把作为引擎，请将其添加到节点服务器中。

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

票数 3

Stack Overflow用户

发布于 2021-01-11 10:17:19

我也面临着同样的问题。然后按下面的方式解决。

在服务器文件(例如server/index.js)中，在ReactDOMServer.renderToString之后添加const头盔=ReactDOMServer.renderToString()。我的代码看起来是：

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>
      `
    }

(这可能对你有帮助:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64184706

复制

相似问题

问反应头盔不更新元标签
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应头盔不更新元标签EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应头盔不更新元标签
EN