Как реализовать react-helmet-async на старом сайте React
У меня есть сайт React, отображаемый на стороне клиента, для которого я хотел бы реализовать модуль react-helmet-async (версия 1.0.7).
Моя ситуация в моем приложении React:
/public/index.js:
<head>
<title>My title in the index file</title>
...
Поэтому для некоторых страниц я хотел бы иметь другой заголовок страницы.
Пытаться:
В отличие от примера, который модуль предоставляет, у меня нет файла app.js в моем репозитории React на стороне клиента. Поэтому я добавил следующее на страницу, для которой я хотел бы уникальный заголовок страницы:
import { Helmet, HelmetProvider } from 'react-helmet-async';
render() {
return (
<div data-page = "page11">
<HelmetProvider>
<Helmet>
<title>New title</title>
</Helmet>
</HelmetProvider>
... continues with what I already had in the render code block ...
Результат: на вкладке веб-браузера отображается уникальный заголовок страницы при посещении этой конкретной страницы и общий заголовок страницы для других страниц. Так что это прекрасно. **Однако, когда я смотрю на исходный код, он всегда содержит только общий заголовок страницы; также при посещении конкретной страницы. Так что это не то, что я хочу (я реализую уникальные заголовки страниц для SEO, и я предполагаю, что поисковые роботы возьмут заголовок страницы из исходного кода).
Что я должен сделать, чтобы правильно реализовать этот модуль узла?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку это приложение React, отображаемое на стороне клиента, а не на стороне сервера, невозможно изменить исходный код. Он меняется только в DOM. Если вы хотите изменить исходный код, чтобы поисковые системы правильно обрабатывали новый заголовок, у вас нет другого выбора, кроме как выполнить предварительный рендеринг / рендеринг приложения React на стороне сервера.
Здесь дано более полное объяснение: https://github.com/nfl/react-helmet/issues/213