react更新页面title

最新推荐文章于 2024-09-03 11:14:21 发布

akkkkindless

最新推荐文章于 2024-09-03 11:14:21 发布

阅读量804

点赞数

文章标签：前端 react.js javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_55536307/article/details/128659431

版权

文章介绍了在React应用中如何使用ahooks库的useTitle钩子来动态修改页面标题。useTitle必须在函数组件的最顶层使用，可以传入一个变量来设置不同的标题。此外，文中还提供了一个示例，展示了在获取查询参数后更新标题的用法，并提及了自定义hooks的相关知识。

摘要由CSDN通过智能技术生成

当点击一个tab，跳转到同一个页面需要改变它的页面title的时候，可以引用ahooks里面的useTitle方法，useTitle的使用方法如下：

先从hoos里引入

import { useTitle } from "ahooks";

const App = () => {
    useTitle('name');//写在最顶层
    /*
    name是你想改的名字，useTitle里面也可以是一个变量
            */
}

不过需要注意的是，useTitle只能在函数最顶层使用，否则就会报错

正确用法示例：

const App = () => {
    useTitle('name');//写在最顶层
    /*
    name是你想改的名字，useTitle里面也可以是一个变量
            */
    const  getQuery = (name) =>{
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substring(1).match(reg);
        if(r!=null)return  decodeURI(r[2]); return null;
    }
    let keyName = getQuery('deptName');
    useTitle(keyName);
}

更多hooks用法：

10分钟教你手写8个常用的自定义hooks