当前位置：首页 > React

react 如何修改title

2026-02-12 06:12:36React

修改 React 应用的 title

在 React 中修改页面标题（title）可以通过以下几种方式实现，具体取决于项目环境和需求。

使用 document.title

直接通过 JavaScript 修改 document.title 是最简单的方法，适用于任何 React 项目：

document.title = "新的页面标题";

可以在组件的 useEffect 钩子中调用，确保标题在组件挂载时更新：

react 如何修改title

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    document.title = "新的页面标题";
  }, []);

  return <div>组件内容</div>;
}

使用 react-helmet

对于更复杂的场景（如 SEO 或多页面应用），推荐使用 react-helmet 库。它支持在组件级别动态管理标题和其他头部标签。

安装依赖：

react 如何修改title

npm install react-helmet

在组件中使用：

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

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>动态页面标题</title>
      </Helmet>
      <div>组件内容</div>
    </div>
  );
}

在 Next.js 中修改标题

如果使用 Next.js 框架，可以通过内置的 Head 组件修改标题：

import Head from 'next/head';

function MyPage() {
  return (
    <div>
      <Head>
        <title>Next.js 页面标题</title>
      </Head>
      <div>页面内容</div>
    </div>
  );
}

动态标题（基于状态或路由）

结合路由或组件状态动态更新标题：

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

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

  useEffect(() => {
    document.title = `当前路由: ${location.pathname}`;
  }, [location]);

  return <div>动态标题示例</div>;
}

以上方法覆盖了从简单到复杂的场景，可以根据项目需求选择最适合的方案。