Вирішено: реагувати на маршрутизатор за допомогою статичних стилів

Основна проблема, пов’язана з використанням статичних стилів у React Router, полягає в тому, що може бути важко відстежувати різні маршрути та їх пов’язані стилі. Зі статичними стилями кожен маршрут повинен мати власний набір правил CSS, який може швидко стати громіздким і важким для підтримки. Крім того, якщо стиль використовується в кількох маршрутах, його потрібно дублювати для всіх, що ускладнює збереження коду DRY (не повторюйте себе).

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. Перший рядок імпортує бібліотеку React.
2. Другий рядок імпортує компоненти BrowserRouter, Route і Link з бібліотеки react-router-dom.
3. Третій рядок імпортує стилізований компонент із бібліотеки styled-components.
4. Четвертий рядок створює компонент StyledLink за допомогою компонента Link, імпортованого з react-router-dom, і стилізує його кольором: palevioletred і font-weight: bold, а також ефектом наведення, який змінює його колір на білий і видаляє будь-який текст прикраса при наведенні.
5. П’ятий рядок створює компонент App, який рендерить компонент Router із двома компонентами Route всередині нього (один для Home та один для About). Він також відображає невпорядкований список із двох посилань (Домашня сторінка та Про), використовуючи компонент StyledLink, створений у рядку 4 над ними, розділених тегом hr для цілей стилю.
6. Рядки 8–11 створюють два функціональні компоненти під назвою Home і About, які відображають теги h2 з відповідними іменами всередині них, коли їх викликають відповідні компоненти Route у рядку 5 над ними (Home відображає «Home», тоді як About рендерить «About» ).
7. Нарешті, рядок 12 експортує компонент App, щоб його можна було використовувати в інших місцях нашої програми, якщо це необхідно

Статичні стилі

Статичні стилі в React Router – це стилі, які застосовуються до компонента та залишаються незмінними незалежно від будь-яких змін у стані компонента чи атрибутах. Це на відміну від динамічних стилів, які змінюються залежно від стану чи властивостей компонента. Статичні стилі можна використовувати для створення узгодженого зовнішнього вигляду в програмі, а також надають розробникам простий спосіб швидкого стилю компонентів без необхідності вручну налаштовувати їх щоразу, коли відбувається зміна.

пакет стилізованих компонентів

Styled-components — це популярний пакет для React Router, який дозволяє розробникам створювати та керувати стилями на рівні компонентів у своїх програмах React. Він надає простий спосіб написання коду CSS, який об’єднується в один компонент, що полегшує його підтримку та налагодження. Styled-components також спрощує спільний доступ до стилів між кількома компонентами, а також забезпечує підтримку створення тем. Крім того, styled-components можна використовувати з компонентом Link React Router, дозволяючи розробникам стилізувати посилання у своїй програмі.

Як використовувати статичні стилі

Статичні стилі можна використовувати в React Router за допомогою атрибута inline style. Цей атрибут дозволяє застосувати стиль безпосередньо до елемента без необхідності окремої таблиці стилів. Щоб використовувати статичні стилі в React Router, вам потрібно буде створити об’єкт стилю, а потім передати його як аргумент атрибуту стилю компонента. Наприклад:

const myStyle = {
backgroundColor: '#f2f2f2',
Розмір шрифту: '20px',
колір: '#000'
};