React Helmet

2025年3月17日 | 阅读 8 分钟

每个开发人员都希望他的网站出现在浏览器搜索结果页面的顶部。不幸的是，在某些情况下，搜索引擎爬虫无法被证明是可靠的。出现此问题的原因是浏览器无法呈现 JavaScript。这意味着在 React 或 Angular 平台 上构建的 SPA 无法受到搜索引擎爬虫的青睐。这是开发人员在将页面带到网页顶部时面临的最重要的问题之一。因此，为了解决这个问题，可以使用服务器端渲染，但它通常具有适应性限制。这就是 React Helmet 发挥作用的地方。

什么是 React Helmet？

React Helmet 可以被称为基于 React 的应用程序的文档 head 管理器。使用它，开发人员可以轻松地更新服务器端和客户端上存在的 meta 标签。这个库可以被称为对 SEO 起关键作用的应用程序的完美选择。它也是一个媒体友好的库，具有不同的依赖项和特性，使其易于在任何 React 应用程序中使用。我们将在本教程中研究所有方面，并了解如何在您的项目中添加 React Helmet。

设置

在继续之前，我们需要使用传统且最有效的 npm 方法安装 React Helmet。我们将首先使用一些命令初始化一个新的 React 项目，并在服务器准备就绪时开始开发过程。

要安装和初始化 React Helmet，请遵循以下命令。

 npx create-react-app react-helmet-tutorial
cd react-helmet-tutorial
npm start 

确保系统端口 3000 被占用，然后您可以直接转到 https://:3000 并查看您的应用程序。

新创建的 React 应用程序

我们可能已经知道，像大多数可用的 SPA 一样，我们的应用程序将有一个默认的 <head> 元素。如果我们移至浏览器进行检查并在 Chrome 中按 F12 或在 Firefox 浏览器中使用 Ctrl+Shift+C，则可以轻松地验证这一点。分析 Chrome 上的内容，我们可能会看到 <head> 元素是什么样的。

<head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/logo192.png">

    <link rel="manifest" href="/manifest.json">

    <title>React App</title>
  <style type="text/css">
   <!-- CSS -->
  </style>
</head>

还有另一种管理 <head> 的方法。这是通过更新 public/index.html 目录完成的，但并不总是一个替代方案，因为它是一个坏习惯。完成此步骤后，我们需要在我们的项目中使用和使用 React Helmet。

安装和设置

React Helmet 可以通过 Yarn 或 npm 使用以下命令安装到您的 React 项目中。

npm install react-helmet

# OR, using Yarn:

yarn add react-helmet

接下来是遵循导入 Helmet 组件的过程。完成后，我们可以轻松地将元素添加到文档的 <head> 中。请参阅以下代码段中如何实现以下步骤。

// src/App.js

import React from "react";
import "./App.css";
import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">

      <Helmet>
        <html lang="en" />
        <title>React Helmet Tutorial</title>
        <meta name="description" content="Tutorial for React Helmet" />
        <meta name="theme-color" content="#E6E6FA" />
      </Helmet>

      <header className="App-header">Title will be React Helmet 
Tutorial</header>
    </div>
  );
}
export default App;

将上述代码段更新到目录 src/App.js 文件后，我们将注意到 React 应用程序中的更改。

在此代码段中，为了保持易于理解的水平，我们仅使用了 <title>、<html> 和 <meta> 标签元素用于描述，并且还使用了一些主题颜色用于其他元素，例如 base、meta、link、script 等。这些元素通常被视为 Helmet 的子元素。下面是一个示例，我们可以在其中看到为 body 标签和 html 标签定义的属性。

 <Helmet>
        {/* html attributes */}
        <html lang="en" />

        {/* body attributes */}
        <body className="dark" />

        {/* title element */}
        <title>React Helmet Tutorial</title>

        {/* base element */}
        <base target="_blank" href="https://blog.logrocket.com/" />

        {/* meta elements */}
        <meta name="description" content="Tutorial for React Helmet" />

        <meta name="theme-color" content="#E6E6FA" />

        {/* link elements */}
        <link rel="canonical" href="https://blog.logrocket.com/" />
</Helmet>

// src/Child.js

import React from "react";
import { Helmet } from "react-helmet";
function Child() {
  return (
    <div>
      <Helmet>
        <title>Child Component Rocks!</title>
      </Helmet>
     {"  "}  This time title will be  Child Component Rocks! 
    </div>
  );
}
export default Child;

注意：上面的例子存在歧义，因为我们可能不知道是子元素还是父元素优先。

为了澄清这一点，将优先考虑子组件。考虑下面的代码

// src/Child.js

import React from "react";
import { Helmet } from "react-helmet";
function Child() {
  return (
    <div>
      <Helmet>
        <title>Child Component Rocks!</title>
      </Helmet>
     {"  "}  This time title will be  Child Component Rocks! 
    </div>
  );
}
export default Child;

现在，要将子组件（即 Child.js 文件）导入到父组件（即 App.js 文件），我们一定不要忘记根据子组件更改文档的标题。但是，了解元数据和主题颜色无法被覆盖也很重要。同样，演示在下面给出的代码段中显示。

// src/App.js

import React from "react";
import "./App.css";
import { Helmet } from "react-helmet";
import Child from "./Child";
function App() {
  return (
    <div className="App">
      <Helmet>
        <title>React Helmet Tutorial</title>
        <meta name="description" content="Tutorial for React Helmet" />
        <meta name="theme-color" content="#E6E6FA" />
      </Helmet>

      <header className="App-header">
        Title will not be React Helmet Tutorial <Child />
      </header>
    </div>
  );
}
export default App;

这里要考虑的另一个例子是，两个子组件中后出现的将始终被优先考虑。例如，考虑两个子组件 <Child1> 和 <Child2>，然后 <Child2> 将被优先考虑，反之亦然。支持此声明的演示在下面给出。

// src/App.js
import React from "react";
import "./App.css";
import { Helmet } from "react-helmet";
import Child1 from "./Child1";
import Child2 from "./Child2";
function App() {
  return (
    <div className="App">
      <Helmet>
        <title>React Helmet Tutorial</title>
        <meta name="description" content="Tutorial for React Helmet" />
        <meta name="theme-color" content="#E6E6FA" />
      </Helmet>
      <header className="App-header">
        Title will not be React Helmet Tutorial 

        <Child1 />
        <Child2 />
      </header>
    </div>
  );
}
export default App;

从上面的代码可以看出，标题将根据 <Child2> 组件设置。如果顺序颠倒，则 <Child1> 将被设置为优先。这可以使用下面显示的代码段显示。

 <header className="App-header">
        Title will not be React Helmet Tutorial 
        <Child2 />
        <Child1 />
</header>

React Helmet 与 SSR 集成

正如我们之前讨论的，React Helmet 主要被提名为应用程序渲染在应用程序服务器端驻留的最佳合作伙伴；您可以通过设置一个示例的 React SSR 应用程序来轻松地参考这些术语。因此，在应用程序的服务器端代码中，紧接在 ReactDOMServerr 的 renderToString 或 renderToStaticMarkup 之后，我们需要应用 Helmet 中的 render static 方法。为了说明如何完成，请考虑下面的代码段。

// server/index.js
import React from "react";
import { renderToString } from "react-dom/server";
import express from "express";
import App from "./src/App";
import { Helmet } from "react-helmet";
const app = express();  

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

  const html = `
  <!DOCTYPE html>
  <html ${helmet.htmlAttributes.toString()}>
    <head>
      ${helmet.title.toString()}
      ${helmet.meta.toString()}
      ${helmet.link.toString()}
    </head>
    <body ${helmet.bodyAttributes.toString()}>
      <div id="root">
        ${app}
      </div>
      </body>
  </html>
`;
    res.send(html);
});
app.listen(8000);

重要的是要理解，在每个 Helmet 属性中，都有一个 toString() 方法。此方法主要用于 HTML 字符串内。它也是 Helmet 的渲染静态实例，通常会返回所有涵盖的属性，例如 script、link、title 等，并且所有这些属性都包含默认的 toString() 方法。

同步工作以继续 React Helmet 的 SSR 实现可能并不总是一个好选择。如果我们开放或受限于进行异步请求（如流式传输），则 React Helmet 将导致潜在的威胁和错误。因此，为了解决这个问题，我们使用 react-helmet-async 方法。此方法通过显式 fork React Helmet 解决了这个问题。要安装它，我们需要在 node 环境中运行以下终端命令。

运行此命令后，我们需要确保保留所有内容，除了使用 HelmetProvider 之外，以便 React 树同时封装在服务器端和客户端。下面的简单演示显示了这一点。

// src/App.js
import React from "react";
import "./App.css";
import  {Helmet, HelmetProvider } from 'react-helmet-async';
function App() {
  return (
    <HelmetProvider>
    <div className="App">
      <Helmet>
        <title>React Helmet Tutorial</title>
        <meta name="description" content="Tutorial for React Helmet" />
        <meta name="theme-color" content="#E6E6FA" />
      </Helmet>
      <header className="App-header">
        Title will be React Helmet Tutorial 
      </header>
    </div>
    </HelmetProvider>
  );
}
export default App;

React Helmet 和 React Router

如果构建的应用程序使用 React Router 进行路由，则 React Helmet 的工作效果很好。与之关联的一个钩子是我们需要将 React Helmet 与每个 Router 一起使用，这样路由才能保持不变，这可以使用下面的代码段进行演示。

// src/App.js
import React from "react";
import { Helmet } from "react-helmet";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import Home from './Home'
import About from './About'
export default function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}
Where Home.js is:

// src/Home.js
import React from "react";
import { Helmet } from "react-helmet";
import {  Link } from "react-router-dom";

const Home = () => (
  <div>
    <Helmet>
      <title>Home</title>
    </Helmet>
    <h2>Home.</h2>
    <Link to="/about">About</Link>
  </div>
);

export default Home
And About.js is:

// src/About.js
import React from "react";
import { Helmet } from "react-helmet";
import {  Link } from "react-router-dom";

const About = () => (
  <div>
    <Helmet>
      <title>About</title>
    </Helmet>
    <h2>About.</h2>
    <Link to="/">Home</Link>
  </div>
);
export default About;

这就是使用 React Helmet 和 React Router 完成路由的方式，并且该方法可以尽可能多地用于路由。

结论

在本教程中，我们学习了如何安装、设置和使用 React Helmet。React Helmet 是一个强大的库，主要用作文档 head 管理器，可将我们的 SEO 带到网页的顶部。它很小巧且易于使用，如果应用程序的构建目的是保持在排行榜的首位，那么它比同类中的任何库都更胜一筹。

下一主题React 中的内联样式

React Helmet

什么是 React Helmet？

设置

新创建的 React 应用程序

安装和设置

注意：上面的例子存在歧义，因为我们可能不知道是子元素还是父元素优先。

React Helmet 与 SSR 集成

React Helmet 和 React Router

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React Helmet

什么是 React Helmet？

设置

新创建的 React 应用程序

安装和设置

注意：上面的例子存在歧义，因为我们可能不知道是子元素还是父元素优先。

React Helmet 与 SSR 集成

React Helmet 和 React Router

结论

相关帖子

React 中什么是 useState

React 开发人员简历

React.js vs Node.js

ReactJS useEffect Hook

React 中的条件 CSS

ReactJS 工作

React 中的 Tailwind CSS

如何在 React 中使用 ForwardRef

React Axios 删除请求示例

React 中的单元测试

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器