Решение: установка заголовка документа в приложении React

Быстрый ответ

Для установки заголовка документа в React функциональном компоненте, вы можете использовать хук useEffect:

useEffect(() => {
  document.title = 'Здравствуйте, StackOverflow!';
}, []);

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

Повышаем мастерство с помощью React Helmet

Для декларативного изменения document.title рекомендуется использовать библиотеку React Helmet. С использованием Helmet код выглядит чистым и структурированным:

import { Helmet } from "react-helmet";

const MyComponent = () => (
  <>
    <Helmet>
      <title>Головная боль ушла с Helmet</title>
    </Helmet>
    {/* Код вашего компонента */}
  </>
);

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

Возвращаемся к классике: классовые компоненты

Для проектов, которые используют классовые компоненты, на помощь приходит метод жизненного цикла componentDidMount:

componentDidMount() {
  document.title = 'Что же такое хуки, в конце концов?';
}

Метод componentDidMount вызывается после монтирования компонента и дает возможность установить заголовок.

Облегчаем жизнь с помощью пользовательских хуков

Создать пользовательский хук useTitle для работы с заголовком документа значительно облегчит использование и улучшит чистоту кода:

function useTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]); // Зависимость от title позволяет обновлять заголовок при его изменении
}

Для того чтобы установить заголовок в компоненте, достаточно просто вызвать useTitle:

const MyComponent = () => {
  useTitle('Просто как алфавит!');
  // Остальной код компонента...
};

Динамические заголовки и переключение окружения

Если требуется изменение заголовка в зависимости от окружения:

useEffect(() => {
  const titlePrefix = process.env.REACT_APP_TITLE_PREFIX;
  document.title = titlePrefix 
    ? `${titlePrefix} – Обожаю изменения` 
    : 'Запасной заголовок';
}, []); // Для динамических заголовков добавьте зависимости

При использовании webpack-dev-server, установите inline в true для удобства hot reloading.

Визуализация

Замена обычного "Новая вкладка" на что-то с большим смыслом происходит так:

useEffect(() => {
  document.title = "Наконец, значимый заголовок!";
});

И заголовок быть изменен:

📤 После: "Наконец, значимый заголовок!"

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

Руководствующие принципы для последовательности и долгосрочной работы

Управление document.title может быть значительно упрощено, если следовать следующим рекомендациям:

• Используйте React Helmet для декларативного подхода и удобства поддержки.
• Создайте пользовательский хук для удобного его повторного использования.
• Тщательно работайте с массивом зависимостей в useEffect.
• Вы можете использовать useEffect или React Helmet для интеграции с React Router.

Полезные материалы

1. Использование хука Effect – React — Полное руководство по useEffect.
2. Свойство Document: title – Web API | MDN — Обзор document.title.
3. GitHub – nfl/react-helmet: Менеджер заголовков документов для React — Документация по работе с React Helmet.
4. [useEffect(fn, []) не является новым componentDidMount()](https://reacttraining.com/blog/useEffect-is-not-the-new-componentDidMount) — Сравнение useEffect и componentDidMount.
5. React Router: Декларативный роутинг для React.js — Роутинг и управление заголовками с помощью React Router.
6. Изучаем useEffect за 13 минут – YouTube — Видеоурок по useEffect.
7. Полное руководство по использованию useEffect — overreacted — Подробное объяснение работы useEffect.