Основная проблема, связанная с использованием статических стилей с 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'
};
