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

Что такое React-шлем?

React-Helmet - это модуль, который предлагает компонент, который будет управлять всеми вашими изменениями в метатегах и выводить их в заголовок документа.

Это означает, что в проектах, где у нас есть несколько маршрутов, и мы хотим динамически обновлять метатеги для SEO на основе маршрута, отображаемого в данный момент на странице, react-Helm будет обрабатывать это за нас, давая нам контроль над метаданными приложения.

Настраивать

Прежде всего, нам нужно добавить в наш проект реактивный шлем и импортировать его в файл, который мы хотим, чтобы он сохранял наши изменения в заголовке документа.

npm install react-helmet --save

Добавление метаданных

Теперь мы рассмотрим пример того, как добавить метаданные к нашему компоненту.

import React from 'react'
import { Helmet } from "react-helmet";
class App extends React.Component {
  render () {
    return (
        <div>
            <Helmet>
                <title>App Title</title>
                <link rel="canonical" href="https://malikgabroun.com" />
            </Helmet>
        </div>
    );
  }
};

Пример

В следующем примере мы рассмотрим, как динамически добавлять метаданные, создав компонент SEO и импортировав его внутри любого компонента, который вам нужен.

import { Helmet } from 'react-helmet';
import React from 'react';
const Seo = ({ title, description, pathSlug, keywords }) => {
  const url = `https://malikgabroun.com/${pathSlug}`
	return (
<Helmet htmlAttributes={{ lang: 'en' }} title={title} meta={[
        {
          name: 'description',
          content: description,
        },
        {
          name: 'keywords',
          content: keywords.join(),
        },
		]}
    links={[
     {
          rel: 'canonical',
          href: url,
      },
    ]}
    />
 );
}
export default Seo;

После создания компонента необходимо импортировать его в любой компонент и передать необходимые реквизиты. Как правило, рекомендуется добавить кондиционирование для проверки этих свойств и установить значение по умолчанию на случай, если один из свойств отсутствует.

Чтобы увидеть полный пример, чтобы увидеть, как я использую компонент SEO на моем личном веб-сайте, посмотрите файл здесь.

Вывод

React-Helmet - это компонент, который позволяет нам и дает нам контроль над тем, как метаданные должны отображаться на веб-сайте.