当前位置：首页 > React

React如何给页面标题设置值

2026-01-26 02:21:26React

使用 document.title 直接设置

在 React 组件中直接修改 document.title 是最简单的方法。可以在 useEffect 钩子中设置，确保在组件挂载或更新时执行：

import React, { useEffect } from 'react';

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

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

使用 React Helmet 库

react-helmet 是一个专门用于管理文档头部的库，支持更复杂的场景（如 SSR）。安装后，在组件内通过 <Helmet> 标签设置标题：

React如何给页面标题设置值

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

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

结合路由动态设置标题

在 React Router 等路由库中，可以通过路由配置或监听路由变化动态设置标题。例如，在路由配置中为每个路由添加 title 属性：

React如何给页面标题设置值

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} title="首页" />
      <Route path="/about" element={<About />} title="关于我们" />
    </Routes>
  );
}

然后在路由组件中使用 useEffect 或 react-helmet 根据路由信息设置标题。

自定义 Hook 封装

封装一个自定义 Hook 以便复用标题逻辑，例如 useDocumentTitle：

import { useEffect } from 'react';

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

function MyComponent() {
  useDocumentTitle('Hook 设置的标题');
  return <div>页面内容</div>;
}