React动态修改页面title之神器react-helmet
2021-11-19 09:01:11
原生js修改文档头：
```
document.title = '标题'
```
在react中可以在组件的componentDidMount生命周期中设置
```
document.title = '标题'
```
也可以
```
<Route onEnter={()=>{document.title='标题'}} />
```
或者安装react-helmet，这个可复用的react组件将管理你在文档头的所以更改。它你可以定制你的页面title，使用起来很简单：
安装：
```
npm install react-helmet --save
```
代码：
```
import React from 'react';
import {Helmet} from 'react-helmet';
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/" />
</Helmet>
...
</div>
)
}
};
```
特性：
1. 支持所有有效的头标签，title base meta link script noscript style
2. 支持body html title标签的属性
3. 支持服务端渲染
4. 嵌套组件或后面的组件会覆盖重复的head标签更改