如何使用 React Helmet 更改标题和元数据

介绍

React Helmet是一个动态管理文档head部分的组件。一些常见的用例包括设置title，description以及meta对文档的标签。

当与服务器端渲染结合使用时，它允许您设置meta将由搜索引擎和社交媒体爬虫读取的标签。这使得服务器端渲染和 React Helmet 成为一个强大的组合，用于创建可以从 SEO（搜索引擎优化）和社交媒体数据（如 oEmbed、Facebook Open Graph 或 Twitter Cards）中受益的应用程序。

在本文中，您将探索 React Helmet 在 React 应用程序中的功能。

先决条件

要阅读本文，您需要：

  • 熟悉使用软件包管理器（如npm或 ）安装软件包yarn。
  • 熟悉在 React 项目中导入和使用组件。

注意：本教程不会涵盖创建 React 项目或设置服务器端渲染的步骤。请参阅如何为 React 应用程序启用服务器端渲染。

本教程已通过 Node v15.3.0、npmv6.14.9、reactv17.0.1 和react-helmetv6.1.0 验证。

步骤 1 — 将 React Helmet 添加到您的项目中

首先，将组件安装到您的项目中：

  • npm install react-helmet@6.1.0

现在你可以在你的应用程序中使用 React Helmet，方法是将应该放在文档头部的元素作为子Helmet组件添加到组件中：

源代码/App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
    </div>
  );
}

export default App;

然后，打开浏览器的开发人员工具并检查head元素：

Inspect Element
<head>
  <!-- ... --->
  <title>App Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

观察React Helmet 添加的title和meta元素。

第 2 步 – 覆盖值

树更下方的组件可以覆盖提供给Helmet更高级别组件的值。

例如，考虑一个ChildComponent包含Helmet修改的组件title：

src/ChildComponent.js
import React from 'react';
import { Helmet } from 'react-helmet';

export default function ChildComponent() {
  return (
    <div>
      <Helmet>
        <title>Modified Title</title>
      </Helmet>
      <h1>Child Component</h1>
    </div>
  )
}

接下来，重新访问App组件并包含新的ChildComponent：

源代码/App.js
import { Helmet } from 'react-helmet';

import ChildComponent from './ChildComponent';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
      <ChildComponent />
    </div>
  );
}

然后，打开浏览器的开发人员工具并检查head元素：

Inspect Element
<head>
  <!-- ... --->
  <title>Modified Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

在title将被改变App Title到Modified Title。和值的meta标记将保持不变，因为它们没有被覆盖。descriptiontheme-color

第 3 步 – 处理html和的属性body

如果需要为它们指定属性，您甚至可以包含html和body元素。

例如，考虑一个应用body了dark主题的元素：

源代码/App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
        <body class="dark" />
      </Helmet>
    </div>
  );
}

然后，打开浏览器的开发人员工具并检查body元素：

[seconday_label Inspect Element]
<body class="dark" data-react-helmet="class">
  <!-- ... -->
</body>

在class将被设置为dark。

第 4 步 – 在服务器上渲染

当应用程序在服务器上呈现时，React Helmet 的全部优势变得显而易见，以便应用程序在文档头部获得正确的元素。

假设你有一个 React 服务器端渲染的应用程序设置，你可以renderStatic在调用 ReactDOMServer 之后立即调用 React Helmet 的方法renderToString或renderToStaticMarkup获取一个具有Helmet数据属性的实例：

服务器/index.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { Helmet } from 'react-helmet';

import App from '../src/App';

const PORT = process.env.PORT || 3006;
const app = express();

app.get('/*', (req, res) => {
  const appString = ReactDOMServer.renderToString(<App />);
  const helmet = Helmet.renderStatic();

  const html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
      </head>
      <body>
        <div id="root">
          ${ appString }
        </div>
      </body>
    </html>
  `

  res.send(html);
});

app.listen(PORT);

调用 Helmet 会renderStatic返回一个具有titleand 等属性的实例meta。您也将有机会获得像其他的属性link，script，noscript，style，htmlAttributes，和bodyAttributes。

第 5 步——异步渲染 react-helmet-async

正如来自 Spectrum的 @mxstbr所提出的，React Helmet 是同步工作的，这可能会导致服务器出现问题，尤其是流媒体问题。

React Helmet 的一个分支来救援：react-helmet-async.

  • npm install react-helmet-async@1.0.7

API 是一样的，除了 aHelmetProvider需要在客户端和服务器上包装组件树：

import Helmet, { HelmetProvider } from 'react-helmet-async';

function App() {
  return (
    <HelmetProvider>
      <div className="App">
        <Helmet>
          <title>App Title</title>
          <meta name="description" content="App Description" />
          <meta name="theme-color" content="#008f68" />
        </Helmet>
      </div>
    /HelmetProvider>
  );
}

有关 React Helmet Async 的意图和用法的更多信息，请参阅纽约时报开放博客的公告帖子。

结论

在本文中，您探索了 React Helmet 在 React 应用程序中的功能。特别是它如何与服务器端渲染配合以促进 SEO 和社交媒体集成。

这是一个很大的参考一切，可以进入一个文档的head由@joshbuchea。

如果您想了解有关 React 的更多信息，请查看我们的How To Code in React.js系列，或查看我们的 React 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁