From 818a108282a99736c89b0456a0a4af852f1ed4a1 Mon Sep 17 00:00:00 2001 From: typist Date: Mon, 27 Oct 2025 23:37:42 +0800 Subject: [PATCH] feat: integrate react-router-dom for routing functionality - Added react-router-dom to package.json and pnpm-lock.yaml. - Created a new Layout component to manage sidebar and main content. - Implemented AppRouter for defining application routes and redirection logic. --- package.json | 1 + pnpm-lock.yaml | 45 +++++++++++++++++++++++++++++++++++++++++++++ src/layout.tsx | 14 ++++++++++++++ src/main.tsx | 3 ++- src/router.tsx | 45 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 src/layout.tsx create mode 100644 src/router.tsx diff --git a/package.json b/package.json index 559f931..951a73f 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "lucide-react": "^0.548.0", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-router-dom": "^7.9.4", "tailwind-merge": "^3.3.1", "tailwindcss": "^4.1.16" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e0ffc81..a0925a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: react-dom: specifier: ^19.1.1 version: 19.2.0(react@19.2.0) + react-router-dom: + specifier: ^7.9.4 + version: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0) tailwind-merge: specifier: ^3.3.1 version: 3.3.1 @@ -903,6 +906,10 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -1344,6 +1351,23 @@ packages: '@types/react': optional: true + react-router-dom@7.9.4: + resolution: {integrity: sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: '>=18' + react-dom: '>=18' + + react-router@7.9.4: + resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true + react-style-singleton@2.2.3: resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==} engines: {node: '>=10'} @@ -1426,6 +1450,9 @@ packages: engines: {node: '>=10'} hasBin: true + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -2348,6 +2375,8 @@ snapshots: convert-source-map@2.0.0: {} + cookie@1.0.2: {} + cross-spawn@7.0.6: dependencies: path-key: 3.1.1 @@ -2727,6 +2756,20 @@ snapshots: optionalDependencies: '@types/react': 19.2.2 + react-router-dom@7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + react-router: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + + react-router@7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + cookie: 1.0.2 + react: 19.2.0 + set-cookie-parser: 2.7.1 + optionalDependencies: + react-dom: 19.2.0(react@19.2.0) + react-style-singleton@2.2.3(@types/react@19.2.2)(react@19.2.0): dependencies: get-nonce: 1.0.1 @@ -2786,6 +2829,8 @@ snapshots: semver@7.7.3: {} + set-cookie-parser@2.7.1: {} + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 diff --git a/src/layout.tsx b/src/layout.tsx new file mode 100644 index 0000000..21994fa --- /dev/null +++ b/src/layout.tsx @@ -0,0 +1,14 @@ +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" +import { Sidebar } from "@/components/ui/sidebar" +import type { FC } from "react" +import { Outlet } from "react-router-dom"; + +export const Layout: FC = () => ( + + +
+ + +
+ +); \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index e90b8e1..72ea416 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,10 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' +import { AppRouter } from './router' createRoot(document.getElementById('root')!).render( - {null} + ) diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..0e17d98 --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,45 @@ +import { + createBrowserRouter, + redirect, + RouterProvider, +} from "react-router-dom"; + +import { Layout } from "./layout"; + +// 路由配置 +const router = createBrowserRouter([ + { + path: "", + element: , + children: [ + { + path: "tools", + children: [ + { + index: true, + loader: () => redirect(`/empty`), + }, + ] + }, + ] + }, + { + path: "empty", + element:
Nohting
, + }, + { + index: true, + loader: () => { + return redirect("/tools"); + }, + }, + { + path: "*", + loader: () => { + return redirect("/tools"); + }, + }, +]); + +// 路由提供者组件 +export const AppRouter = () => ; \ No newline at end of file