fix: warnings

src/pages/problem.tsx

@@ -6,7 +6,6 @@ import {
     Descriptions,
     Tag,
     Space,
-    Typography,
     Button,
 } from "antd";
 import { PlayCircleOutlined, SearchOutlined } from "@ant-design/icons";
@@ -23,7 +22,7 @@ export async function ProblemLoader({ params }: { params: { id: string } }) {
     return await ProblemApi.Details({ pid: id });
 }
 
-function ProblemPage() {
+export function ProblemPage() {
     const details = useLoaderData() as DetailsResp;
     const navigate = useNavigate();
 
@@ -31,15 +30,13 @@ function ProblemPage() {
         <Descriptions bordered column={1} size="small">
             <Descriptions.Item label="Provider">
                 <Link to={`/user/${details.problem.provider.meta.ID}`}>
-                    <Typography.Link>
                     {details.problem.provider.nick_name}
-                    </Typography.Link>
                 </Link>
             </Descriptions.Item>
             <Descriptions.Item label="Supported Languages">
                 <Space size={[0, 8]} wrap>
                     {details.context.Languages.map((l) => (
-                        <Tag>{l.Lang}</Tag>
+                        <Tag key={l.Lang}>{l.Lang}</Tag>
                     ))}
                 </Space>
             </Descriptions.Item>
@@ -114,5 +111,3 @@ function ProblemPage() {
         </>
     );
 }
-
-export { ProblemPage };

src/pages/root.tsx

@@ -1,22 +1,35 @@
 import { Link, Outlet, useLocation, useNavigation } from "react-router-dom";
-import { Layout, Menu, Skeleton, theme } from "antd";
+import { Layout, Menu, MenuProps, Skeleton, theme } from "antd";
 
 import { NavConfigs } from "../routes.tsx";
+import { useEffect, useState } from "react";
 
 const { Header, Footer, Content } = Layout;
 
+const navItems: MenuProps["items"] = NavConfigs.map((c) => {
+    return {
+        label: <Link to={c.to}>{c.label}</Link>,
+        key: c.key,
+    };
+});
+
 function Root() {
     const {
         token: { colorBgContainer },
     } = theme.useToken();
-    const nav = useNavigation();
-    const pathname = useLocation().pathname;
 
-    const pathToKey = () => {
-        const routes = NavConfigs.filter((c) => pathname.startsWith(c.prefix));
-        if (routes.length === 0) return ["home"];
-        return [routes[0].key];
-    };
+    const nav = useNavigation();
+    const location = useLocation();
+
+    const [curTab, setCurTab] = useState("home");
+
+    useEffect(() => {
+        setCurTab(
+            NavConfigs.filter((c) => c.regex.test(location.pathname))
+                .map((c) => c.key)
+                .concat(["home"])[0],
+        );
+    }, [location]);
 
     return (
         <>
@@ -26,14 +39,9 @@ function Root() {
                         theme="dark"
                         mode="horizontal"
                         defaultSelectedKeys={["home"]}
-                        selectedKeys={pathToKey()}
-                    >
-                        {NavConfigs.map((c) => (
-                            <Menu.Item key={c.key}>
-                                <Link to={c.to}>{c.label}</Link>
-                            </Menu.Item>
-                        ))}
-                    </Menu>
+                        selectedKeys={[curTab]}
+                        items={navItems}
+                    />
                 </Header>
                 <Layout>
                     <Content

src/routes.tsx

@@ -22,8 +22,18 @@ const RouteConfigs = [
 ];
 
 const NavConfigs = [
-    { key: "home", to: "home", label: "Home", prefix: "/home" },
-    { key: "problem", to: "problem", label: "Problem", prefix: "/problem" },
+    {
+        key: "home",
+        to: "/home",
+        label: "Home",
+        regex: /^\/$|^\/home$/gi,
+    },
+    {
+        key: "problem",
+        to: "/search/",
+        label: "Problem",
+        regex: /^\/+(problem|search)($|\/.*)/gi,
+    },
 ];
 
 export { RouteConfigs, NavConfigs };