react 如何修改title

修改 React 应用的标题方法

使用 document.title 直接修改
在组件生命周期或副作用钩子中直接设置 document.title，适用于简单场景：

import { useEffect } from 'react';

function Page() {
  useEffect(() => {
    document.title = '新的页面标题';
  }, []);
  return <div>内容</div>;
}

动态标题结合状态管理
通过组件状态或路由参数动态更新标题：

useEffect(() => {
  document.title = `用户资料 - ${username}`;
}, [username]);

使用 React Helmet 库
第三方库 react-helmet 提供更声明式的方法，支持嵌套组件内的标题管理：

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <div>
      <Helmet>
        <title>自定义标题</title>
      </Helmet>
      {/* 页面内容 */}
    </div>
  );
}

路由切换时自动更新
在 React Router 等路由库中结合 useEffect 或监听路由变化：

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

function App() {
  const location = useLocation();
  useEffect(() => {
    const titles = {
      '/': '首页',
      '/about': '关于我们'
    };
    document.title = titles[location.pathname] || '默认标题';
  }, [location]);
}

注意事项

• 避免在渲染循环中频繁修改标题，可能引发性能问题。
• 服务端渲染（SSR）场景需确保 document 对象存在或使用同构库如 react-helmet-async。