YPZZBWG/pc/src/App.tsx

import "@/assets/styles/base.css";

import React from "react";
import SpinLoding from "./components/SpinLoding";
import AsyncSpinLoding from "./components/AsyncSpinLoding";
import { Router, Route, Switch } from "react-router-dom";
import { Image } from "antd";
import history from "./utils/history";
import { useSelector } from "react-redux";
import store, { RootState } from "./store";
import MessageCom from "./components/Message";

// 使用 React.lazy 懒加载页面
const A1Home = React.lazy(() => import("./pages/A1Home"));
const A2Main = React.lazy(() => import("./pages/A2Main"));
const A3Goods = React.lazy(() => import("./pages/A3Goods"));
const NotFound = React.lazy(() => import("@/components/NotFound"));

function App() {
  // 从仓库中获取查看图片的信息
  const lookBigImg = useSelector(
    (state: RootState) => state.A0layout.lookBigImg
  );
  return (
    <div id="app">
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            {/* 封面页 */}
            <Route path="/" exact component={A1Home} />
            {/* 主要页 */}
            <Route path="/main" exact component={A2Main} />
            {/* 通过文物分享id打开的页面 */}
            <Route path="/goods" component={A3Goods} />
            {/* 找不到页面 */}
            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      {/* 发送请求的加载组件 */}
      <AsyncSpinLoding />

      {/* 所有图片点击预览查看大图 */}
      <Image
        preview={{
          visible: lookBigImg.show,
          src: lookBigImg.url,
          onVisibleChange: (value) => {
            // 清除仓库信息
            store.dispatch({
              type: "layout/lookBigImg",
              payload: { url: "", show: false },
            });
          },
        }}
      />

      {/* antd 轻提示 ---兼容360浏览器 */}
      <MessageCom />
    </div>
  );
}

const MemoApp = React.memo(App);

export default MemoApp;