Vấn đề chính liên quan đến việc sử dụng các kiểu tĩnh với React Router là có thể khó theo dõi các tuyến khác nhau và các kiểu liên quan của chúng. Với các kiểu tĩnh, mỗi tuyến đường cần có bộ quy tắc CSS riêng, quy tắc này có thể nhanh chóng trở nên khó sử dụng và khó bảo trì. Ngoài ra, nếu một kiểu được sử dụng trong nhiều tuyến, thì nó cần phải được sao chép trên tất cả các tuyến đó, gây khó khăn cho việc giữ mã KHÔ (Không lặp lại chính mình).
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. Dòng đầu tiên nhập thư viện React.
2. Dòng thứ hai nhập các thành phần BrowserRouter, Route và Link từ thư viện react-router-dom.
3. Dòng thứ ba nhập thành phần được tạo kiểu từ thư viện thành phần được tạo kiểu.
4. Dòng thứ tư tạo thành phần StyledLink bằng cách sử dụng thành phần Liên kết được nhập từ react-router-dom và tạo kiểu cho thành phần đó bằng màu: nhạt và trọng lượng phông chữ: đậm, cũng như hiệu ứng di chuột thay đổi màu thành màu trắng và xóa bất kỳ văn bản nào trang trí khi di chuột qua.
5. Dòng thứ năm tạo thành phần Ứng dụng hiển thị thành phần Bộ định tuyến với hai thành phần Tuyến bên trong (một cho Trang chủ và một cho Giới thiệu). Nó cũng hiển thị một danh sách không có thứ tự của hai liên kết (Trang chủ và Giới thiệu) bằng cách sử dụng thành phần StyledLink được tạo trong Dòng 4 ở trên, cả hai được phân tách bằng thẻ hr cho mục đích tạo kiểu.
6. Các dòng 8 – 11 tạo hai thành phần chức năng được gọi là Trang chủ và Giới thiệu hiển thị các thẻ h2 có tên tương ứng bên trong chúng khi được gọi bởi các thành phần Tuyến đường tương ứng của chúng trong Dòng 5 phía trên cả hai (Trang chủ hiển thị “Trang chủ” trong khi Giới thiệu hiển thị “Giới thiệu” ).
7. Cuối cùng, Dòng 12 xuất thành phần Ứng dụng để nó có thể được sử dụng ở nơi khác trong ứng dụng của chúng ta nếu cần
Kiểu tĩnh
Các kiểu tĩnh trong React Router là các kiểu được áp dụng cho một thành phần và giữ nguyên bất kể bất kỳ thay đổi nào đối với trạng thái hoặc đạo cụ của thành phần. Điều này trái ngược với các kiểu động, thay đổi tùy thuộc vào trạng thái hoặc đạo cụ của một thành phần. Các kiểu tĩnh có thể được sử dụng để tạo giao diện nhất quán trên một ứng dụng, cũng như cung cấp một cách dễ dàng để các nhà phát triển nhanh chóng tạo kiểu cho các thành phần mà không cần phải điều chỉnh chúng theo cách thủ công mỗi khi có thay đổi.
gói thành phần theo kiểu
Styled-components là một gói phổ biến cho React Router cho phép các nhà phát triển tạo và quản lý các style ở cấp độ thành phần trong các ứng dụng React của họ. Nó cung cấp một cách dễ dàng để viết mã CSS nằm trong phạm vi một thành phần, giúp bảo trì và gỡ lỗi dễ dàng hơn. Các thành phần được tạo kiểu cũng giúp chia sẻ các kiểu trên nhiều thành phần dễ dàng hơn, cũng như cung cấp hỗ trợ cho các chủ đề. Ngoài ra, các thành phần được tạo kiểu có thể được sử dụng với thành phần Liên kết của Bộ định tuyến React, cho phép các nhà phát triển tạo kiểu cho các liên kết trong ứng dụng của họ.
Cách sử dụng Kiểu tĩnh
Các kiểu tĩnh có thể được sử dụng trong Bộ định tuyến React bằng cách sử dụng thuộc tính kiểu nội tuyến. Thuộc tính này cho phép bạn áp dụng một kiểu trực tiếp cho một phần tử mà không cần một biểu định kiểu riêng. Để sử dụng các kiểu tĩnh trong React Router, bạn sẽ cần tạo một đối tượng kiểu và sau đó chuyển nó làm đối số cho style prop của thành phần. Ví dụ:
const myStyle = {
màu nền: '#f2f2f2′,
Kích thước phông chữ: '20px',
màu: '#000'
};
