Router code split - lazy

homewiz·2023년 11월 28일

React [Webpack]

목록 보기
9/11

intro

laze 함수 사용법

// ######################################################################################
// type. 1
// ######################################################################################

export function lazyComp(callback) {
  const ReturnComponent = React.lazy(() => callback());
  return <ReturnComponent />;
}

const router = createBrowserRouter([
  { path: "/", element: <Layout /> },
  { path: "*", element: <NotFound /> },
  { path: "/2", element: lazyComp(() => import("./pages/Home3")) }
  // { path: "/3", lazy: () => import("./pages/Home3") }
]);

export const App = () => {
  return (
    <RouterProvider router={router} fallbackElement={<div className="bg-red-300">Loading...</div>} future={{ v7_startTransition: true }}>
      dddddddddddddddd
    </RouterProvider>
  );
};

0개의 댓글