fix: Resolve routing transition issue in #2

src/pages/_views/RootPageViews.tsx

@@ -1,5 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from "react";
-import {useStore} from "@nanostores/react";
+import {useCallback, useEffect, useLayoutEffect, useRef, useState} from "react";
 import {viewIndex, viewIndexSetNext, viewIndexSetPrev} from "../../components/store/rootLayoutStore.ts";
 import arknightsConfig from "../../../arknights.config.tsx";
 import RootPageViewTemplate from "./RootPageViewTemplate.tsx";
@@ -11,17 +10,40 @@ import Media from "./04-Media.tsx";
 import More from "./05-More.tsx";
 
 export default function RootPageViews() {
-    const $viewIndex = useStore(viewIndex)
+    const [isLoading, setIsLoading] = useState(true);
 
-    //// 首次挂载组件通过当前锚点设置 viewIndex
-    useEffect(() => {
+    const [localViewIndex, setLocalViewIndex] = useState(() => {
+        const HASH = location.hash.split("#")[1];
+        const INDEX = arknightsConfig.navbar.items.findIndex(item =>
+            HASH === item.href.split("#")[1])
+        return INDEX === -1 ? 0 : INDEX;
+    });
+
+    useLayoutEffect(() => {
+        viewIndex.set(localViewIndex);
+        setIsLoading(false);
+    }, [localViewIndex]);
+
+    // 处理 hash 变化
+    useLayoutEffect(() => {
+        const handleHashChange = () => {
+            const HASH = location.hash.split("#")[1];
+            const INDEX = arknightsConfig.navbar.items.findIndex(item =>
+                HASH === item.href.split("#")[1])
+            setLocalViewIndex(INDEX === -1 ? 0 : INDEX);
+        }
+
+        window.addEventListener("hashchange", handleHashChange);
+        return () => window.removeEventListener("hashchange", handleHashChange);
+    }, []);
+
+    useLayoutEffect(() => {
         const HASH = location.hash.split("#")[1];
         const INDEX = arknightsConfig.navbar.items.findIndex(item =>
             HASH === item.href.split("#")[1])
         viewIndex.set(INDEX === -1 ? 0 : INDEX)
     }, [])
 
-    //// 响应移动端上下滑动手势
     const startTouchY = useRef(0)
 
     const handleTouchStart = useCallback((event: TouchEvent) => {
@@ -47,19 +69,16 @@ export default function RootPageViews() {
         }
     }, [handleTouchStart, handleTouchEnd])
 
-    //// 响应鼠标滚轮
-    // 上次鼠标滚轮使用时间戳
     const lastScrollTime = useRef(0);
 
-    // 监听鼠标滚轮修改 viewIndex；限制修改间隔为一秒；
     useEffect(() => {
         const handleScroll = (event: WheelEvent) => {
             if (performance.now() - lastScrollTime.current > 1000) {
                 let newIndex: number
                 if (event.deltaY < 0)
-                    newIndex = $viewIndex > 0 ? $viewIndex - 1 : $viewIndex
+                    newIndex = localViewIndex > 0 ? localViewIndex - 1 : localViewIndex
                 else
-                    newIndex = $viewIndex < arknightsConfig.navbar.items.length - 1 ? $viewIndex + 1 : $viewIndex
+                    newIndex = localViewIndex < arknightsConfig.navbar.items.length - 1 ? localViewIndex + 1 : localViewIndex
 
                 location.hash = arknightsConfig.navbar.items[newIndex].href.split("#")[1]
                 viewIndex.set(newIndex)
@@ -70,19 +89,11 @@ export default function RootPageViews() {
         const rootElement = document.getElementById("root-page-views")
         rootElement!.addEventListener("wheel", handleScroll)
         return () => rootElement!.removeEventListener("wheel", handleScroll);
-    }, [$viewIndex])
-
-    //// 监听锚点链接改变修改 viewIndex
-    useEffect(() => {
-        const handleHashChange = (hce: HashChangeEvent) => {
-            const index: number = arknightsConfig.navbar.items.findIndex(item =>
-                item.href.split("#")[1] === window.location.hash.split("#")[1])
-            viewIndex.set(index === -1 ? 0 : index)
-        }
+    }, [localViewIndex])
 
-        window.addEventListener("hashchange", handleHashChange)
-        return () => window.removeEventListener("hashchange", handleHashChange)
-    }, [])
+    if (isLoading) {
+        return null; // 或者返回一个加载指示器
+    }
 
     return [Index, Information, Operator, World, Media, More].map((Element, index) =>
         <RootPageViewTemplate key={index} selfIndex={index}><Element /></RootPageViewTemplate>