懒加载

警告

1. 懒加载必须使用异步函数 lazy 返回出 loader,action,Component

2. default 里面的名称 必须和下面的组件名称一致

修改 router

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    // 进入路由器前面 就加载数据,然后在渲染数据
    loader: rootloader,
    // 表单提交动作处理,不能是get,只能是post,del,put，它会通过Form拦截,找到下面的action属性来匹配,get请求会触发loader
    action: rootaction,
    // 加载错误组件
    errorElement: <ErrorPage />,
    // 嵌套路由 还得在根组件里面加入Outlet
    children: [
      // 找到默认页面
      {
        index: true,
        element: <Index></Index>,
      },
      {
        path: "contacts/:contactId",
        async lazy() {
          const {
            default: Contact,
            loader,
            action,
          } = await import("../routes/contact");
          return {
            Component: Contact,
            loader,
            action,
          };
        },
      },
      {
        path: "contacts/:contactId/edit",
        async lazy() {
          const { default: EditCom, action } = await import("./edit");
          // 因为这里引用了别的组件的logo
          const { loader } = await import("../routes/contact");
          return {
            Component: EditCom,
            loader,
            action,
          };
        },
      },
      {
        path: "contacts/:contactId/destroy",
        element: <EditComponent />,
        action: destroyAction,
        // 单独配置错误信息，局部优先于全局
        errorElement: <h1>删除失败</h1>,
      },
    ],
  },
]);