Resolvido: roteador de reação usando estilos estáticos

O principal problema relacionado ao uso de estilos estáticos com o React Router é que pode ser difícil acompanhar as diferentes rotas e seus estilos associados. Com estilos estáticos, cada rota precisa ter seu próprio conjunto de regras CSS, que podem rapidamente se tornar pesadas e difíceis de manter. Além disso, se um estilo for usado em várias rotas, ele precisará ser duplicado em todas elas, dificultando a manutenção do código DRY (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. A primeira linha importa a biblioteca React.
2. A segunda linha importa os componentes BrowserRouter, Route e Link da biblioteca react-router-dom.
3. A terceira linha importa o componente estilizado da biblioteca de componentes estilizados.
4. A quarta linha cria um componente StyledLink usando o componente Link importado de react-router-dom e estiliza-o com color: palevioletred e font-weight: bold, bem como um efeito de foco que muda sua cor para branco e remove qualquer texto decoração quando pairado sobre.
5. A quinta linha cria um componente App que renderiza um componente Router com dois componentes Route dentro dele (um para Home e outro para About). Ele também renderiza uma lista não ordenada de dois links (Home e About) usando o componente StyledLink criado na linha 4 acima deles, ambos separados por uma tag hr para fins de estilo.
6. As linhas 8 a 11 criam dois componentes funcionais chamados Home e About que renderizam tags h2 com seus respectivos nomes dentro deles quando chamados por seus respectivos componentes Route na linha 5 acima de ambos (Home renderiza “Home” enquanto About renderiza “About” ).
7. Por fim, a linha 12 exporta o componente App para que possa ser usado em outro lugar em nosso aplicativo, se necessário

Estilos Estáticos

Os estilos estáticos no React Router são estilos aplicados a um componente e permanecem os mesmos, independentemente de quaisquer alterações no estado ou props do componente. Isso contrasta com os estilos dinâmicos, que mudam dependendo do estado ou das props de um componente. Os estilos estáticos podem ser usados ​​para criar uma aparência consistente em um aplicativo, além de fornecer uma maneira fácil para os desenvolvedores estilizarem componentes rapidamente sem precisar ajustá-los manualmente sempre que houver uma alteração.

pacote styled-components

Styled-components é um pacote popular para React Router que permite aos desenvolvedores criar e gerenciar estilos de nível de componente em seus aplicativos React. Ele fornece uma maneira fácil de escrever código CSS com escopo para um único componente, facilitando a manutenção e a depuração. Styled-components também facilita o compartilhamento de estilos entre vários componentes, além de fornecer suporte para temas. Além disso, styled-components podem ser usados ​​com o componente Link do React Router, permitindo que os desenvolvedores estilizem links em seus aplicativos.

Como usar estilos estáticos

Os estilos estáticos podem ser usados ​​no React Router usando o atributo de estilo inline. Este atributo permite aplicar um estilo diretamente a um elemento sem a necessidade de uma folha de estilo separada. Para usar estilos estáticos no React Router, você precisará criar um objeto de estilo e então passá-lo como um argumento para a propriedade de estilo do componente. Por exemplo:

const meuEstilo = {
backgroundColor: '#f2f2f2′,
tamanho da fonte: '20px',
cor: '#000'
};