ZMPRouter

Cập nhật lần cuối: 27/05/2022

ZMPRouter component: Wrapper thay thế cho BrowserRouter của react-router, component này config sẵn basename để có thể định tuyến trên mini app

Properties

ZMPRouter

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).

thông tin

• MemoryRouter tính năng mới của react-router (v6). Khác với BrowserRouter (Router mặc định được sử dụng bởi ZMPRouter), lịch sử trang phụ thuộc vào history stack của browser, MemoryRouter tự lưu trữ và xử lý lịch sử, sử dụng trong trường hợp muốn tự control history stack,...
• Khi sử dụng Memory Router, header mặc định sẽ không có back button, trường hợp này cần ẩn actionbar mặc định và tự implement Header cho Mini App

useNavigate

useNavigate hook hoạt động giống như useNavigate hook của react-router-dom, 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 hook trả về một function có chức năng giúp trang đến route path cụ thể

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

Name	Type	Default	Description
to	string | Path		Route path cần chuyển đến
options	ZMPNavigationOptions		một số tuỳ chọn cho việc chuyển trang

Trong đó:

• Path là object chứa pathname, search, hash
• ZMPNavigationOptions là object với:
  • 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, có thể thêm data
  • 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)

(delta: number):void

Name	Type	Default	Description
delta	number		Vị trí muốn chuyển đến trong history stack

Example

Open Sandbox

import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";
export default function HomePage(props) {
  const navigate = useNavigate();

  return (
    <Page className="section-container">
      <Text.Title style={{ textAlign: "center" }}>Home Page</Text.Title>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate("/page1");
          }}
        >
          Go To Page 1
        </Button>
      </Box>
    </Page>
  );
}