Как React Helmet спасает меня при разделении файлов CSS?

Многие новички могут столкнуться с проблемой, когда одна страница с CSS наследует свойства от другой страницы с другим CSS. У меня было много проблем, когда я разделял CSS-файлы каждой страницы и компонентов в React. Тогда в поисках решения этой проблемы я наткнулся на Helmet.

Так что же это за шлем, о котором я говорю?

• Реактивный шлем - это многоразовый компонент React, который будет управлять всеми вашими изменениями в шапке документа.
• Helmet принимает обычные HTML-теги и выводит обычные HTML-теги. Это очень просто и удобно для начинающих пользователей React.
• Helmet очень помогает в улучшении SEO ваших страниц.

Как это работает?

• Сначала вам нужно установить 'react-helmet-async' в папку вашего проекта с помощью следующей команды:

• Затем предположим, что у вас есть компонент для вашего Landing Page, тогда сначала вам нужно импортировать его в ваш .jsx файл:

• Они обернут ваш код возврата, который вы собираетесь экспортировать, следующим образом:

• Вот пример фрагмента кода, в котором объединены все вышеперечисленные утверждения:

• Теперь внутри тега Helmet вы можете поместить все ваши теги, которые вы обычно включали в свой Html-код, например, заголовок страницы, стили, мета-теги и т.д.

Как это помогло мне?

• Как я уже говорил, я столкнулся с проблемами при разделении CSS-файлов для каждой страницы и последующем их импорте, и чаще всего я сталкивался с тем, что одна страница наследовала свойства другой страницы, и мне приходилось тратить часы на исправление этой проблемы.
  Поэтому я начал использовать Helmet.
• Я предоставил все стили CSS внутри шлема, чтобы избежать создания отдельных файлов. Вот как это работает:

Я предлагаю всем, кто читает этот пост, просто попробовать Helmet один раз.

На сегодня все, спасибо, что дочитали до конца.