ZMPRouter

Cập nhật lần cuối: 15/04/2025

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

Name	Type	Default	Description
children	React.ReactNode		Nhận trực tiếp <Routes> hoặc <AnimationRoutes>.
memoryRouter	boolean	false	Sử dụng MemoryRouter thay vì BrowserRouter (mặc định).