如何更新 React.js 中的元标记？

Question

我正在处理 react.js 中的单页应用程序，那么在页面转换或浏览器后退/前进时更新元标记的最佳方法是什么？

原文由 Harkirat Saluja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在一个较旧的项目中使用了 react-document-meta 。

只需定义您的元值

const meta = {
    title: 'Some Meta Title',
    description: 'I am a description, and I can create multiple tags',
    canonical: 'http://example.com/path/to/page',
    meta: {
        charset: 'utf-8',
        name: {
            keywords: 'react,meta,document,html,tags'
        }
    }

并放置一个

<DocumentMeta {...meta} />

在回报

原文由 KRONWALLED 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 react-meta-tags 。它允许您以声明方式和普通 jsx 格式编写标题和其他元标记，这些标记将移至头部（检查文档上的服务器使用情况）。

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

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

如果您有高级用例，您可能还想检查 react-helmet 。

原文由 Sudhanshu Yadav 发布，翻译遵循 CC BY-SA 4.0 许可协议