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

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