Chuyển tới nội dung chính
ZZalo Platforms

ZMPRouter

Cập nhật lần cuối:
import { ZMPRouter } from "zmp-ui";

Dùng để điều hướng giữa các trang trong Mini App, kết hợp với useNavigate.

useNavigate​

useNavigate (hook) hoạt động giống như useNavigate của react-router, tuy nhiên sẽ được bổ sung thêm các option để tuỳ chỉnh hiệu ứng chuyển trang khi dùng chung với ZMPRouter và AnimationRoutes của zmp-ui

useNavigate trả về một function có chức năng giúp trang đến route path cụ thể:

(delta: number) => void

hoặc

(to: string | Path, options?: ZMPNavigationOptions) => void

Trong đó:

  • delta – number, số bước di chuyển trong history stack. Ví dụ: navigate(-1) tương đương nút back.

  • to – string | Path, đường dẫn đến trang cần đến.

  • Path – object, gồm các field:

    • pathname – string
    • search – string
    • hash – string

  • ZMPNavigationOptions – object, gồm các field:

    • replace - boolean, set true nếu muốn thay thế entry hiện tại trong history stack thay vì thêm mới.
    • state - any, dùng để truyền extra data giữa các trang.
    • animate - boolean, set false để chuyển trang không sử dụng animation (Khi dùng AnimationRoutes).
    • direction - "forward" | "backward", chuyển trang với hiệu ứng chuyển trang cụ thể (Khi dùng AnimationRoutes).
thông tin
  • ZMPRouter là một wrapper của BrowserRouter. Bạn có thể sử dụng BrowserRouter trực tiếp từ react-router nhưng cần đảm bảo basename được thiết lập đúng.
  • MemoryRouter là router mới trong react-router@6. MemoryRouter không dùng lịch sử trình duyệt như BrowserRouter mà quản lý riêng history stack — phù hợp khi muốn tự kiểm soát lịch sử điều hướng.
  • Dùng MemoryRouter sẽ không có nút back mặc định trên header. Lúc này cần ẩn actionbar mặc định và tự tạo header riêng.

Ví dụ​

Bảng thuộc tính​

PropertyTypeRequiredDescription
childrenReact.ReactNodeNoNhận trực tiếp `<Routes>` hoặc `<AnimationRoutes>`.
memoryRouterbooleanNoSử dụng `MemoryRouter` thay vì `BrowserRouter` (mặc định). (default: false)