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

AnimationRoutes

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

AnimationRoutes component: Wrapper thay thế cho Routes của react-router, component này thêm hiệu ứng khi chuyển trang

Properties​

AnimationRoutes​

NameTypeDefaultDescription
childrenReactNodeCác Route page

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