整理pc和移动端路由

code/src/App.tsx

@@ -1,25 +1,15 @@
 import "@/assets/styles/base.css";
 // 关于路由
-import React, { useCallback, useEffect, useState } from "react";
-import { Router, Route, Switch } from "react-router-dom";
+import { useCallback, useEffect, useState } from "react";
 import history from "./utils/history";
-import SpinLoding from "./components/SpinLoding";
 import MessageCom from "./components/Message";
-import NotFound from "./components/NotFound";
 import { baseUrl } from ".";
 import classNames from "classnames";
 import B1Card from "./pages/B1Card";
 import { useSelector } from "react-redux";
 import store, { RootState } from "./store";
 import { AppTabList } from "./utils/data";
-const A1Home = React.lazy(() => import("./pages/A1Home"));
-const B1Village = React.lazy(() => import("./pages/B1Village"));
-const C1Architec = React.lazy(() => import("./pages/C1Architec"));
-const C2ArchitecInfo = React.lazy(() => import("./pages/C2ArchitecInfo"));
-const D1Build = React.lazy(() => import("./pages/D1Build"));
-const D2BuildInfo = React.lazy(() => import("./pages/D2BuildInfo"));
-const Z2Scene = React.lazy(() => import("./pages/Z2Scene"));
-const Z1Search = React.lazy(() => import("./pages/Z1Search"));
+import RouterOrder from "./components/RouterOrder";
 
 export default function App() {
   const [routerAc, setRouterAc] = useState("/");
@@ -66,30 +56,7 @@ export default function App() {
   return (
     <div id="App">
       {/* 关于路由 */}
-      <Router history={history}>
-        <React.Suspense fallback={<SpinLoding />}>
-          <Switch>
-            {/* 总览 */}
-            <Route path="/" exact component={A1Home} />
-            {/* 村落 */}
-            <Route path="/village" component={B1Village} />
-            {/* 建筑 */}
-            <Route path="/architec" component={C1Architec} />
-            {/* 建筑详情 */}
-            <Route path="/architecInfo" component={C2ArchitecInfo} />
-            {/* 构件 */}
-            <Route path="/build" component={D1Build} />
-            {/* 构件详情 */}
-            <Route path="/buildInfo" component={D2BuildInfo} />
-            {/* 场景 */}
-            <Route path="/scene" component={Z2Scene} />
-            {/* 搜索 */}
-            <Route path="/search" component={Z1Search} />
-            {/* 找不到页面 */}
-            <Route path="*" component={NotFound} />
-          </Switch>
-        </React.Suspense>
-      </Router>
+      <RouterOrder />
 
       {/* 视频加载中 */}
       {videoShow && isVideoShow ? (

code/src/AppM.tsx

@@ -1,11 +1,8 @@
 import "@/assets/styles/base.css";
 // 关于路由
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Router, Route, Switch } from "react-router-dom";
+import { useCallback, useEffect, useRef, useState } from "react";
 import history from "./utils/history";
-import SpinLoding from "./components/SpinLoding";
 import MessageCom from "./components/Message";
-import NotFound from "./components/NotFound";
 import { baseUrl } from ".";
 import classNames from "classnames";
 import { useSelector } from "react-redux";
@@ -15,13 +12,7 @@ import screenImg from "@/assets/img/landtip.png";
 import fillTitImg from "@/assets/img/tab2/btn_normal.png";
 import fillTitAcImg from "@/assets/img/tab2/btn_active.png";
 import B1CardM from "./pages/B1CardM";
-
-const A1HomeM = React.lazy(() => import("./pages/A1HomeM"));
-const B1VillageM = React.lazy(() => import("./pages/B1VillageM"));
-const C1ArchitecM = React.lazy(() => import("./pages/C1ArchitecM"));
-const C2ArchitecInfo = React.lazy(() => import("./pages/C2ArchitecInfo"));
-const D1BuildM = React.lazy(() => import("./pages/D1BuildM"));
-const Z2Scene = React.lazy(() => import("./pages/Z2Scene"));
+import RouterOrder from "./components/RouterOrder";
 
 export default function AppM() {
   const setFullFu = useCallback(() => {
@@ -95,26 +86,7 @@ export default function AppM() {
   return (
     <div id="AppM">
       {/* 关于路由 */}
-      <Router history={history}>
-        <React.Suspense fallback={<SpinLoding />}>
-          <Switch>
-            {/* 总览 */}
-            <Route path="/" exact component={A1HomeM} />
-            {/* 村落 */}
-            <Route path="/village" component={B1VillageM} />
-            {/* 建筑 */}
-            <Route path="/architec" component={C1ArchitecM} />
-            {/* 建筑详情 */}
-            <Route path="/architecInfo" component={C2ArchitecInfo} />
-            {/* 构件 */}
-            <Route path="/build" component={D1BuildM} />
-            {/* 场景 */}
-            <Route path="/scene" component={Z2Scene} />
-            {/* 找不到页面 */}
-            <Route path="*" component={NotFound} />
-          </Switch>
-        </React.Suspense>
-      </Router>
+      <RouterOrder />
 
       {/* 视频加载中 */}
       {videoShow && isVideoShow ? (

code/src/assets/styles/base.less

@@ -266,7 +266,7 @@ textarea {
 
       // .AppMtabRowAc {
       //   .AppMtabRowName {
-      //     text-shadow: 2px 2px var(--themeColor);
+      //     text-shadow: 1px 1px var(--themeColor);
       //   }
       // }
     }

code/src/components/RouterOrder.tsx

@@ -0,0 +1,107 @@
+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;

code/src/pages/D1BuildM/index.module.scss

@@ -19,8 +19,8 @@
     }
 
     .D1topTab {
-      width: calc(100% - 50px);
-      margin-left: 10px;
+      width: calc(100% - 60px);
+      margin-left: 20px;
       height: 40px;
       overflow-x: auto;
 

code/src/pages/D1BuildM/index.tsx

@@ -11,7 +11,7 @@ function D1BuildM() {
     (state: RootState) => state.A0Layout
   );
 
-  // 获取村落数据
+  // 获取村落数据(顶部top栏)
   const tabData = useSelector(
     (state: RootState) => state.A0Layout.dataAll.village
   );

code/src/pages/Z1Search/index.tsx

@@ -5,10 +5,15 @@ import { SwapRightOutlined } from "@ant-design/icons";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import { InfoRowType, SearchType } from "@/types";
-import history from "@/utils/history";
+import history, { isMobileFu } from "@/utils/history";
 import classNames from "classnames";
 
 function Z1Search() {
+  // 移动端没有搜索页面，直接跳首页
+  useEffect(() => {
+    if (isMobileFu()) history.replace("/");
+  }, []);
+
   const [value, setValue] = useState("");
 
   // 获取所有数据