[ Router ] React Router Dom

[fdhhhdjd]

React Router Basics

1. Project 1: React Router v6 Authentication with Protected Routes, Nested Routes, Active

Vietnamese 🇻🇳

1. Router Types: Có nhiều loại router trong React Router như BrowserRouter, HashRouter, MemoryRouter, vv. Chọn router phù hợp với ứng dụng của bạn.

2. Dynamic Routes: Cho phép bạn tạo các tuyến đường có thể thay đổi dựa trên dữ liệu đầu vào. Sử dụng :parameter để định nghĩa các phần của URL có thể biến đổi.

3. Route Specificity: Điều này liên quan đến thứ tự của các tuyến đường. React Router sẽ xử lý tuyến đường đầu tiên mà nó tìm thấy khớp với URL, vì vậy hãy đặt các tuyến đường cụ thể trước các tuyến đường chung.

4. Nested Routes: Cho phép bạn nhúng tuyến đường trong tuyến đường khác, tạo cấu trúc lồng nhau cho ứng dụng của bạn.

5. useRoutes Hooks: Sử dụng để xử lý các tuyến đường và trả về các thành phần dựa trên URL hiện tại.

6. Link Component: Sử dụng để chuyển đổi giữa các tuyến đường mà không làm tải lại toàn bộ trang web.

7. Navigate Component: Cho phép bạn thay đổi tuyến đường và chuyển hướng trang từ mã JavaScript.

8. useNavigate Hook: Sử dụng để lấy tham chiếu đến hàm navigate để thay đổi tuyến đường từ bất kỳ nơi nào trong ứng dụng.

9. Search Parameters: Cho phép bạn trích xuất và xử lý thông tin từ phần truy vấn (query) của URL.

10. Navigation State: Liên quan đến việc theo dõi trạng thái định tuyến, có thể được sử dụng để thực hiện các tính năng như bảo vệ đường dẫn hoặc lưu trạng thái định tuyến.

English 🏴󠁧󠁢󠁥󠁮󠁧󠁿

1. Router Types: There are several router types in React Router, such as BrowserRouter, HashRouter, MemoryRouter, etc. Choose the router that suits your application.

2. Dynamic Routes: Allow you to create routes that can change based on input data. Use :parameter to define parts of the URL that can vary.

3. Route Specificity: This relates to the order of routes. React Router will handle the first route it finds that matches the URL, so place specific routes before generic ones.

4. Nested Routes: Enable you to nest routes within other routes, creating a nested structure for your application.

5. useRoutes Hook: Used to handle routes and return components based on the current URL.

6. Link Component: Used to navigate between routes without reloading the entire web page.

7. Navigate Component: Allows you to change routes and navigate programmatically from JavaScript code.

8. useNavigate Hook: Used to obtain a reference to the navigate function to change routes from anywhere in your application.

9. Search Parameters: Allow you to extract and process information from the query part of the URL.

10. Navigation State: Concerns tracking the route navigation state, which can be used to implement features like route protection or saving route navigation state.