如何在React单页应用中正确配置并使用动态meta标签

• 第一步：安装依赖
  优先选择支持并发渲染的react-helmet-async，执行命令：

  npm i react-helmet-async
  

• 第二步：全局注入Provider
  改造src/index.js入口文件，将根组件包裹在HelmetProvider中，示例代码：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { HelmetProvider } from 'react-helmet-async';
  import App from './App';
  import { BrowserRouter } from 'react-router-dom';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <HelmetProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </HelmetProvider>
  );
  

• 第三步：路由配置增加meta字段
  编辑src/routes.js，给每个路由追加自定义的meta配置，示例：

  import Home from './pages/Home';
  import Detail from './pages/Detail';
  
  export const routes = [
    {
      path: '/',
      element: <Home />,
      meta: {
        title: '首页',
        description: '应用首页描述'
      }
    },
    {
      path: '/detail/:id',
      element: <Detail />,
      // 动态路由的meta可以在组件内单独配置
    }
  ]
  

• 第四步：全局动态渲染meta
  在App.js中监听路由变化，匹配当前路由的meta配置，通过Helmet渲染到页面head：

  import { Helmet } from 'react-helmet-async';
  import { useLocation, useRoutes } from 'react-router-dom';
  import { routes } from './routes';
  
  function App() {
    const location = useLocation();
    const routeElement = useRoutes(routes);
    // 匹配当前路由配置
    const currentRoute = routes.find(item => item.path === location.pathname);
    const pageMeta = currentRoute?.meta || {
      title: '默认站点标题',
      description: '默认站点描述'
    };
  
    return (
      <>
        <Helmet>
          <title>{pageMeta.title}</title>
          <meta name="description" content={pageMeta.description} />
          {/* 可按需添加og标签、twitter卡片标签等 */}
        </Helmet>
        {routeElement}
      </>
    );
  }
  
  export default App;
  

• 第五步：动态路由/自定义页面的meta配置
  如果是详情页这类需要动态内容的页面，直接在对应组件内使用Helmet即可，示例：

  // src/pages/Detail.js
  import { Helmet } from 'react-helmet-async';
  import { useParams } from 'react-router-dom';
  import { useEffect, useState } from 'react';
  
  export default function Detail() {
    const { id } = useParams();
    const [article, setArticle] = useState({});
  
    useEffect(() => {
      // 模拟请求接口获取详情数据
      fetch(`/api/article/${id}`).then(res => res.json()).then(data => setArticle(data));
    }, [id]);
  
    return (
      <>
        <Helmet>
          <title>{article.title || '文章详情'}</title>
          <meta name="description" content={article.desc || '文章详情描述'} />
        </Helmet>
        <div className="detail-content">
          {/* 页面内容 */}
        </div>
      </>
    )
  }
  

• 注意事项：
  1. 客户端渲染场景下，右键查看页面源代码看不到动态替换的meta属于正常情况，因为源代码是初始的静态HTML模板，需要打开浏览器开发者工具的「Elements」面板查看head部分的实际渲染结果
  2. 执行npm start启动开发服务即可验证效果，不需要额外执行其他服务命令，你看到的占位符内容是public/index.html里的初始模板内容，Helmet会在客户端自动覆盖对应标签，不需要修改模板里的占位内容
  3. 如果需要搜索引擎爬虫抓取到动态meta，需要额外接入预渲染（Prerender）或者服务端渲染（SSR）方案

内容的提问来源于stack exchange，提问作者Ajith Arasu