react如何做title
修改页面标题的方法
在React中动态修改页面标题可以通过以下几种方式实现：
使用document.title直接设置
最直接的方法是使用浏览器原生API：
document.title = "新的页面标题";这种方法适用于简单的场景，在组件挂载时设置即可。
使用React Helmet库
React Helmet是一个专门管理文档头的库，支持SSR：
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<title>自定义标题</title>
</Helmet>
{/* 组件内容 */}
</div>
);
}Helmet可以嵌套在任何组件中，会自动合并多个组件的头部设置。
在React Router中动态设置
配合路由使用时，可以在路由配置中定义title：
const routes = [
{
path: '/',
element: <HomePage />,
title: '首页'
}
];
// 在路由拦截器中设置
router.beforeEach((to) => {
document.title = to.meta.title || '默认标题';
});使用自定义Hook
创建useDocumentTitle Hook实现复用：
function useDocumentTitle(title) {
useEffect(() => {
document.title = title;
}, [title]);
}
// 在组件中使用
function MyComponent() {
useDocumentTitle("动态标题");
return <div>...</div>;
}注意事项
- 在SSR场景下需要考虑服务端渲染时的标题设置
- 动态标题应该与当前路由或组件内容相关
- 标题变化应考虑SEO需求
- 使用Helmet时注意版本差异（有react-helmet和react-helmet-async两个版本）
选择哪种方法取决于项目复杂度，简单项目直接使用document.title即可，复杂SPA建议使用React Helmet或自定义Hook方案。
