vite-react/src/AppRouter.tsx

import { BrowserRouter as Router, Switch, Redirect, Route, Link } from "react-router-dom"
import React, { Fragment } from "react"

import { pageList } from "@/plugins/pageHoc"

import Layout from "@/views/Layout"

import Auth from "@/ui/Auth"
import routes, { Loading } from "./route"

function LoadWrapper(props: any) {
  if (props.isLazy) {
    const LoadingComp=props.loading?props.loading: ()=><Loading color="#ff0000"></Loading> //NormalLoading;
    return <React.Suspense fallback={<LoadingComp></LoadingComp>}>{props.children}</React.Suspense>
  }
  return <Fragment>{props.children}</Fragment>
}

function RouteMap(props: any) {
  const routes: any[] = props.routes

  return (
    <Switch>
      {routes.map((route, index) => {
        const { exact = false } = route
        if (route.redirect) {
          return (
            <Route key={index} path={route.path} exact={exact}>
              <Redirect to={route.redirect}></Redirect>
            </Route>
          )
        }
        if (route.component) {
          return (
            <Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}>
              <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
                <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
              </LoadWrapper>
            </Auth>
          )
        }
      })}
    </Switch>
  )
}

export default function () {
  console.log(pageList)

  return (
    <Router>
      <RouteMap routes={routes}></RouteMap>
      {/* <Layout
        render={() => {
          return <RouteMap routes={routes}></RouteMap>
        }}
      ></Layout> */}
    </Router>
  )
}