kaiPingWeb/code/src/components/RouterOrder.tsx

import history, { isMobileFu } from "@/utils/history";
import React from "react";
import { Route, Router, Switch } from "react-router-dom";
import SpinLoding from "./SpinLoding";
import NotFound from "@/components/NotFound";

const A1Home = React.lazy(() => import("@/pages/A1Home"));
const A1HomeM = React.lazy(() => import("@/pages/A1HomeM"));

const B1Village = React.lazy(() => import("@/pages/B1Village"));
const B1VillageM = React.lazy(() => import("@/pages/B1VillageM"));

const C1Architec = React.lazy(() => import("@/pages/C1Architec"));
const C1ArchitecM = React.lazy(() => import("@/pages/C1ArchitecM"));
const C2ArchitecInfo = React.lazy(() => import("@/pages/C2ArchitecInfo"));

const D1Build = React.lazy(() => import("@/pages/D1Build"));
const D1BuildM = React.lazy(() => import("@/pages/D1BuildM"));
const D2BuildInfo = React.lazy(() => import("@/pages/D2BuildInfo"));

const Z2Scene = React.lazy(() => import("@/pages/Z2Scene"));

const Z1Search = React.lazy(() => import("@/pages/Z1Search"));

const routerArr = [
  {
    id: 1,
    name: "总览",
    path: "/",
    exact: true,
    Com: isMobileFu() ? A1HomeM : A1Home,
  },
  {
    id: 2,
    name: "村落",
    path: "/village",
    exact: false,
    Com: isMobileFu() ? B1VillageM : B1Village,
  },
  {
    id: 3,
    name: "建筑",
    path: "/architec",
    exact: false,
    Com: isMobileFu() ? C1ArchitecM : C1Architec,
  },
  {
    id: 4,
    name: "建筑详情",
    path: "/architecInfo",
    exact: false,
    Com: C2ArchitecInfo,
  },
  {
    id: 5,
    name: "构件",
    path: "/build",
    exact: false,
    Com: isMobileFu() ? D1BuildM : D1Build,
  },
  {
    id: 6,
    name: "构件详情",
    path: "/buildInfo",
    exact: false,
    Com: D2BuildInfo,
  },
  {
    id: 7,
    name: "场景",
    path: "/scene",
    exact: false,
    Com: Z2Scene,
  },
  {
    id: 8,
    name: "搜索",
    path: "/search",
    exact: false,
    Com: Z1Search,
  },
  {
    id: 9,
    name: "找不到页面",
    path: "*",
    exact: false,
    Com: NotFound,
  },
];

function RouterOrder() {
  return (
    <Router history={history}>
      <React.Suspense fallback={<SpinLoding />}>
        <Switch>
          {routerArr.map((v) => (
            <Route key={v.id} path={v.path} exact={v.exact} component={v.Com} />
          ))}
        </Switch>
      </React.Suspense>
    </Router>
  );
}

const MemoRouterOrder = React.memo(RouterOrder);

export default MemoRouterOrder;