Как обновить метатеги в React.js?

Я работал над одностраничным приложением в response.js, так что лучший способ обновить метатеги при переходе страницы или в браузере назад/вперед?

ОТВЕТЫ

Ответ 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} />

в возврате

Ответ 2

Вы можете использовать ответные мета-теги. Это позволяет вам писать заголовок и другие метатеги декларативным способом и в обычном формате jsx, который будет перемещен в заголовок (проверьте использование сервера в 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>
      )
  }
}

Вы также можете проверить реактивный шлем, если у вас есть продвинутый вариант использования.

Ответ 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 файлах или .jsx файлах ниже метода render() напишите название страницы и мета-описание для этой страницы.

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

Ответ 4

Он упоминается в других ответах и комментариях, но заслуживает выделения - вы почти наверняка захотите использовать:

Реактивный шлем

Похоже, что это решение, которое почти исключительно использует сообщество - 600 000 загрузок в неделю против 6000, предоставленных в других решениях. "Шлем принимает простые HTML-теги и выводит простые HTML-теги. Он очень простой и удобный для новичков". - и имеет поддержку рендеринга на стороне сервера.