React Meta Tags：轻松处理同构React应用中的文档元数据-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00256/article/details/142074825

React Meta Tags：轻松处理同构React应用中的文档元数据

react-meta-tagsHandle document meta/head tags in isomorphic react with ease.项目地址:https://gitcode.com/gh_mirrors/re/react-meta-tags

项目介绍

在同构React应用中处理文档的元数据（如<title>和<meta>标签）一直是一个棘手的问题。虽然可以在组件中以声明式的方式定义这些标签，但在客户端和服务器端都需要将它们移动到文档的<head>中。虽然有一些模块（如react-helmet和react-document-meta）可以帮助解决这个问题，但它们要求以对象字面量的形式定义这些标签。而react-meta-tags则允许你以声明式的方式和正常的JSX格式编写这些标签。

项目技术分析

react-meta-tags的核心优势在于其简洁的API设计和灵活的使用方式。它不仅支持在组件中直接定义<title>和<meta>标签，还提供了MetaTags和ReactTitle两个组件，分别用于处理复杂的元数据和简单的页面标题。此外，react-meta-tags还提供了服务器端渲染的支持，确保在同构应用中元数据的一致性。

项目及技术应用场景

react-meta-tags适用于以下场景：

SEO优化：在React应用中，动态生成页面标题和元数据，以提高搜索引擎的抓取效果。
社交媒体分享：为不同的页面生成不同的Open Graph标签，确保在社交媒体上分享时显示正确的预览信息。
同构应用：在服务器端渲染时，确保元数据的一致性，避免客户端和服务器端渲染结果不一致的问题。

项目特点

声明式定义：使用标准的JSX语法定义<title>和<meta>标签，代码更直观易读。
服务器端渲染支持：通过MetaTagsServer和MetaTagsContext组件，轻松实现服务器端渲染，确保元数据的一致性。
灵活的API：提供了MetaTags和ReactTitle两个组件，分别适用于复杂的元数据和简单的页面标题处理。
元数据唯一性：通过id、property、name和itemProp属性唯一标识元数据，避免重复标签的问题。

安装与使用

安装

通过npm安装：

npm install react-meta-tags --save

或者从./dist目录获取编译后的开发和生产版本。

使用示例

使用MetaTags组件

import React from 'react';
import MetaTags from 'react-meta-tags';

class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta name="description" content="Some description." />
            <meta property="og:title" content="MyApp" />
            <meta property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

注意：在标签上定义id，以便在导航到其他页面时，旧的元数据标签会被移除并替换为新的标签。

使用ReactTitle组件

如果你只想在页面上添加标题，可以使用ReactTitle组件：

import React from 'react';
import {ReactTitle} from 'react-meta-tags';

class Component2 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <ReactTitle title="Page 2"/>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

服务器端使用示例

import MetaTagsServer from 'react-meta-tags/server';
import {MetaTagsContext} from 'react-meta-tags';
/** 导入其他需要的模块 **/

/*
------
  一些服务器端特定的代码
------
*/

app.use((req, res) => {
  //确保为每个请求获取一个新的metaTags实例
  const metaTagsInstance = MetaTagsServer();

  //react router匹配
  match({
    routes, location: req.url
  }, (error, redirectLocation, renderProps) => {
    let reactString;

    try{
      reactString = ReactDomServer.renderToString(
      <Provider store={store}> {/*** 如果你使用redux ***/}
      {/* 你必须通过MetaTagsContext传递extract方法，以便它可以捕获元数据标签 */}
        <MetaTagsContext extract = {metaTagsInstance.extract}>
          <RouterContext {...renderProps}/>
        </MetaTagsContext>
      </Provider>
      );
    }
    catch(e){
      res.status(500).send(e.stack);
      return;
    }

    //获取所有标题和元数据标签作为字符串
    const meta = metaTagsInstance.renderToString();

    //将元数据字符串附加到你的布局中
    const htmlStr = (`
      <!doctype html>
      <html lang="en-us">
        <head>
          <meta charSet="utf-8"/>
          ${meta}
        </head>
        <body>
          <div id="content">
            ${reactString}
          </div>
        </body>
      </html>  
    `);

    res.status(200).send(layout);
  });
});

JSX布局

如果你也在使用React定义布局，可以使用metaTagsInstance的getTags方法。服务器端示例的布局部分将如下所示：

//获取所有标题和元数据标签作为React元素
const metaTags = metaTagsInstance.getTags();

//将元数据字符串附加到你的布局中
const layout = (
  <html lang="en-us">
    <head>
      <meta charSet="utf-8"/>
      {metaTags}
    </head>
    <body>
      <div id="app" dangerouslySetInnerHTML={{__html: reactString}} />
    </body>
  </html>  
);

const htmlStr = ReactDomServer.renderToString(layout);

res.status(200).send(htmlStr);