简介

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、npmv6.14.9、reactv17.0.1 和react-helmetv6.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组件的值。

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

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和bodyAttributes。

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

正如 Spectrum 的 @mxstbr](https://spectrum.chat/thread/056d029c-99cc-4a54-889c-986497bc5646)在这里提出的[,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 的意图和使用的更多信息,请参阅纽约时报公开博客](https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183)上的[公告帖子。

结论

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

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

# reactnative
Logo
React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

avatar React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。 为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。 我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。 你可以在这里找到 repo u003d>githu

avatar React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

avatar React