本文介绍在 React 应用中动态修改 document.title 后，如何在组件卸载（即用户导航离开该页面）时自动恢复默认标题，避免残留标题影响其他页面体验。
本文介绍在 react 应用中动态修改 document.title 后，如何在组件卸载（即用户导航离开该页面）时自动恢复默认标题，避免残留标题影响其他页面体验。
在单页应用（SPA）中，React 组件通过 useEffect 动态设置页面标题是一种常见做法，例如根据 API 数据或路由参数更新 <title></title> 标签内容：
useEffect(() => {
const displayTitle = loadTitle(); // 例如：`fetch('/api/page').then(res => res.name)`
document.title = displayTitle;
}, []);然而，这种写法仅设置了初始标题，却未处理“清理”逻辑——当用户点击链接跳转到其他路由时，当前组件卸载，但 document.title 仍保持上一个页面的值，直到手动刷新才恢复 index.html 中定义的默认标题（如 "My Page Title"）。这不仅影响用户体验，还可能干扰 SEO 和浏览器历史记录行为。
解决方法是利用 useEffect 的清理函数（cleanup function）：useEffect 接收的回调函数可返回一个函数，该函数会在组件即将卸载或依赖项变更前执行。我们正是在此处将标题重置为原始默认值：
useEffect(() => {
const originalTitle = document.title; // 保存初始标题（推荐方式）
const displayTitle = loadTitle();
document.title = displayTitle;
// 清理函数：组件卸载时恢复原始标题
return () => {
document.title = originalTitle;
};
}, []);✅ 关键优势：
- 精确还原——不是硬编码空字符串或固定字符串（如
""或"My Page Title"），而是捕获并恢复index.html中的真实初始值； - 避免竞态风险——若多个组件同时操作
document.title，基于快照的还原更安全； - 符合 React 官方推荐模式——React 官方文档 明确指出清理函数适用于“撤销副作用”的场景。
⚠️ 注意事项：
- 若项目使用
react-router-domv6+，也可结合useNavigate或useLocation实现更细粒度控制（如仅在特定路由间切换时重置），但对大多数场景，useEffect清理函数已足够简洁可靠； - 不建议在清理函数中调用异步操作（如
await fetch(...)），因为清理函数必须同步执行； - 若应用全局统一管理标题（如配合
Helmet或自定义TitleProvider），应优先采用集中式方案，避免分散副作用。
总之，通过 useEffect 返回清理函数，即可优雅、可靠地实现“进入设标题，离开复原题”，让每个页面真正拥有独立且干净的标题生命周期。
