react title 如何改变

修改 React 页面标题的方法

使用 document.title 直接修改
在组件生命周期或副作用钩子中直接修改 document.title：

import { useEffect } from 'react';

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

结合路由动态修改标题
在使用 React Router 时，可通过路由配置或导航守卫更新标题：

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

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

使用第三方库（如 react-helmet）
react-helmet 提供更灵活的标题管理，支持嵌套和组件化：

import { Helmet } from 'react-helmet';

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

注意事项

• 动态标题需确保在组件挂载或路由变化时触发更新。
• 使用 useEffect 时需处理依赖项以避免重复渲染。
• 服务端渲染（SSR）场景需结合 react-helmet 等库同步标题。