如何在Vite React中动态修改页面标题？

下面是几种比直接写零散useEffect更符合React组件化、复用思想的实现方式：

1. 封装自定义Hook #

把设置标题的逻辑抽成可复用的Hook，既能统一逻辑，又方便在各页面调用：

import { useEffect } from 'react';

export function useDocumentTitle(title) {
  useEffect(() => {
    const originalTitle = document.title;
    document.title = title;
    // 可选：组件卸载时恢复原标题
    return () => {
      document.title = originalTitle;
    };
  }, [title]);
}

在页面组件中使用：

import { useDocumentTitle } from './hooks/useDocumentTitle';

function HomePage() {
  useDocumentTitle('首页 - 我的应用');
  return <div>首页内容</div>;
}

2. 结合React Router自动设置标题（路由场景） #

如果项目用React Router管理页面，可以通过路由元信息或路由监听来批量处理标题：

基于路由元信息的全局监听 #

先在路由配置中定义每个页面的标题：

const routes = [
  {
    path: '/',
    element: <HomePage />,
    meta: { title: '首页 - 我的应用' }
  },
  {
    path: '/about',
    element: <AboutPage />,
    meta: { title: '关于我们 - 我的应用' }
  }
];

然后在根组件中监听路由变化，自动更新标题：

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

function App() {
  const location = useLocation();

  useEffect(() => {
    const matchedRoute = routes.find(route => route.path === location.pathname);
    document.title = matchedRoute?.meta?.title || '我的应用';
  }, [location]);

  return (
    <Routes>
      {/* 渲染路由 */}
    </Routes>
  );
}

动态标题场景（结合自定义Hook） #

如果需要根据接口数据动态生成标题，直接在页面组件中结合自定义Hook使用即可：

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { useDocumentTitle } from './hooks/useDocumentTitle';

function ProductDetailPage() {
  const { id } = useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(data => setProduct(data));
  }, [id]);

  useDocumentTitle(product ? `${product.name} - 商品详情` : '加载中...');

  return <div>{product ? product.description : '加载中'}</div>;
}

3. 使用react-helmet-async管理Head内容 #

如果需要同时管理标题、meta标签、link标签等Head内容，推荐用react-helmet-async（适配React 18+的异步版本）：

安装依赖：

npm install react-helmet-async

先在根组件中注入Provider：

import { HelmetProvider } from 'react-helmet-async';

function Root() {
  return (
    <HelmetProvider>
      <App />
    </HelmetProvider>
  );
}

然后在页面组件中使用Helmet组件设置标题及其他Head内容：

import { Helmet } from 'react-helmet-async';

function ContactPage() {
  return (
    <>
      <Helmet>
        <title>联系我们 - 我的应用</title>
        <meta name="description" content="欢迎通过以下方式联系我们" />
      </Helmet>
      <div>联系我们内容</div>
    </>
  );
}

这些方案都比直接在每个页面写独立的useEffect更规范、更符合React的设计理念，可根据项目需求选择合适的方式。

内容的提问来源于stack exchange，提问作者behnam rahmani