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

Question

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

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} /> 

在返回

Answer 2

您可以使用react-meta-tags。它允许您以声明的方式和正常的jsx格式编写标题和其他meta标签，这些标签将被移到head（检查doc上的服务器使用情况）。

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-helment，如果你有一个先进的用例。

Answer 3

您还可以通过以下方式给出页面标题和元标记说明。

在你的index.html文件中放置一个描述元标记，就像这样。

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<title>Dynamic Page title here</title> 

在您的.js文件或低于render（）方法.jsx文件写这样的页面的页面标题和meta描述。

render() 
{ 
document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically"; 

return(
    <div>Page content</div> 
); 
}