react title 如何改变
修改 React 文档标题的方法
在 React 中修改页面标题可以通过直接操作 document.title 或使用第三方库实现。以下是几种常见方法：
直接修改 document.title
在组件生命周期或 Hook 中直接设置：
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
document.title = '新标题';
}, []);
return <div>内容</div>;
}使用 React Helmet
React Helmet 是专门管理文档头部内容的库：
import { Helmet } from 'react-helmet';
function App() {
return (
<div>
<Helmet>
<title>动态标题</title>
</Helmet>
{/* 其他内容 */}
</div>
);
}路由切换时更新标题
结合 React Router 的路由变化自动更新标题：
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function useTitleFromRoute() {
const location = useLocation();
useEffect(() => {
const pageTitles = {
'/home': '首页',
'/about': '关于我们'
};
document.title = pageTitles[location.pathname] || '默认标题';
}, [location]);
}注意事项
- 直接操作
document.title需注意 SSR（服务端渲染）兼容性问题 - React Helmet 支持 SSR 且能管理更多 head 标签内容
- 动态标题应结合当前路由或组件状态更新
