ZMPRouter

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

 function MyApp(props){
    return (
        <App>
            <ZMProuter>
                 <AnimationRoutes>
                     <Route path="/" element={<HomePage />} />
                     <Route path="/page1" element={<Page1 />} />
                </AnimationRoutes>
            </ZMPRouter>
        </App>
    );
}

import { useNavigate } from "zmp-ui";
export default () => {
  const navigate = useNavigate();

  //...
  // back
  navigate(-1);
  // animate tới route path /page1
  navigate("/page1");
  // animate tới route path /page1 với options
  navigate("/page1", { replace: true, animate: true, direction: "backward" });
};