当前位置：首页 > React

react如何做title和描述

2026-01-25 23:22:35React

动态设置页面标题和描述

在React中动态设置页面标题和描述可以通过直接操作document对象或使用第三方库来实现。以下是几种常见方法：

使用原生JavaScript方法

通过直接修改document.title和<meta>标签来更新标题和描述：

// 设置标题
document.title = '新页面标题';

// 设置描述
const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) {
  metaDescription.setAttribute('content', '新页面描述');
}

使用React Helmet

React Helmet是一个专门用于管理文档头的React组件库：

import { Helmet } from 'react-helmet';

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

在React Router中动态设置

结合路由变化动态更新标题和描述：

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

function useDocumentTitle(title, description) {
  const location = useLocation();

  useEffect(() => {
    document.title = title;
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', description);
    }
  }, [location, title, description]);
}

// 在组件中使用
function ProductPage() {
  useDocumentTitle('产品页', '产品详细信息');
  return <div>...</div>;
}

使用自定义Hook

创建一个可复用的Hook来管理标题和描述：

import { useEffect } from 'react';

function usePageMetadata(title, description) {
  useEffect(() => {
    document.title = title;

    let metaDescription = document.querySelector('meta[name="description"]');
    if (!metaDescription) {
      metaDescription = document.createElement('meta');
      metaDescription.name = 'description';
      document.head.appendChild(metaDescription);
    }
    metaDescription.content = description;

    return () => {
      document.title = '默认标题';
    };
  }, [title, description]);
}

// 使用示例
function AboutPage() {
  usePageMetadata('关于我们', '公司介绍和相关信息');
  return <div>...</div>;
}

服务端渲染(SSR)考虑

对于服务端渲染应用，需要确保服务器端也能正确设置这些元数据：

// Next.js示例
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>首页标题</title>
        <meta name="description" content="首页描述" />
      </Head>
      {/* 页面内容 */}
    </div>
  );
}