修改document.title之react-helmet的使用

需求

在一个大的业务框架中，在用户点击某个模块时， 需要显示的将document.titile改成某模块名称

解决方式

1. 使用代码

document.title = '测试模块'

2. react-helmet

import { Helmet } from 'react-helmet';
// ....
 return (
    <>
        <Helmet>   
             <meta charSet="utf-8" />
            <title>测试模块</title>
        </Helmet>
        <WrapperedComponent {...props} />
    </>
);

react-helmet

React Helmet是一个HTML文档head管理工具，管理对文档头的所有更改。React Helmet采用纯HTML标记并输出纯HTML标记，非常简单，对React初学者十分友好。

• 支持所有有效的head标签: title、 base、 meta、 link、 script、 noscript、 和style。
• 支持body、 html 和 title 的属性
• 支持服务端渲染
• 嵌套组件覆盖重复的head标签更改。
• 在同一组件中定义时，将保留重复的head标签更改。(支持如"apple-touch-icon"的标签).
• 支持跟踪DOM更改的回调

总结

react-helmet支持的功能更多、更广

document.title 只是更改title

react-helmet