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	ReactNode		là routes wrapper có thể là AnimationRoutes của zmp-ui hoặc Routes của react-router-dom

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>
  );
}