Rozwiązany: router reaguje przy użyciu stylów statycznych

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