From 5bcc5fa07af543e7748ecfe8376dc1e86036a97a Mon Sep 17 00:00:00 2001 From: npmrun <1549469775@qq.com> Date: Wed, 27 Nov 2024 21:29:04 +0800 Subject: [PATCH] feat: route to v7 --- package.json | 3 +- pnpm-lock.yaml | 147 +++++++++++++---------------------------------- src/App.tsx | 54 ++++++++--------- src/layout/base.tsx | 18 +++--- src/router-new/index.ts | 16 ++++++ src/router/route.tsx | 54 ++++++++--------- src/views/About.tsx | 18 ------ src/views/Child.tsx | 9 --- src/views/Home/index.tsx | 6 +- src/views/PlayGround.tsx | 11 ---- src/views/Project.tsx | 34 ----------- src/viewsSys/404.tsx | 12 ---- src/viewsSys/NoMatch.tsx | 12 ++++ 13 files changed, 135 insertions(+), 259 deletions(-) create mode 100644 src/router-new/index.ts delete mode 100644 src/views/About.tsx delete mode 100644 src/views/Child.tsx delete mode 100644 src/views/PlayGround.tsx delete mode 100644 src/views/Project.tsx delete mode 100644 src/viewsSys/404.tsx create mode 100644 src/viewsSys/NoMatch.tsx diff --git a/package.json b/package.json index 76e7cea..da8b6b8 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "@blueprintjs/icons": "^5.14.0", "@blueprintjs/table": "^5.2.5", "@types/lodash": "^4.17.13", - "@types/react-router-dom": "^5.3.3", "appwrite": "^16.0.2", "axios": "^1.7.7", "framer-motion": "^11.11.17", @@ -28,7 +27,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.53.2", "react-markdown": "^9.0.1", - "react-router-dom": "^5.3.4", + "react-router": "^7.0.1", "react-toastify": "^10.0.6", "styled-components": "^6.1.13" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3de642e..48328e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,9 +23,6 @@ importers: '@types/lodash': specifier: ^4.17.13 version: 4.17.13 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 appwrite: specifier: ^16.0.2 version: 16.0.2 @@ -56,9 +53,9 @@ importers: react-markdown: specifier: ^9.0.1 version: 9.0.1(@types/react@18.3.12)(react@18.3.1) - react-router-dom: - specifier: ^5.3.4 - version: 5.3.4(react@18.3.1) + react-router: + specifier: ^7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-toastify: specifier: ^10.0.6 version: 10.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -537,6 +534,9 @@ packages: '@swc/types@0.1.15': resolution: {integrity: sha512-XKaZ+dzDIQ9Ot9o89oJQ/aluI17+VvUnIpYJTcZtvv1iYX6MzHh3Ik2CSR7MdPKpPwfZXHBeCingb2b4PoDVdw==} + '@types/cookie@0.6.0': + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} @@ -549,9 +549,6 @@ packages: '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} - '@types/history@4.7.11': - resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==} - '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} @@ -573,12 +570,6 @@ packages: '@types/react-dom@18.3.1': resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==} - '@types/react-router-dom@5.3.3': - resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==} - - '@types/react-router@5.1.20': - resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} - '@types/react@18.3.12': resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==} @@ -763,6 +754,10 @@ packages: constant-case@3.0.4: resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==} + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + cross-spawn@7.0.5: resolution: {integrity: sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==} engines: {node: '>= 8'} @@ -976,12 +971,6 @@ packages: header-case@2.0.4: resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==} - history@4.10.1: - resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==} - - hoist-non-react-statics@3.3.2: - resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} - html-url-attributes@3.0.1: resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==} @@ -1028,9 +1017,6 @@ packages: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} - isarray@0.0.1: - resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==} - isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -1256,9 +1242,6 @@ packages: resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} engines: {node: '>=8'} - path-to-regexp@1.9.0: - resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -1333,15 +1316,15 @@ packages: react: ^16.8.0 || ^17 || ^18 react-dom: ^16.8.0 || ^17 || ^18 - react-router-dom@5.3.4: - resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==} - peerDependencies: - react: '>=15' - - react-router@5.3.4: - resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==} + react-router@7.0.1: + resolution: {integrity: sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==} + engines: {node: '>=20.0.0'} peerDependencies: - react: '>=15' + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true react-toastify@10.0.6: resolution: {integrity: sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==} @@ -1382,9 +1365,6 @@ packages: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} - resolve-pathname@3.0.0: - resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==} - reusify@1.0.4: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} @@ -1408,6 +1388,9 @@ packages: sentence-case@3.0.4: resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==} + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + shallowequal@1.1.0: resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} @@ -1453,12 +1436,6 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} - tiny-invariant@1.3.3: - resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} - - tiny-warning@1.0.3: - resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} - to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -1481,6 +1458,9 @@ packages: tslib@2.6.3: resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==} + turbo-stream@2.4.0: + resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -1534,9 +1514,6 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 - value-equal@1.0.1: - resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==} - vfile-message@4.0.2: resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} @@ -1890,6 +1867,8 @@ snapshots: dependencies: '@swc/counter': 0.1.3 + '@types/cookie@0.6.0': {} + '@types/debug@4.1.12': dependencies: '@types/ms': 0.7.34 @@ -1904,8 +1883,6 @@ snapshots: dependencies: '@types/unist': 3.0.3 - '@types/history@4.7.11': {} - '@types/json-schema@7.0.15': {} '@types/lodash@4.17.13': {} @@ -1926,17 +1903,6 @@ snapshots: dependencies: '@types/react': 18.3.12 - '@types/react-router-dom@5.3.3': - dependencies: - '@types/history': 4.7.11 - '@types/react': 18.3.12 - '@types/react-router': 5.1.20 - - '@types/react-router@5.1.20': - dependencies: - '@types/history': 4.7.11 - '@types/react': 18.3.12 - '@types/react@18.3.12': dependencies: '@types/prop-types': 15.7.13 @@ -2155,6 +2121,8 @@ snapshots: tslib: 2.6.3 upper-case: 2.0.2 + cookie@1.0.2: {} + cross-spawn@7.0.5: dependencies: path-key: 3.1.1 @@ -2407,19 +2375,6 @@ snapshots: capital-case: 1.0.4 tslib: 2.6.3 - history@4.10.1: - dependencies: - '@babel/runtime': 7.26.0 - loose-envify: 1.4.0 - resolve-pathname: 3.0.0 - tiny-invariant: 1.3.3 - tiny-warning: 1.0.3 - value-equal: 1.0.1 - - hoist-non-react-statics@3.3.2: - dependencies: - react-is: 16.13.1 - html-url-attributes@3.0.1: {} ignore@5.3.2: {} @@ -2454,8 +2409,6 @@ snapshots: is-plain-obj@4.1.0: {} - isarray@0.0.1: {} - isexe@2.0.0: {} jotai@2.10.3(@types/react@18.3.12)(react@18.3.1): @@ -2811,10 +2764,6 @@ snapshots: path-key@3.1.1: {} - path-to-regexp@1.9.0: - dependencies: - isarray: 0.0.1 - picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -2893,29 +2842,15 @@ snapshots: react-fast-compare: 3.2.2 warning: 4.0.3 - react-router-dom@5.3.4(react@18.3.1): - dependencies: - '@babel/runtime': 7.26.0 - history: 4.10.1 - loose-envify: 1.4.0 - prop-types: 15.8.1 - react: 18.3.1 - react-router: 5.3.4(react@18.3.1) - tiny-invariant: 1.3.3 - tiny-warning: 1.0.3 - - react-router@5.3.4(react@18.3.1): + react-router@7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@babel/runtime': 7.26.0 - history: 4.10.1 - hoist-non-react-statics: 3.3.2 - loose-envify: 1.4.0 - path-to-regexp: 1.9.0 - prop-types: 15.8.1 + '@types/cookie': 0.6.0 + cookie: 1.0.2 react: 18.3.1 - react-is: 16.13.1 - tiny-invariant: 1.3.3 - tiny-warning: 1.0.3 + set-cookie-parser: 2.7.1 + turbo-stream: 2.4.0 + optionalDependencies: + react-dom: 18.3.1(react@18.3.1) react-toastify@10.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: @@ -2964,8 +2899,6 @@ snapshots: resolve-from@4.0.0: {} - resolve-pathname@3.0.0: {} - reusify@1.0.4: {} rollup@4.27.2: @@ -3008,6 +2941,8 @@ snapshots: tslib: 2.6.3 upper-case-first: 2.0.2 + set-cookie-parser@2.7.1: {} + shallowequal@1.1.0: {} shebang-command@2.0.0: @@ -3056,10 +2991,6 @@ snapshots: dependencies: has-flag: 4.0.0 - tiny-invariant@1.3.3: {} - - tiny-warning@1.0.3: {} - to-regex-range@5.0.1: dependencies: is-number: 7.0.0 @@ -3076,6 +3007,8 @@ snapshots: tslib@2.6.3: {} + turbo-stream@2.4.0: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 @@ -3144,8 +3077,6 @@ snapshots: dependencies: react: 18.3.1 - value-equal@1.0.1: {} - vfile-message@4.0.2: dependencies: '@types/unist': 3.0.3 diff --git a/src/App.tsx b/src/App.tsx index 26e8670..ae92a69 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,29 +1,31 @@ -import AppRouter from "@/router/AppRouter" -import { ToastContainer, Bounce } from 'react-toastify'; +import { HashRouter, Navigate, Route, Routes } from "react-router" +import { ToastContainer, Bounce } from "react-toastify" +import BaseLayout from "@/layout/base" +import Home from "@/views/Home" +import NoMatch from "@/viewsSys/NoMatch" export default function App() { - return <> - - - {/* */} - + return ( + <> + + + }> + } /> + } /> + } /> + + + + + + ) } diff --git a/src/layout/base.tsx b/src/layout/base.tsx index c25efe3..5074f56 100644 --- a/src/layout/base.tsx +++ b/src/layout/base.tsx @@ -1,6 +1,6 @@ import { Alignment, Button, Dialog, DialogBody, DialogFooter, Menu, MenuDivider, MenuItem, Navbar, Popover } from "@blueprintjs/core" import { ReactNode, useState } from "react" -import { NavLink, useHistory } from "react-router-dom" +import { NavLink, Outlet } from "react-router" import styled from "styled-components" import { GlobalStyles } from "./GlobalStyles" import { Notice } from "@/ui/Notice" @@ -9,7 +9,7 @@ import { Register } from "@/ui/Register/Register" import { Login } from "@/ui/Login/Login" interface PageProps { - children: ReactNode + // children: ReactNode } const PageWrapper = styled.div` @@ -31,8 +31,6 @@ function BaseLayout(props: PageProps) { const [isOpenAuth, setIsOpenAuth] = useState(false) const [isRegister, setIsRegister] = useState(false) - const router = useHistory() - const about = ` > 人生如逆水行舟，不进则退。 @@ -50,7 +48,7 @@ function BaseLayout(props: PageProps) { 天涯行宫 - +