Bộ định tuyến React Hook

Tram Ho

Giới thiệu chung

React Router là một thư viện nhẹ cho phép bạn quản lý và xử lý việc định tuyến cho ứng dụng React của mình.

Trong số các tính năng nổi bật nhất của React Router là route render methods, cho phép component của bạn truy cập các match, history, location của props. Các props này được sử dụng để truyền dữ liệu từ URL đến component và điều hướng ứng dụng React của bạn.

Ví dụ: nếu bạn muốn tạo nút quay lại, bạn có thể sử dụng hàm goBack () từ history props. Điều này khác nhau trong các môi trường hoặc trình duyệt web để bạn có thể quay lại trang web trước đó một cách đơn giản.

React Router có một vài hook cho phép bạn truy cập trạng thái của router và thực hiện điều hướng từ bên trong các component của bạn.
Xin lưu ý: Bạn cần phải sử dụng React> = 16.8 để sử dụng các hook sau:

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

1. useHistory

Hook useHistory cung cấp cho bạn quyền truy cập vào history instance mà bạn có thể sử dụng để điều hướng
import { useHistory } from “react-router-dom”;

2. useLocation

Hook useLocation trả về đối tượng vị trí đại diện cho URL hiện tại. Bạn có thể nghĩ về nó giống như useState trả về một vị trí mới bất cứ khi nào URL thay đổi.
Điều này có thể thực sự hữu ích, ví dụ: trong tình huống mà bạn muốn kích hoạt sự kiện “page view” mới bằng cách sử dụng công cụ phân tích trang web của bạn bất cứ khi nào một trang mới tải, như trong ví dụ sau:

3.useParams

Hook useParams trả về một đối tượng gồm các cặp khóa / giá trị của tham số URL. Sử dụng nó để truy cập match.params của <Route> hiện tại.

4. useRouteMatch

Hook useRouteMatch match với URL hiện tại giống như cách mà <Route> sẽ làm. Nó chủ yếu hữu ích để có quyền truy cập vào dữ liệu không thực sự được render ở <Route>.

Thay vì

Bạn chỉ cần

Bạn có thể sử dụng Hook useRouteMatch:

  • không nhận đối số và trả về đối tượng khớp của <Route> hiện tại
  • nhận một đối số duy nhất, giống với đối số props của matchPath. Nó có thể là một tên đường dẫn dưới dạng một chuỗi (như ví dụ ở trên) hoặc một đối tượng với các props phù hợp mà Route chấp nhận, như sau:

Tham khảo:

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo