# Bài 7. React Router và Navigation

### **1\. Giới thiệu**

1.1. Mục tiêu của bài viết  
1.2. Đối tượng độc giả và kiến thức cần thiết

### **2\. React Router**

2.1. Định nghĩa và ứng dụng của React Router  
2.2. Installation và Setup

* 2.2.1. Cài đặt package
    
* 2.2.2. Setup trong `App.js`
    

2.3. Route Matching

* 2.3.1. `Route` component
    
* 2.3.2. `exact` prop
    
* 2.3.3. `Switch` component
    

2.4. Route Parameters

* 2.4.1. Định nghĩa và ví dụ
    
* 2.4.2. `useParams` Hook
    

### **3\. Navigation**

3.1. `Link` và `NavLink`

* 3.1.1. Sự khác biệt và ứng dụng
    
* 3.1.2. Styling với `activeClassName`
    

3.2. Programmatic Navigation

* 3.2.1. `useHistory` Hook
    
* 3.2.2. `withRouter` Higher-Order Component
    

3.3. Nested Routing

* 3.3.1. Cấu trúc và ví dụ
    
* 3.3.2. Sử dụng `useRouteMatch`
    

### **4\. Advanced Features**

4.1. Route Guards

* 4.1.1. Định nghĩa và use cases
    
* 4.1.2. `Redirect` component
    

4.2. Lazy Loading và Code Splitting

* 4.2.1. `React.lazy` và `Suspense`
    
* 4.2.2. Cách setup và ưu điểm
    

### **5\. Best Practices**

5.1. Quản lý state trong navigation  
5.2. Handling 404 pages

* 5.2.1. `Route` không khớp
    
* 5.2.2. Custom 404 component
    

### **6\. Kết luận**

6.1. Tổng kết các điểm đã nêu  
6.2. Đề xuất các chủ đề sẽ được đề cập trong các bài viết tiếp theo

### **7\. Tài liệu tham khảo và liên kết hữu ích**

Dựa trên dàn ý này, bài viết có thể cung cấp cái nhìn chi tiết và toàn diện về cách làm việc với định tuyến và điều hướng trong React, từ cơ bản đến nâng cao.