Чтобы выбрать CSS на основе маршрута в приложении React, вы можете использовать различные методы в зависимости от конкретных требований и инструментов, которые вы используете. Вот несколько часто используемых подходов:
-
Модули CSS: Модули CSS позволяют вам ограничить стили CSS определенным компонентом. Вы можете создать отдельные файлы CSS для каждого маршрута/компонента и импортировать их непосредственно в ваши компоненты React. Таким образом, стили будут применяться только к соответствующим компонентам.
-
Библиотеки CSS-in-JS. Существует несколько библиотек CSS-in-JS, таких как styled-comments, Emotion и Glamorous, которые позволяют определять стили непосредственно в компонентах React. Вы можете условно применять стили на основе маршрута, используя логику JavaScript, например, проверяя текущий маршрут из React Router и соответствующим образом применяя определенные стили.
-
Компонент высшего порядка «withRouter» React Router: React Router предоставляет компонент высшего порядка «withRouter», который предоставляет доступ к текущему маршруту в качестве реквизита в любом обернутом компоненте. Вы можете использовать эту функцию для условного применения различных классов CSS или встроенных стилей в зависимости от маршрута.
-
Пакет Classnames: Пакет classnames — это популярная утилита для условного применения классов CSS к элементам. Вы можете объединить его с React Router для динамического добавления или удаления классов на основе текущего маршрута.
-
Темы CSS-in-JS. Некоторые библиотеки CSS-in-JS, например styled-comments, поддерживают темы. Вы можете определить разные темы для каждого маршрута и переключаться между ними в зависимости от активного маршрута.
Это всего лишь несколько методов выбора CSS на основе маршрута в приложении React. Лучший подход зависит от требований и предпочтений вашего конкретного проекта.