wip: upgrade to react-router v7

cdsctf · Nov 24, 2024 · e6ee29a · e6ee29a
1 parent e571e16
commit e6ee29a
Show file tree

Hide file tree

Showing 17 changed files with 122 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.1.2",
         "react-markdown": "^9.0.1",
-        "react-router-dom": "^6.26.1",
+        "react-router": "^7.0.1",
         "react-transition-group": "^4.4.5",
         "rehype-autolink-headings": "^7.1.0",
         "rehype-highlight": "^7.0.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useThemeStore } from "@/stores/theme";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 import { useEffect } from "react";
 import { router } from "@/routers";
 
@@ -13,7 +13,5 @@ export default function App() {
         );
     }, [themeStore.darkMode]);
 
-    return (
-        <RouterProvider router={router} fallbackElement={<p>Loading...</p>} />
-    );
+    return <RouterProvider router={router} />;
 }
diff --git a/src/components/core/Icon/Icon.tsx b/src/components/core/Icon/Icon.tsx
@@ -7,10 +7,10 @@ export interface IconProps extends ComponentProps<"i"> {
 }
 
 export const Icon = forwardRef<HTMLElement, IconProps>((props, ref) => {
-    const { icon, className } = props;
+    const { icon, className, ...rest } = props;
 
     return (
-        <i ref={ref} className={clsx(styles["root"], className)}>
+        <i ref={ref} className={clsx(styles["root"], className)} {...rest}>
             {icon}
         </i>
     );

diff --git a/src/components/core/Stack/Stack.module.scss b/src/components/core/Stack/Stack.module.scss
@@ -2,4 +2,6 @@
     display: flex;
     flex-direction: column;
     gap: var(--stack-gap, 0);
+    align-items: var(--stack-align, baseline);
+    justify-content: var(--stack-justify, flex-start);
 }
diff --git a/src/components/core/Stack/Stack.tsx b/src/components/core/Stack/Stack.tsx
@@ -5,13 +5,31 @@ import clsx from "clsx";
 
 export interface StackProps extends BoxProps {
     gap?: string;
+    justify?:
+        | "flex-start"
+        | "flex-end"
+        | "center"
+        | "space-between"
+        | "space-around"
+        | "space-evenly";
+    align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
 }
 
 export function Stack(props: StackProps) {
-    const { children, gap = "15px", className, style, ...rest } = props;
+    const {
+        children,
+        gap = "15px",
+        justify = "flex-start",
+        align = "baseline",
+        className,
+        style,
+        ...rest
+    } = props;
 
     const variables = {
         "--stack-gap": gap,
+        "--stack-justify": justify,
+        "--stack-align": align,
     } as CSSProperties;
 
     return (

diff --git a/src/components/utils/HydrateFallback/HydrateFallback.module.scss b/src/components/utils/HydrateFallback/HydrateFallback.module.scss
@@ -0,0 +1,6 @@
+.root {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
diff --git a/src/components/utils/HydrateFallback/HydrateFallback.tsx b/src/components/utils/HydrateFallback/HydrateFallback.tsx
@@ -0,0 +1,19 @@
+import { Box } from "@/components/core/Box";
+import styles from "./HydrateFallback.module.scss";
+import { Icon } from "@/components/core/Icon";
+import { Stack } from "@/components/core/Stack/Stack";
+import { Flex } from "@/components/core/Flex";
+import Loading from "@/components/icons/Loading";
+
+export function HydrateFallback() {
+    return (
+        <Box className={styles["root"]}>
+            <Stack gap={"15px"} align={"center"}>
+                <Flex gap={"15px"}>
+                    <Icon icon={<Loading />} />
+                    <Box>加载中</Box>
+                </Flex>
+            </Stack>
+        </Box>
+    );
+}
diff --git a/src/components/utils/HydrateFallback/index.ts b/src/components/utils/HydrateFallback/index.ts
@@ -0,0 +1 @@
+export { HydrateFallback } from "./HydrateFallback";
diff --git a/src/components/widgets/Navbar/Navbar.tsx b/src/components/widgets/Navbar/Navbar.tsx
@@ -6,24 +6,18 @@ import Book2BoldDuotone from "~icons/solar/book-2-bold-duotone";
 import FlagBoldDuotone from "~icons/solar/flag-bold-duotone";
 import UsersGroupTwoRoundedBoldDuotone from "~icons/solar/users-group-two-rounded-bold-duotone";
 import SolarSettingsBoldDuotone from "~icons/solar/settings-bold-duotone";
+import SolarFiltersBoldDuotone from "~icons/solar/filters-bold-duotone";
+import SolarRoundArrowLeftBoldDuotone from "~icons/solar/round-arrow-left-bold-duotone";
 import styles from "./Navbar.module.scss";
 import useThemeColor from "@/hooks/useThemeColor";
-import { CSSProperties, useRef, useState } from "react";
+import { CSSProperties, useMemo, useRef, useState } from "react";
 import chroma from "chroma-js";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import { Avatar, Popover } from "@/components/core";
 import { Icon } from "@/components/core/Icon";
 import { Box } from "@/components/core/Box";
 
-interface NavbarProps {
-    links?: {
-        icon: JSX.Element;
-        label: string;
-        href: string;
-    }[];
-}
-
-export function Navbar({ links }: NavbarProps) {
+export function Navbar() {
     const defaultLinks = [
         {
             icon: <PlanetBoldDuotone />,
@@ -52,7 +46,47 @@ export function Navbar({ links }: NavbarProps) {
         },
     ];
 
-    const finalLinks = links || defaultLinks;
+    const settingLinks = [
+        {
+            icon: <Book2BoldDuotone />,
+            label: "题库管理",
+            href: "/settings/challenges",
+        },
+        {
+            icon: <FlagBoldDuotone />,
+            label: "比赛管理",
+            href: "/settings/games",
+        },
+        {
+            icon: <UsersGroupTwoRoundedBoldDuotone />,
+            label: "用户管理",
+            href: "/settings/users",
+        },
+        {
+            icon: <SolarSettingsBoldDuotone />,
+            label: "系统设置",
+            href: "/settings/system",
+        },
+        {
+            icon: <SolarFiltersBoldDuotone />,
+            label: "外观设置",
+            href: "/settings/appearance",
+        },
+        {
+            icon: <SolarRoundArrowLeftBoldDuotone />,
+            label: "返回上级",
+            href: "/",
+        },
+    ];
+
+    const location = useLocation();
+
+    const finalLinks = useMemo(() => {
+        if (location.pathname.startsWith("/settings")) {
+            return settingLinks;
+        }
+        return defaultLinks;
+    }, [location.pathname]);
 
     const darkMode = useThemeStore.getState().darkMode;
     const pathname = useLocation().pathname;

diff --git a/src/layouts/Base/Base.tsx b/src/layouts/Base/Base.tsx
@@ -2,7 +2,7 @@ import { ErrorFallback } from "@/components/utils/ErrorFallback/ErrorFallback";
 import { Toaster } from "@/components/widgets/Toaster";
 import globalRouter from "@/utils/globalRouter";
 import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router";
 
 export function Base() {
     const navigate = useNavigate();

diff --git a/src/layouts/Default/Default.tsx b/src/layouts/Default/Default.tsx
@@ -1,6 +1,6 @@
 import { Navbar } from "@/components/widgets/Navbar";
 import styles from "./Default.module.scss";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 export function Default() {
     return (

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
@@ -8,7 +8,7 @@ import LoginBold from "~icons/solar/login-bold";
 import useThemeColor from "@/hooks/useThemeColor";
 import { login } from "@/api/user";
 import { useAuthStore } from "@/stores/auth";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useToastStore } from "@/stores/toast";
 
 export function Login() {

diff --git a/src/pages/_games/Default/Default.tsx b/src/pages/_games/Default/Default.tsx
@@ -1,5 +1,5 @@
 import { Image } from "@/components/core/Image";
-import styles from "./page.module.scss";
+import styles from "./Default.module.scss";
 import { Button } from "@/components/core";
 import PlayCircleBold from "~icons/solar/play-circle-bold";
 

diff --git a/src/pages/_games/_[id]/Default/Default.tsx b/src/pages/_games/_[id]/Default/Default.tsx
@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export function Default() {
     const { id } = useParams();

diff --git a/src/pages/_settings/Default/Default.tsx b/src/pages/_settings/Default/Default.tsx
@@ -1,53 +1,3 @@
-import Book2BoldDuotone from "~icons/solar/book-2-bold-duotone";
-import FlagBoldDuotone from "~icons/solar/flag-bold-duotone";
-import UsersGroupTwoRoundedBoldDuotone from "~icons/solar/users-group-two-rounded-bold-duotone";
-import SolarSettingsBoldDuotone from "~icons/solar/settings-bold-duotone";
-import SolarFiltersBoldDuotone from "~icons/solar/filters-bold-duotone";
-import { Navbar } from "@/components/widgets/Navbar";
-import SolarRoundArrowLeftBoldDuotone from "~icons/solar/round-arrow-left-bold-duotone";
-import { Outlet } from "react-router-dom";
-import styles from "./Default.module.scss";
-
 export function Default() {
-    const SettingLinks = [
-        {
-            icon: <Book2BoldDuotone />,
-            label: "题库管理",
-            href: "/settings/challenges",
-        },
-        {
-            icon: <FlagBoldDuotone />,
-            label: "比赛管理",
-            href: "/settings/games",
-        },
-        {
-            icon: <UsersGroupTwoRoundedBoldDuotone />,
-            label: "用户管理",
-            href: "/settings/users",
-        },
-        {
-            icon: <SolarSettingsBoldDuotone />,
-            label: "系统设置",
-            href: "/settings/system",
-        },
-        {
-            icon: <SolarFiltersBoldDuotone />,
-            label: "外观设置",
-            href: "/settings/appearance",
-        },
-        {
-            icon: <SolarRoundArrowLeftBoldDuotone />,
-            label: "返回上级",
-            href: "/",
-        },
-    ];
-
-    return (
-        <>
-            <Navbar links={SettingLinks} />
-            <main className={styles["main"]}>
-                <Outlet />
-            </main>
-        </>
-    );
+    return <>111</>;
 }
diff --git a/src/routers/index.ts → src/routers.tsx b/src/routers/index.ts → src/routers.tsx
@@ -1,7 +1,9 @@
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
+import { HydrateFallback } from "@/components/utils/HydrateFallback";
 
 export const router = createBrowserRouter([
     {
+        hydrateFallbackElement: <HydrateFallback />,
         path: "/",
         lazy: async () => {
             let { Base } = await import("@/layouts/Base");
@@ -15,13 +17,6 @@ export const router = createBrowserRouter([
                     return { Component: Login };
                 },
             },
-            {
-                path: "settings",
-                lazy: async () => {
-                    let { Default } = await import("@/pages/_settings/Default");
-                    return { Component: Default };
-                },
-            },
             {
                 path: "/",
                 lazy: async () => {
@@ -45,6 +40,20 @@ export const router = createBrowserRouter([
                             return { Component: Default };
                         },
                     },
+                    {
+                        path: "settings",
+                        children: [
+                            {
+                                index: true,
+                                lazy: async () => {
+                                    let { Default } = await import(
+                                        "@/pages/_settings/Default"
+                                    );
+                                    return { Component: Default };
+                                },
+                            },
+                        ],
+                    },
                 ],
             },
             {

diff --git a/src/utils/globalRouter.ts b/src/utils/globalRouter.ts
@@ -1,4 +1,4 @@
-import { NavigateFunction } from "react-router-dom";
+import { NavigateFunction } from "react-router";
 
 const globalRouter = { navigate: undefined } as {
     navigate?: NavigateFunction;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { HydrateFallback } from "./HydrateFallback";