gmlx/project/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 store, { RootState } from './store'
import { useSelector } from 'react-redux'
import NotFound from '@/components/NotFound'
import TouchContainer from './components/TouchContainer'
import AsyncSpinLoding from './components/AsyncSpinLoding'
import { Image } from 'antd'
import MessageCom from '@/components/Message'
// import Vconsole from 'vconsole'
// new Vconsole()

// import { isLoc, myData } from './utils/http'
const A0base = React.lazy(() => import('./pages/A0base'))
const Home = React.lazy(() => import('./pages/A1home'))
const Scene = React.lazy(() => import('./pages/A2scene'))
const Architecture = React.lazy(() => import('./pages/A3architecture'))
const Member = React.lazy(() => import('./pages/A4member'))
const View = React.lazy(() => import('./pages/A5view'))
const Life = React.lazy(() => import('./pages/A6life'))
declare global {
  //设置全局属性
  interface Window {
    //window对象属性
    isHH: boolean //加入对象
    myDataTemp: MyDataType
  }
}

export default function App() {

  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)

  return (
    <>
      {/* 关于路由 */}
      <Router history={history}>
        <React.Suspense fallback={<SpinLoding />}>
          <Switch>
            <Route path='/' component={A0base} exact />
            <Route path='/home' component={Home} exact />
            <Route path='/scene' component={Scene} exact />
            <Route path='/architecture' component={Architecture} exact />
            <Route path='/member' component={Member} exact />
            <Route path='/view' component={View} exact />
            <Route path='/life' component={Life} exact />
            <Route path='*' component={NotFound} />
          </Switch>
        </React.Suspense>
      </Router>

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

      {/* 所有图片点击预览查看大图 */}
      {lookBigImg.show ? (
        <Image
          preview={{
            imageRender: originalNode => (
              <div className='previewImage'>
                <TouchContainer className='Ori' zoom={lookBigImg.zoom}>
                  {originalNode}
                </TouchContainer>
                <div className='ImgFromTxt'>{lookBigImg.fromTxt}</div>
              </div>
            ),
            visible: lookBigImg.show,
            src: lookBigImg.url,
            onVisibleChange: value => {
              // 清除仓库信息
              store.dispatch({
                type: 'layout/lookBigImg',
                payload: { url: '', show: false, fromTxt: '', zoom: 1 }
              })
            }
          }}
        />
      ) : null}

      <MessageCom />
    </>
  )
}