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

ZMPRouter

Cập nhật lần cuối:

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​

NameTypeDefaultDescription
childrenReactNodelà routes wrapper có thể là AnimationRoutes của zmp-ui hoặc Routes của react-router-dom
memoryRouterbooleanfalseSử dụng Memory Router
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

NameTypeDefaultDescription
tostring | PathRoute path cần chuyển đến
optionsZMPNavigationOptionsmộ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

NameTypeDefaultDescription
deltanumberVị trí muốn chuyển đến trong history stack

Example​

import React from "react";
import { Route } from "react-router-dom";
import { AnimationRoutes, App, ZMPRouter } from "zmp-ui";


export default function MyApp(props) {
  return (
    
      <ZMPRouter>
        <AnimationRoutes>
          } />
          } />
          } />
        </AnimationRoutes>
      </ZMPRouter>
    
  );
}
import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";
export default function Page1(props) {
  const navigate = useNavigate();
  return (
    
      <Text.Title style={{ textAlign: "center" }}>Page 1</Text.Title>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate("/", {
              replace: true,
              animate: true,
              direction: "backward",
            });
          }}
        >
          Go To Home
        </Button>
      </Box>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate("/page2");
          }}
        >
          Not Found
        </Button>
      </Box>
    
  );
}
import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";

export default function NotFound(props) {
  const navigate = useNavigate();
  return (
    
      <Text.Title style={{ textAlign: "center" }}>Coming Soon!</Text.Title>
      <Box mt={6}>
        <Text style={{ textAlign: "center" }} size="xxSmall">
          This feature is under development.
        </Text>
      </Box>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate(-1);
          }}
        >
          Go Back
        </Button>
      </Box>
    
  );
}
import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";
export default function HomePage(props) {
  const navigate = useNavigate();

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