React-document-title实现动态更新页面Title

Bertha 。 2022-12-11 07:52 199阅读 0赞

因为react是单页应用，所以可能需要根据不同的路由改变文档的title。

我们可以使用react-document-title组件实现，其提供了一种document.title在单页面应用程序中指定的声明方式。

首先使用  **npm install react-document-title** 进行安装，然后在文件中引入 import DocumentTitle from "react-document-title"

官方文档提供了以下几种例子：

我在实现各页面动态显示title时，在各自文件render的return返回里，最外层使用DocumentTitle组件。

> render\{
> 
>     return(
> 
>          <DocumentTitle>
> 
>          ......
> 
>          </DocumentTitle>
> 
>    )
> 
> \}

然后，对其title属性可以定义想要现实的标题。这样，当点击切换到指定的页面时，就会动态变化title。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70][]

参考资料：

1. [https://www.npmjs.com/package/react-document-title][https_www.npmjs.com_package_react-document-title]

2. [https://www.jianshu.com/p/07ed93350483][https_www.jianshu.com_p_07ed93350483]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzMTMzNzgz_size_16_color_FFFFFF_t_70]: /images/20221123/b38fba1a77444434b1befb0d244c8971.png
[https_www.npmjs.com_package_react-document-title]: https://www.npmjs.com/package/react-document-title
[https_www.jianshu.com_p_07ed93350483]: https://www.jianshu.com/p/07ed93350483