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

介绍

React Helmet是一个动态管理文档head部分的组件一些常见的用例包括设置titledescription以及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 添加titlemeta元素。

第 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 TitleModified Titlemeta标记将保持不变,因为它们没有被覆盖。descriptiontheme-color

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

如果需要为它们指定属性,您甚至可以包含htmlbody元素。

例如,考虑一个应用bodydark主题元素

源代码/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 的方法renderToStringrenderToStaticMarkup获取一个具有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您也将有机会获得像其他的属性linkscriptnoscriptstylehtmlAttributes,和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 主题页面以获取练习和编程项目。

觉得文章有用?

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