Głównym problemem związanym z używaniem stylów statycznych w React Router jest to, że śledzenie różnych tras i powiązanych z nimi stylów może być trudne. W przypadku stylów statycznych każda trasa musi mieć własny zestaw reguł CSS, co może szybko stać się nieporęczne i trudne w utrzymaniu. Ponadto, jeśli styl jest używany na wielu trasach, należy go zduplikować na wszystkich z nich, co utrudnia utrzymanie kodu DRY (nie powtarzaj się).
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. Pierwsza linia importuje bibliotekę React.
2. Druga linia importuje komponenty BrowserRouter, Route i Link z biblioteki react-router-dom.
3. Trzecia linia importuje stylizowany komponent z biblioteki styled-components.
4. Czwarta linia tworzy komponent StyledLink przy użyciu komponentu Link zaimportowanego z React-router-dom i stylizuje go za pomocą color: palevioletred i font-weight: bold, a także efektu hover, który zmienia kolor na biały i usuwa tekst dekoracja po najechaniu na nią.
5. Piąty wiersz tworzy komponent App, który renderuje komponent Router z dwoma komponentami Route (jeden dla Home i jeden dla About). Renderuje również nieuporządkowaną listę dwóch linków (Home i About) przy użyciu komponentu StyledLink utworzonego w wierszu 4 powyżej, oba oddzielone znacznikiem hr do celów stylizacyjnych.
6. Linie 8 – 11 tworzą dwa komponenty funkcjonalne o nazwie Home i About, które wyświetlają znaczniki h2 z ich nazwami w środku, gdy są wywoływane przez odpowiednie komponenty Route w linii 5 nad nimi obydwoma (Home renderuje „Dom”, podczas gdy About renderuje „About” ).
7. Wreszcie linia 12 eksportuje komponent App, aby w razie potrzeby można go było użyć w innym miejscu naszej aplikacji
Style statyczne
Style statyczne w React Router to style, które są stosowane do komponentu i pozostają takie same niezależnie od jakichkolwiek zmian stanu lub właściwości komponentu. Kontrastuje to ze stylami dynamicznymi, które zmieniają się w zależności od stanu lub rekwizytów komponentu. Style statyczne mogą być używane do tworzenia spójnego wyglądu i działania w całej aplikacji, a także zapewniają programistom łatwy sposób szybkiego stylizowania komponentów bez konieczności ręcznego dostosowywania ich za każdym razem, gdy następuje zmiana.
pakiet stylizowanych komponentów
Styled-components to popularny pakiet dla React Router, który umożliwia programistom tworzenie i zarządzanie stylami na poziomie komponentów w ich aplikacjach React. Zapewnia łatwy sposób pisania kodu CSS, który jest ograniczony do pojedynczego komponentu, co ułatwia konserwację i debugowanie. Styled-components ułatwia również udostępnianie stylów w wielu komponentach, a także zapewnia obsługę motywów. Dodatkowo styled-components mogą być używane z komponentem Link React Routera, umożliwiając programistom stylizowanie linków w ich aplikacji.
Jak korzystać ze stylów statycznych
Style statyczne mogą być używane w React Router za pomocą atrybutu inline style. Ten atrybut umożliwia zastosowanie stylu bezpośrednio do elementu bez potrzeby stosowania oddzielnego arkusza stylów. Aby użyć stylów statycznych w React Router, musisz utworzyć obiekt stylu, a następnie przekazać go jako argument do atrybutu stylu komponentu. Na przykład:
const mój styl = {
kolor tła: '#f2f2f2′,
Rozmiar czcionki: „20 pikseli”,
kolor: „#000”
};