Решено: реагира на рутера, използвайки статични стилове

Основният проблем, свързан с използването на статични стилове с React Router, е, че може да бъде трудно да се следят различните маршрути и свързаните с тях стилове. При статичните стилове всеки маршрут трябва да има свой собствен набор от CSS правила, които бързо могат да станат тромави и трудни за поддръжка. Освен това, ако даден стил се използва в множество маршрути, той трябва да бъде дублиран във всички тях, което затруднява запазването на кода СУХ (Не се повтаряйте).

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. Петият ред създава компонент на приложението, който изобразява компонент Router с два компонента Route вътре в него (един за Home и един за About). Той също така изобразява неподреден списък от две връзки (Начало и Относно), като използва компонента StyledLink, създаден в ред 4 над тях, разделени с hr таг за целите на стилизирането.
6. Редове 8 – 11 създават два функционални компонента, наречени Home и About, които изобразяват h2 тагове със съответните им имена вътре в тях, когато бъдат извикани от съответните им компоненти Route в ред 5 над тях (Home изобразява „Home“, докато About изобразява „About“ ).
7. И накрая, ред 12 експортира компонента на приложението, така че да може да се използва другаде в нашето приложение, ако е необходимо

Статични стилове

Статичните стилове в React Router са стилове, които се прилагат към компонент и остават същите, независимо от промените в състоянието или реквизитите на компонента. Това е в контраст с динамичните стилове, които се променят в зависимост от състоянието или реквизитите на компонент. Статичните стилове могат да се използват за създаване на последователен външен вид и усещане в едно приложение, както и да предоставят лесен начин за разработчиците бързо да стилизират компоненти, без да се налага да ги коригират ръчно при всяка промяна.

пакет със стилизирани компоненти

Styled-components е популярен пакет за React Router, който позволява на разработчиците да създават и управляват стилове на ниво компонент в своите React приложения. Той предоставя лесен начин за писане на CSS код, който е обхванат от един компонент, което улеснява поддръжката и отстраняването на грешки. Стилизираните компоненти също така улесняват споделянето на стилове в множество компоненти, както и осигуряват поддръжка за тематизиране. Освен това, стилизираните компоненти могат да се използват с компонента за връзка на React Router, което позволява на разработчиците да стилизират връзките в своето приложение.

Как да използвате статични стилове

Статичните стилове могат да се използват в React Router чрез използване на атрибута inline style. Този атрибут ви позволява да приложите стил директно към елемент, без да е необходим отделен стилов лист. За да използвате статични стилове в React Router, ще трябва да създадете стилов обект и след това да го предадете като аргумент към стиловата подложка на компонента. Например:

const myStyle = {
фонов цвят: '#f2f2f2',
размер на шрифта: '20px',
цвят: '#000'
};