当前位置：首页 > React

react 如何修改title

2026-03-31 09:32:02React

修改 React 页面标题的方法

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

使用 `document.title` 直接修改

通过 JavaScript 原生方法直接修改 document.title，适用于简单的标题修改需求。

import React, { useEffect } from 'react';

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

  return <div>页面内容</div>;
}

使用 React Helmet 库

React Helmet 是一个第三方库，专门用于管理文档头部内容（如 title、meta 标签等），适用于需要动态修改标题的复杂场景。

安装依赖：

npm install react-helmet

使用示例：

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

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>自定义页面标题</title>
      </Helmet>
      <div>页面内容</div>
    </div>
  );
}

结合路由动态修改标题

在单页应用（SPA）中，通常需要根据路由动态修改标题。可以与 react-router 结合使用。

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

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

  useEffect(() => {
    const pageTitles = {
      '/': '首页',
      '/about': '关于我们',
      '/contact': '联系我们'
    };
    document.title = pageTitles[location.pathname] || '默认标题';
  }, [location.pathname]);

  return <div>页面内容</div>;
}

使用自定义 Hook 封装

将标题修改逻辑封装成自定义 Hook，方便复用。

react 如何修改title

import { useEffect } from 'react';

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

function MyComponent() {
  useDocumentTitle('动态标题');
  return <div>页面内容</div>;
}

以上方法可以根据项目需求灵活选择，React Helmet 提供了更全面的头部管理能力，而直接修改 document.title 则更轻量。