Решено: реагировать на маршрутизатор, используя статические стили.

Основная проблема, связанная с использованием статических стилей с React Router, заключается в том, что может быть сложно отслеживать различные маршруты и связанные с ними стили. При использовании статических стилей каждый маршрут должен иметь собственный набор правил CSS, которые могут быстро стать громоздкими и сложными в обслуживании. Кроме того, если стиль используется в нескольких маршрутах, его необходимо продублировать во всех них, что затрудняет сохранение кода СУХИМ (не повторяйтесь).

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. Первая строка импортирует библиотеку React.
2. Вторая строка импортирует компоненты BrowserRouter, Route и Link из библиотеки react-router-dom.
3. Третья строка импортирует стилизованный компонент из библиотеки styled-components.
4. Четвертая строка создает компонент StyledLink с использованием компонента Link, импортированного из react-router-dom, и стилизует его с помощью color:palioletred и font-weight:bold, а также эффекта наведения, который меняет его цвет на белый и удаляет любой текст украшение при наведении курсора.
5. Пятая строка создает компонент App, который отображает компонент Router с двумя компонентами Route внутри него (один для Home и один для About). Он также отображает неупорядоченный список из двух ссылок (Home и About), используя компонент StyledLink, созданный в строке 4 над ними, разделенными тегом hr для целей стилизации.
6. Строки 8–11 создают два функциональных компонента с именами Home и About, которые отображают теги h2 с соответствующими именами внутри них при вызове соответствующих компонентов Route в строке 5 над ними обоими (Home отображает «Home», а About отображает «About»). ).
7. Наконец, строка 12 экспортирует компонент приложения, чтобы при необходимости его можно было использовать в другом месте нашего приложения.

Статические стили

Статические стили в React Router — это стили, которые применяются к компоненту и остаются неизменными независимо от любых изменений состояния или свойств компонента. Это отличается от динамических стилей, которые меняются в зависимости от состояния или свойств компонента. Статические стили можно использовать для создания единообразного внешнего вида приложения, а также предоставить разработчикам простой способ быстро стилизовать компоненты без необходимости вручную настраивать их каждый раз при внесении изменений.

пакет стилизованных компонентов

Styled-components — это популярный пакет для React Router, который позволяет разработчикам создавать стили на уровне компонентов и управлять ими в своих приложениях React. Он предоставляет простой способ написания кода CSS, ограниченного одним компонентом, что упрощает его обслуживание и отладку. Styled-components также упрощает обмен стилями между несколькими компонентами, а также обеспечивает поддержку тем. Кроме того, styled-components можно использовать с компонентом React Router Link, что позволяет разработчикам стилизовать ссылки в своем приложении.

Как использовать статические стили

Статические стили можно использовать в React Router с помощью атрибута встроенного стиля. Этот атрибут позволяет применять стиль непосредственно к элементу без необходимости в отдельной таблице стилей. Чтобы использовать статические стили в React Router, вам нужно создать объект стиля, а затем передать его в качестве аргумента свойству стиля компонента. Например:

константа myStyle = {
backgroundColor: '#f2f2f2',
размер шрифта: '20px',
цвет: '# 000'
};

Похожие посты:

Оставьте комментарий