как дать динамические мета-теги в проекте JS реагировать

Question

В настоящее время я использую метатеги внутри файла js с реагирующим шлемом.Он дает мне узлы метатегов при проверке элемента, но когда я просматриваю исходный код страницы или пытаюсь поделиться своими ссылками в любых социальных сетях, таких как Facebook или Twitter, я получаю только значения в файле index.html.Я хочу иметь отдельный набор метатегов на каждой странице.Как я могу это сделать?

После некоторых исследований я наткнулся на эту ссылку .Но я не понимаю, как использовать SSR.Это то, что мне нужно?Может ли кто-нибудь помочь мне понять это?

Answer 1

Вы можете использовать npm и реагировать на мета-теги

см .: https://www.npmjs.com/package/react-meta-tags

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

Вы также можете ссылаться на официальные документы: https://facebook.github.io/create-react-app/docs/title-and-meta-tags

Answer 2

Если вы используете реакцию на стороне сервера, то вы можете использовать react-helmet для отображения мета-тегов на самом сервере. В разделе Использование сервера приведены инструкции.