---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/layout/ZMPRouter
title: ZMPRouter
---
```ts
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ể:

```ts
(delta: number) => void
```

hoặc

```ts
(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).

:::info

- `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


| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| children | React.ReactNode | No |  | Nhận trực tiếp `` hoặc ``. |
| memoryRouter | boolean | No | false | Sử dụng `MemoryRouter` thay vì `BrowserRouter` (mặc định). |