Bài viết này mình sẽ nói về routing trong React nghen. Nhưng mà ở version 5 thôi nhé, version mới mình chưa update hehe

Package: react-router-dom**npm i --save react-router-dom@^5**

Các component trong react-router-dom

Router: Component bao bọc tất cả các component khác của routing, mình sử dụng là BrowerRouter còn các loại khác các bạn có thể tìm hiểu sau nhé. Và tất cả các component của reacr-router-dom đều phải nằm bên trong Router nhé Route: Render component khi match với patch Switch: Chỉ render route đầu tiên match path Redirect: Redirect từ path này sang path khác Link: Đi tới path tương ứng NavLink: Giống như Link như có thêm activeClassName, thường làm cho menu để style cho item đang active

Sự khác biệt Route & Switch

Route:Chỉ cần match với path thì render lên component đó lên Switch: Nó sẽ chạy từ trên xuống dưới, check từng Route, cái nào match với path hiện tại thì render component đó và dừng tại đó luôn. Ngược lại không dùng Switch thì nó sẽ render tất cả component được match luôn Switch bọc các Route lại

Route matching

Mặc định exact = false, lúc đó Route sẽ match khi URL bắt đầu tới path Khi exact = true, lúc đó Route sẽ match khi URL = path

Redirect: Mình muốn chuyển từ path này sang path khách thì mình dùng Redirect nghen

Dùng bên trong Switch Redirect từ path nào đến path nào. Có thể sử dụng thêm exact

// Chỉ cần bắt đầu /home thì sẽ tự động chuyển sang /


// Bắt buộc url là /home thì sẽ tự động chuyển sang /


// Cũng có thể chuyển mà vẫn giữ tham số url được luôn nha

Các hook trong react-router-dom

useHistory: Trả về history instance, dùng để navigate. Thường dùng để di chuyển qua trang khác thay vì dùng Link hoặc NavLink useLocation: Trả về location object của URL hiện tại. Thường xử lý với URL params useParrams: Trả về path params object của URL hiện tại. Khi muốn xử lý path params useRouteMatch: Trả về match object của URL hiện tại. Khi làm nested routing

Phân biệt Path params & URL params

Path params

Ví dụ: Route có path là: /todos/:todoId User vào đường dẫn: todos/123 -> Path params là {todoId: ‘123’}

URL params

User vào đường dẫn: /todos?page=1&size=10 URL params là phần sau dấu chấm hỏi