当前位置：首页 > React

react 如何修改title

2026-02-26 16:08:14React

修改 React 应用中的标题

在 React 中修改页面标题可以通过以下几种方式实现，具体选择取决于项目需求和技术栈。

使用 `document.title` 直接修改

最直接的方式是操作 DOM 的 title 属性。可以在组件生命周期或 Hook 中动态设置标题：

import { useEffect } from 'react';

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

此方法适用于简单场景，但缺乏路由同步能力。

结合 React Router 动态更新标题

在路由应用中，可通过监听路由变化同步标题：

react 如何修改title

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]);
  return null;
}

将 TitleUpdater 组件放置在路由根组件中即可自动同步。

使用第三方库

对于复杂需求，可选用专门的头管理库：

react 如何修改title

npm install react-helmet

使用示例：

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <div>
      <Helmet>
        <title>动态标题</title>
        <meta name="description" content="页面描述" />
      </Helmet>
      {/* 页面内容 */}
    </div>
  );
}

react-helmet 支持 SSR 且能管理完整的 head 标签内容。

在 Next.js 中的实现

Next.js 内置了头管理组件：

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Next.js 页面标题</title>
      </Head>
      {/* 页面内容 */}
    </>
  );
}

选择方案时应考虑：是否需要 SSR 支持、是否涉及路由同步、是否需要管理其他 head 元素等因素。对于现代 React 项目，推荐使用 react-helmet 或其替代库 react-helmet-async 以获得最完整的解决方案。