Решено: реаговати рутер користећи статичке стилове

Главни проблем везан за коришћење статичких стилова са Реацт Роутер-ом је тај што може бити тешко пратити различите руте и њихове повезане стилове. Са статичним стиловима, свака рута мора да има сопствени скуп ЦСС правила, која брзо могу постати гломазна и тешка за одржавање. Поред тога, ако се стил користи у више рута, мора се дуплирати на свим њима, што отежава одржавање кода СУВИ (Немојте се понављати).

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. Први ред увози Реацт библиотеку.
2. Други ред увози компоненте БровсерРоутер, Роуте и Линк из библиотеке реацт-роутер-дом.
3. Трећи ред увози стилизовану компоненту из библиотеке стилизованих компоненти.
4. Четврти ред креира СтиледЛинк компоненту користећи компоненту Линк увезену из реацт-роутер-дома и стилизује је бојом: палевиолетред и фонт-веигхт: болд, као и ефектом лебдења који мења своју боју у белу и уклања сваки текст украс када се лебди преко.
5. Пети ред креира компоненту апликације која приказује компоненту рутера са две компоненте руте унутар ње (једна за почетну и једну за Абоут). Такође приказује неуређену листу две везе (Хоме и Абоут) користећи компоненту СтиледЛинк креирану у линији 4 изнад њих, обе одвојене ознаком хр за потребе стилизовања.
6. Линије 8 – 11 креирају две функционалне компоненте под називом Почетна и О којима се приказују х2 ознаке са њиховим одговарајућим именима унутар њих када их позову њихове одговарајуће компоненте руте у реду 5 изнад обе (Хоме приказује „Хоме“, док Абоут приказује „Абоут“ ).
7. Коначно, ред 12 извози компоненту апликације тако да се може користити негде другде у нашој апликацији ако је потребно

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

Статички стилови у Реацт Роутер-у су стилови који се примењују на компоненту и остају исти без обзира на било какве промене стања или пропс компоненте. Ово је у супротности са динамичким стиловима, који се мењају у зависности од стања или реквизита компоненте. Статички стилови се могу користити за креирање доследног изгледа и осећаја у апликацији, као и да обезбеде једноставан начин за програмере да брзо стилизују компоненте без потребе да их ручно прилагођавају сваки пут када дође до промене.

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

Стилед-цомпонентс је популаран пакет за Реацт Роутер који омогућава програмерима да креирају и управљају стиловима на нивоу компоненте у својим Реацт апликацијама. Пружа једноставан начин за писање ЦСС кода који је ограничен на једну компоненту, што олакшава одржавање и отклањање грешака. Стилизоване компоненте такође олакшавају дељење стилова између више компоненти, као и пружање подршке за теме. Поред тога, стилизоване компоненте се могу користити са компонентом Линк Реацт Роутера, омогућавајући програмерима да стилизују везе унутар своје апликације.

Како користити статичке стилове

Статички стилови се могу користити у Реацт Роутер-у коришћењем инлине атрибута стила. Овај атрибут вам омогућава да примените стил директно на елемент без потребе за посебном таблицом стилова. Да бисте користили статичке стилове у Реацт Роутер-у, мораћете да креирате објекат стила, а затим га проследите као аргумент компоненти за стилски пропс. На пример:

цонст миСтиле = {
боја позадине: '#ф2ф2ф2',
Величина фонта: '20пк',
боја: '#000'
};

Релатед постс:

Оставите коментар