setUrlQueryParams

src/hook/useUrlQueryParams.ts

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import { URLSearchParamsInit, useSearchParams } from "react-router-dom";
+import { cleanObject } from "../utils";
+
+const useUrlQueryParams = <K extends string>(keys: K[]) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  return [
+    useMemo(
+      () =>
+        keys.reduce(
+          (prev, key) => ({
+            ...prev,
+            [key]: searchParams.get(key) || "",
+          }),
+          {} as { [key in K]: string }
+        ),
+      [searchParams]
+    ),
+    (params: Partial<{ [key in K]: unknown }>) => {
+      const newParams = cleanObject({ ...Object.fromEntries(searchParams), ...params }) as URLSearchParamsInit
+      setSearchParams(newParams)
+    },
+  ] as const;
+};
+
+export default useUrlQueryParams;

src/pages/Home/index.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { Dropdown, Menu, Button } from "antd";
 import { Navigate, Route, Routes } from "react-router";
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from "react-router-dom";
 import ProjectList from "../ProjectList";
 import Project from "../Project";
 import { useAuth } from "../../context/auth-context";
 import { ReactComponent as SoftwareLogo } from "../../assets/software-logo.svg";
 import { Main, Container, Header, HeaderLeft, HeaderRight } from "./style";
+import { resetRoute } from "../../utils";
 
 const Home = () => {
   return (
@@ -17,6 +18,7 @@ const Home = () => {
           <Routes>
             <Route path="/projects" element={<ProjectList />} />
             <Route path="/projects/:projectId/*" element={<Project />} />
+            <Route path="*" element={<Navigate to="/projects" />} />
           </Routes>
         </BrowserRouter>
       </Main>
@@ -29,7 +31,9 @@ const PageHeader = () => {
   return (
     <Header between={true}>
       <HeaderLeft gap={true}>
-        <SoftwareLogo width="18rem" color="rgb(38, 132, 255)" />
+        <Button type="link" onClick={resetRoute}>
+          <SoftwareLogo width="18rem" color="rgb(38, 132, 255)" />
+        </Button>
         <h2>项目</h2>
         <h2>用户</h2>
       </HeaderLeft>

src/pages/Project/Kanban/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Kanban = () => {
+  return <div>Kanban</div>;
+};
+
+export default Kanban;

src/pages/Project/Task/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Task = () => {
+  return <div>Task</div>;
+};
+
+export default Task;

src/pages/Project/index.tsx

@@ -1,7 +1,25 @@
-import React from 'react'
+import React from "react";
+import { Routes, Route, Navigate } from "react-router";
+import { Link } from "react-router-dom";
+import Kanban from "./Kanban";
+import Task from "./Task";
 
 const Project = () => {
-  return <div>Project</div>
-}
+  return (
+    <div>
+      <h1>Project</h1>
+      <Link to="kanban">看板</Link>
+      <Link to="task">任务组</Link>
+      <Routes>
+        <Route path="/kanban" element={<Kanban />} />
+        <Route path="/task" element={<Task />} />
+        <Route
+          path="*"
+          element={<Navigate to={window.location.pathname + "/kanban"} />}
+        />
+      </Routes>
+    </div>
+  );
+};
 
-export default Project
+export default Project;

src/pages/ProjectList/Search/index.tsx

@@ -39,7 +39,7 @@ const Search = ({ param, setParam, users }: SearchPanelProps) => {
         >
           <Option value={""}>负责人</Option>
           {users.map((user) => (
-            <Option value={user.id} key={user.id}>
+            <Option value={String(user.id)} key={user.id}>
               {user.name}
             </Option>
           ))}

src/pages/ProjectList/index.tsx

@@ -7,6 +7,7 @@ import { Container } from "./style";
 import useProjects from "../../hook/useProjects";
 import useUsers from "../../hook/useUsers";
 import useDocumentTitle from "../../hook/useDocumentTitle";
+import useUrlQueryParams from "../../hook/useUrlQueryParams";
 
 interface Project {
   id: string;
@@ -18,7 +19,7 @@ interface Project {
 }
 
 const ProjectList = () => {
-  const [param, setParam] = useState({ name: "", personId: "" });
+  const [param, setParam] = useUrlQueryParams(["name", "personId"]);
   const debounceParams = useDebounce(param, 200);
   const { isLoading, error, data: list } = useProjects(debounceParams);
   const { data: users } = useUsers();

src/utils/index.ts

@@ -1,6 +1,6 @@
 export const isFalsy = (value: unknown) => (value === 0 ? false : !value);
 
-export const isVoid = (value: unknown) => value === undefined || value === null || value === '';
+export const isVoid = (value: unknown) => value === undefined || value === null || value === "";
 
 // 筛选对象空值
 export const cleanObject = (object: { [key: string]: unknown }) => {
@@ -12,4 +12,6 @@ export const cleanObject = (object: { [key: string]: unknown }) => {
   });
 
   return result;
-};
+};
+
+export const resetRoute = () => (window.location.href = window.location.origin);