vite-react/src/route.tsx

import Page404 from "@/views/Auth/Page404"
import React, { lazy } from "react"

function Test() {
  return <div>TExtas</div>
}

export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>

let delay =
  (Comp: any, duration = 1000) =>
  () =>
    new Promise<any>(resolve =>
      Comp()
        .then((res: any) => {
          setTimeout(() => {
            resolve(res)
          }, duration)
        })
        .catch(() => {
          resolve({
            default: () => <div>Error</div>,
          })
        })
    )

export default [
  {
    path: "/about",
    component: lazy(() => import("@/views/About")),
    exact: false,
    meta: {
      auth: false,
    },
    loading: () => <Loading color="red"></Loading>,
    children: [
      {
        path: "/about/test",
        exact: true,
        meta: {
          auth: false,
        },
        loading: () => <Loading color="green"></Loading>,
        component: lazy(delay(() => import("@/views/Login/Test"))),
      },
    ],
  },
  {
    path: "/home",
    component: lazy(() => import("@/views/Home")),
    loading: () => <Loading color="blue"></Loading>,
    meta: {
      auth: false,
    },
    children: [],
  },
  {
    path: "/",
    exact: true,
    redirect: "/home",
  },
  {
    path: "/login",
    component: lazy(() => import("@/views/Login")),
  },
  {
    path: "*",
    exact: false,
    component: Page404,
  },
]