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 标签内容
• 动态标题应结合当前路由或组件状态更新