Vyřešeno: reagovat na router pomocí statických stylů

Hlavním problémem souvisejícím s používáním statických stylů s React Router je to, že může být obtížné sledovat různé cesty a jejich přidružené styly. U statických stylů musí mít každá cesta svou vlastní sadu pravidel CSS, která se mohou rychle stát nepraktickou a těžko udržovatelnou. Navíc, pokud je styl použit ve více trasách, musí být duplikován ve všech z nich, což ztěžuje udržení kódu SUCHÉ (Don't Repeat Yourself).

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. První řádek importuje knihovnu React.
2. Druhý řádek importuje komponenty BrowserRouter, Route a Link z knihovny reagovat-router-dom.
3. Třetí řádek importuje stylizovanou komponentu z knihovny stylizovaných komponent.
4. Čtvrtý řádek vytvoří komponentu StyledLink pomocí komponenty Link importované z respond-router-dom a stylizuje ji barvou: světle fialová a font-weight: bold, stejně jako efektem přechodu, který změní barvu na bílou a odstraní veškerý text. dekorace, když se nad ní vznesete.
5. Pátý řádek vytvoří komponentu App, která vykreslí komponentu Router se dvěma komponentami Route (jedna pro Home a jedna pro About). Vykresluje také neuspořádaný seznam dvou odkazů (Domů a O aplikaci) pomocí komponenty StyledLink vytvořené na řádku 4 nad nimi, oba oddělené značkou hr pro účely stylingu.
6. Řádky 8 – 11 vytvářejí dvě funkční komponenty nazvané Home a About, které vykreslují značky h2 s jejich příslušnými názvy uvnitř, když jsou vyvolány jejich příslušnými komponentami Route na řádku 5 nad nimi (Home vykreslí „Home“, zatímco About vykreslí „About“ ).
7. Nakonec řádek 12 exportuje komponentu aplikace, takže ji lze v případě potřeby použít jinde v naší aplikaci

Statické styly

Statické styly v React Router jsou styly, které se aplikují na komponentu a zůstávají stejné bez ohledu na jakékoli změny stavu komponenty nebo podpěr. To je na rozdíl od dynamických stylů, které se mění v závislosti na stavu nebo rekvizitách komponenty. Statické styly lze použít k vytvoření konzistentního vzhledu a dojmu v celé aplikaci a také poskytují vývojářům snadný způsob, jak rychle stylizovat komponenty, aniž by je museli ručně upravovat pokaždé, když dojde ke změně.

balíček styled-components

Styled-components je oblíbený balíček pro React Router, který umožňuje vývojářům vytvářet a spravovat styly na úrovni komponent v jejich aplikacích React. Poskytuje snadný způsob psaní kódu CSS, který je omezen na jedinou komponentu, což usnadňuje údržbu a ladění. Styled-components také usnadňuje sdílení stylů mezi více komponentami a také poskytuje podporu pro tématiku. S komponentou Link React Router lze navíc použít stylizované komponenty, což vývojářům umožňuje stylovat odkazy v rámci jejich aplikace.

Jak používat statické styly

Statické styly lze v React Routeru použít pomocí atributu inline style. Tento atribut vám umožňuje použít styl přímo na prvek bez nutnosti samostatné šablony stylů. Chcete-li použít statické styly v React Routeru, budete muset vytvořit objekt stylu a poté jej předat jako argument pro podporu stylu komponenty. Například:

const myStyle = {
backgroundColor: '#f2f2f2′,
fontSize: '20px',
barva: '#000'
};