wcbwg/pc/src/App.tsx

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

const Home = React.lazy(() => import("./pages/A1_Home"));
const Goods = React.lazy(() => import("./pages/A2_Goods"));

function App() {
  // 从仓库中获取查看图片的信息
  const lookBigImg = useSelector(
    (state: RootState) => state.A0layout.lookBigImg
  );
  return (
    <div id="app">
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            
            {/* 线上开发 */}
            <Route exact path="/" component={Home} />
            <Route exact path="/goods" component={Goods} />

            {/* 本地化 */}
            {/* <Route exact path="/" component={Goods} />
            <Route exact path="/home" component={Home} /> */}

            {/* 找不到页面 */}
            <Route path="*" component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

      {/* 所有图片点击预览查看大图 */}
      <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;