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

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

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

先决条件

要阅读本文，您将需要：

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

注意： 本教程将不涉及创建 React 项目或设置服务器端渲染的步骤。 请参考 如何为 React App 启用服务器端渲染。


本教程已使用 Node v15.3.0、npm v6.14.9、react v17.0.1 和 react-helmet v6.1.0 进行了验证。

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

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

npm install react-helmet@6.1.0

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

src/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 组件的值。

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

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：

src/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。 description 和 theme-color 值的 meta 标签将保持不变，因为它们没有被覆盖。

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

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

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

src/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 服务器端渲染应用程序设置，您可以在调用 ReactDOMServer 的 renderToString 或 renderToStaticMarkup 后立即调用 React Helmet 的 renderStatic 方法以获取具有属性的实例对于 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 会返回一个具有 title 和 meta 等属性的实例。 您还可以访问其他属性，例如 link、script、noscript、style、htmlAttributes 和 [X114X ]。

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

正如 Spectrum 的 @mxstbr 在这里提出的 ，React Helmet 同步工作，这可能会导致服务器出现问题，尤其是流式传输。

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

npm install react-helmet-async@1.0.7

API 是相同的，除了 HelmetProvider 需要在客户端和服务器上包装组件树： 

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 和社交媒体集成。

如果您想了解有关 React 的更多信息，请查看我们的 如何在 React.js 中编码，或查看 我们的 React 主题页面 以了解练习和编程项目。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用ReactHelmet更改标题和元数据&oldid=26309”
Powered by MediaWiki