当前位置：首页 > React

react如何做title

2026-01-24 15:35:10React

如何在React中动态设置页面标题

使用React Helmet库可以轻松管理文档头部标签安装依赖包npm install react-helmet或yarn add react-helmet 在组件中引入并添加Helmet标签

import { Helmet } from 'react-helmet';

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

使用原生document.title方法

在函数组件中使用useEffect钩子

react如何做title

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    document.title = '动态标题';
  }, []);

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

在类组件中使用componentDidMount生命周期

react如何做title

class MyComponent extends React.Component {
  componentDidMount() {
    document.title = '类组件标题';
  }

  render() {
    return <div>页面内容</div>;
  }
}

结合路由动态设置标题

使用react-router时可以根据路由配置标题

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

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

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

  useDocumentTitle(
    location.pathname === '/' 
      ? '首页' 
      : `当前页面 - ${location.pathname.slice(1)}`
  );

  return null;
}

标题管理的最佳实践

创建自定义hook集中管理标题逻辑

function useTitle(title) {
  useEffect(() => {
    const prevTitle = document.title;
    document.title = title;
    return () => {
      document.title = prevTitle;
    };
  }, [title]);
}

在Redux或Context中维护全局标题状态结合i18n实现多语言标题支持考虑SEO优化，确保标题包含关键词但不过长