Routing trong React only post 😁

  • admin
  • 13 Tháng Sáu, 2022

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

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
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x