React页面跳转后恢复默认文档标题的实现方案咨询

方法一：利用useEffect的清理函数（单页面场景） #

在设置自定义标题的页面组件中，通过useEffect的返回清理函数，在组件卸载（页面跳转离开）时恢复默认标题：

import { useEffect } from 'react';

function CustomTitlePage() {
  useEffect(() => {
    // 保存页面加载时的默认标题（即index.html中定义的标题）
    const originalTitle = document.title;
    // 设置当前页面的自定义标题
    document.title = '我的自定义页面标题';

    // 组件卸载时执行，恢复默认标题
    return () => {
      document.title = originalTitle;
    };
  }, []);

  return <div>自定义标题页面内容</div>;
}

核心逻辑是利用React组件生命周期：用户跳转到其他页面时，当前组件会被卸载，触发清理函数自动把标题改回初始值。

方法二：全局路由监听（多页面自定义标题场景） #

如果项目使用React Router这类路由库，可以在全局根组件中监听路由变化，每次页面跳转时自动重置标题为默认值：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  // 直接填写index.html中定义的默认标题，或在App初始化时保存原始值
  const defaultSiteTitle = '网站默认标题';

  useEffect(() => {
    // 路由路径变化时，重置文档标题为默认值
    document.title = defaultSiteTitle;
  }, [location.pathname]);

  return (
    {/* 你的路由配置和页面内容 */}
  );
}

这种方式下，每次页面跳转都会触发标题重置。如果某个页面需要自定义标题，只需在该页面的useEffect中重新设置即可——页面组件挂载晚于路由变化监听，自定义标题会覆盖全局默认设置，离开页面时路由变化又会触发全局标题重置。

注意事项 #

• 若使用其他路由框架，核心思路一致：监听路由切换事件，触发时重置标题。
• 建议在App初始化时保存一次默认标题（比如const defaultTitle = document.title），避免后续因其他页面修改标题后，取到的不是index.html中的原始值。

内容的提问来源于stack exchange，提问作者user978426