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'
};