介绍
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、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
组件添加到组件中:
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
:
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
:
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
标记将保持不变,因为它们没有被覆盖。description
theme-color
第 3 步 – 处理html
和的属性body
如果需要为它们指定属性,您甚至可以包含html
和body
元素。
例如,考虑一个应用body
了dark
主题的元素:
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
数据属性的实例:
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
and 等属性的实例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 主题页面以获取练习和编程项目。