Vấn đề chính liên quan đến React Router khi sử dụng các kiểu từ thư mục chung là có thể khó theo dõi các kiểu và đảm bảo chúng được áp dụng chính xác. Vì thư mục chung không phải là một phần của cây thành phần React, nên khó có thể biết kiểu nào đang được áp dụng và khi nào. Ngoài ra, nếu nhiều thành phần đang sử dụng cùng một kiểu từ thư mục chung, thì có thể khó gỡ lỗi bất kỳ sự cố nào phát sinh.
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code { font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }
*{ boxsizing: borderbox;}
img{ maxwidth: 100%;}
a{ textdecoration : none;} `; // Global styles for the entire app. This will be applied to all components.
const App = () => ( // The main component of the app. This is where all routes are defined. <Router> <div> <GlobalStyle /> <Route exact path="/" component={HomePage} /> <Route path="/about" component={AboutPage} /> </div> </Router> ); export default App;
1. nhập Phản ứng từ 'phản ứng'; // Nhập thư viện React
2. nhập { BrowserRouter làm Bộ định tuyến, Tuyến đường } từ 'Reac-router-dom'; // Nhập các thành phần BrowserRouter và Route từ thư viện Reac-router-dom
3. nhập { createGlobalStyle } từ 'styled-components'; // Nhập hàm createGlobalStyle từ thư viện styled-components
4. nhập Trang chủ từ './pages/HomePage'; // Nhập thành phần Trang chủ
5. nhập AboutPage từ './pages/AboutPage'; // Nhập thành phần AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Kiểu toàn cầu cho toàn bộ ứng dụng. Điều này sẽ được áp dụng cho tất cả các thành phần.
7. ứng dụng const = () => (…); // Thành phần chính của ứng dụng. Đây là nơi tất cả các tuyến đường được xác định.
8.
9.
10 xuất Ứng dụng mặc định;// Xuất Ứng dụng làm mặc định
Sử dụng kiểu dáng
Các kiểu có thể được sử dụng trong React Router để tùy chỉnh giao diện của ứng dụng. Các kiểu có thể được sử dụng để tạo các thành phần tùy chỉnh, thêm hoạt ảnh, v.v. Các kiểu cũng có thể được sử dụng để tạo bố cục đáp ứng thích ứng với các kích thước màn hình khác nhau. Ngoài ra, các kiểu có thể được sử dụng để tạo chủ đề cho ứng dụng cho phép người dùng tùy chỉnh trải nghiệm của họ.
Sử dụng thư mục chung
Thư mục chung trong React Router là một thư mục đặc biệt có thể được sử dụng để lưu trữ các tệp tĩnh như hình ảnh, CSS và JavaScript. Các tệp này được phục vụ trực tiếp từ thư mục chung mà không được xử lý bởi ứng dụng React. Điều này cho phép thời gian tải nhanh hơn và giúp quản lý nội dung trên nhiều trang của ứng dụng dễ dàng hơn. Thư mục chung cũng cung cấp một cách để giữ một số tệp nhất định ngoài các hệ thống kiểm soát phiên bản như Git, có thể giúp duy trì bảo mật và quyền riêng tư.
Làm cách nào để nhập tệp CSS từ thư mục chung trong React
Trong React Router, bạn có thể nhập tệp CSS từ thư mục chung bằng cách sử dụng thành phần Liên kết. Thành phần Liên kết cho phép bạn chỉ định đường dẫn đến tệp trong thuộc tính href. Ví dụ:
Điều này sẽ nhập tệp style.css từ thư mục chung của bạn vào ứng dụng Bộ định tuyến React của bạn.
