react title 如何改变
修改 React 文档标题的方法
在 React 中修改页面标题（即 <title> 标签）可以通过以下几种方式实现：
使用 document.title
直接操作 DOM 修改标题，适用于简单场景：
document.title = "新的标题";使用 React Helmet
react-helmet 是一个专门用于管理文档头部内容的库，适用于单页应用（SPA）：
import { Helmet } from "react-helmet";
function App() {
return (
<div>
<Helmet>
<title>自定义标题</title>
</Helmet>
{/* 其他组件内容 */}
</div>
);
}使用 React 18+ 的 useEffect
结合 useEffect 在组件加载或状态变化时动态更新标题：
import { useEffect } from "react";
function Page() {
useEffect(() => {
document.title = "动态标题";
}, []); // 空依赖数组表示仅在组件挂载时执行
return <div>页面内容</div>;
}结合路由动态更新标题
在 React Router 等路由库中，可以通过监听路由变化调整标题：
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
function RouterTitleUpdater() {
const location = useLocation();
useEffect(() => {
const titles = {
"/": "首页",
"/about": "关于我们",
};
document.title = titles[location.pathname] || "默认标题";
}, [location.pathname]);
return null;
}注意事项
- 在服务端渲染（SSR）场景中，需确保标题同步到初始 HTML 输出。
react-helmet支持更复杂的头部管理（如 meta 标签），适合 SEO 优化需求。- 动态标题需考虑清理副作用（如
useEffect的返回函数）。
