React Helmet是一个npm库，提供react组件来改变和更新反应页面中html的head标签内的标签值。
Head是title、meta、script、link、noscript和style标签的父标签，所以你可以动态地改变或设置这些标签的值。
本教程包括一个基本的react-helmet包，如何动态地改变文档头部的值，它在服务器端渲染时对SEO有什么作用。
为什么需要它，它的优点是什么？
在Index.html中，你可以设置基本的头部子项，如下所示
public/index.html
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="react descript" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>React title</title>
</head>
这是你的反应页面的主要组件。你创建的任何组件都将作为主组件的子组件被渲染，即App.js。
你可以用头盔组件动态地覆盖父组件和子组件的值。
它有助于覆盖和动态更新head标签内的子元素，这对单页应用程序中的每一个页面的爬行者来说都非常有用。
一些重要的功能
- 可以改变所有标签--标题、元、脚本、链接、非脚本和样式标签。
- 它很容易集成到服务器端和客户端的渲染中。
安装方法
首先，用npm或yarn命令安装库到现有的react应用中。
yarn add react-helmet
npm install react-helmet
使用 react-helmet 例子改变 html head childers
Helmet是一个可以动态改变文档头部属性值的组件。
import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
class AddingScriptExample extends Component {
render() {
return (
<div className="application">
<Helmet>
<base />
<title>React helmet example</title>
<meta name="description" content="React helment is useful for seo for dynamically changing head information" />
<link rel="canonical" href="somelink" />
<script type="text/javascript">
alert('react component script');
</script>
</Helmet>
...
</div>
);
}
}
export default AddingScriptExample;
你可以在你的网页的视图源选项中检查这些元标签。
以下是可以用Helmet组件动态改变的属性
base - 页面的基本路径 meta - 网页的元数据信息，这些可以有属性类型robots,description,keywords link - 添加外部样式 script - 这可以添加内联脚本和外部javascript文件。
注意：如果有任何动态覆盖标签值的问题，请尝试在helemet组件内的标签上添加data-react-helmet=true。
如何加载内联和外部脚本标签
如果你想给react组件添加自定义的JavaScript，你可以添加以下一行代码。
在头盔组件内定义type="text/javascript "的脚本标签。
<helmet>
<script type="text/javascript">
alert('react component script');
</script>
</helmet>
添加自定义脚本的URL，我们可以用脚本URL的语法来做[这里]
我们可以使用PureComponent而不是Component，因为不需要改变状态或道具，并对标量值和对象引用进行浅层比较，从而提高加载组件的性能。
import React from 'react'
import { Helmet } from 'react-helmet'
class DocumentTitle extends React.PureComponent {
render() {
return (
<>
<Helmet>
<title>About us</title>
</Helmet>
</>
)
}
}
export default DocumentTitle;
react-helmet-async例子
helmet组件是同步的，在客户端渲染时工作得很好。
它在服务器端导致了一个问题，即在流化组件时忽略了 react 的副作用。
react-helmet-async需要提供者在react应用中捕获DOM树上的头盔组件状态。
异步使用和头盔组件一样，希望通过在HelmetProvider 组件内添加组件。
你也可以在服务器端渲染中使用renderToString ，以便更好地使用。
import Helmet, { HelmetProvider } from "react-helmet-async";
class HelmentAsyncExample extends Component {
render() {
return (
<HelmetProvider>
<div >
<Helmet>
<title>React Helmet Asyc example</title>
<link rel="canonical" href="https://www.url.com/" />
<meta keywords=" seo keywords" />
<meta description=" website description" />
</Helmet>
</div>
</HelmetProvider>
)
}
}
export default HelmentAsyncExample;
服务器端渲染的例子
在服务器端，调用**Helmet.renderStatic()**方法，在预渲染过程中获得文档头标签值。
这里是组件的示例代码。
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 expressServer = express();
expressServer.get('/*', (req, res) => {
const appRender = renderToString();
const helmet = Helmet.renderStatic();
res.send(stringHtml(appRender, helmet));
});
expressServer.listen(4000);
function stringHtml(appStr, helmet) {
return `
<!doctype html>
<html ${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="container">
// react component code can be added
</div>
</body>
</html>
`
}
优点
- 在单页应用中动态添加标签，提高每个页面的搜索引擎优化。
- 帮助爬虫和搜索引擎机器人理解页面
- 如果在反应树组件中有多个不同值的元标签，子组件会覆盖父组件。
