react title 如何改变

修改 React 文档标题的方法

在 React 中修改页面标题（即 <title> 标签）可以通过以下几种方式实现：

使用 document.title

直接操作 DOM 修改标题，适用于简单场景：

document.title = "新的标题";

使用 React Helmet

react-helmet 是一个专门用于管理文档头部内容的库，适用于单页应用（SPA）：

import { Helmet } from "react-helmet";

function App() {
  return (
    <div>
      <Helmet>
        <title>自定义标题</title>
      </Helmet>
      {/* 其他组件内容 */}
    </div>
  );
}

使用 React 18+ 的 useEffect

结合 useEffect 在组件加载或状态变化时动态更新标题：

import { useEffect } from "react";

function Page() {
  useEffect(() => {
    document.title = "动态标题";
  }, []); // 空依赖数组表示仅在组件挂载时执行
  return <div>页面内容</div>;
}

结合路由动态更新标题

在 React Router 等路由库中，可以通过监听路由变化调整标题：

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

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

注意事项

• 在服务端渲染（SSR）场景中，需确保标题同步到初始 HTML 输出。
• react-helmet 支持更复杂的头部管理（如 meta 标签），适合 SEO 优化需求。
• 动态标题需考虑清理副作用（如 useEffect 的返回函数）。