instead of reach/router with react router v6

gofi-frontend/package.json

@@ -9,49 +9,48 @@
   },
   "dependencies": {
     "@hacknug/react-icons": "^4.2.1",
-    "@reach/router": "^1.3.4",
-    "axios": "^0.21.1",
+    "axios": "^0.24.0",
     "classnames": "^2.3.1",
-    "history": "^5.0.0",
-    "i18next": "^20.3.5",
+    "history": "^5.1.0",
+    "i18next": "^21.4.2",
     "lodash": "^4.17.21",
-    "mobx": "^6.3.2",
-    "mobx-react-lite": "^3.2.0",
+    "mobx": "^6.3.6",
+    "mobx-react-lite": "^3.2.2",
     "query-string": "^7.0.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.0",
-    "react-i18next": "^11.11.4",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^11.14.1",
+    "react-router-dom": "^6.0.2",
     "react-syntax-highlighter": "^15.4.4",
-    "react-toastify": "^7.0.4",
-    "rxjs": "^7.2.0",
-    "tailwindcss": "^2.2.6"
+    "react-toastify": "^8.1.0",
+    "rxjs": "^7.4.0",
+    "swr": "^1.0.1",
+    "tailwindcss": "^2.2.19"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-typescript": "^7.14.5",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
     "@types/i18next": "^13.0.0",
-    "@types/jest": "^26.0.24",
-    "@types/lodash": "^4.14.171",
-    "@types/reach__router": "^1.3.9",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/jest": "^27.0.2",
+    "@types/lodash": "^4.14.176",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
     "@types/react-i18next": "^8.1.0",
     "@types/react-syntax-highlighter": "^13.5.2",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "@vitejs/plugin-react-refresh": "^1.3.1",
-    "autoprefixer": "^10.2.6",
-    "eslint": "^7.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "jest": "^27.0.6",
-    "postcss": "^8.3.5",
-    "prettier": "^2.3.2",
-    "ts-jest": "^27.0.4",
-    "ts-node": "^10.1.0",
-    "typescript": "^4.3.5",
-    "vite": "^2.4.3",
-    "vite-plugin-react-svg": "^0.2.0"
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.0",
+    "jest": "^27.3.1",
+    "postcss": "^8.3.11",
+    "prettier": "^2.4.1",
+    "ts-jest": "^27.0.7",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.6.14"
   }
 }

gofi-frontend/src/api/http.ts

@@ -35,7 +35,7 @@ const err = (error: { response: { data: any; status: number } }) => {
 // request interceptor for language
 http.interceptors.request.use((request) => {
     const language = localStorage.getItem(LANGUAGE)
-    if (language) {
+    if (language && request.headers) {
         request.headers['Accept-Language'] = language
     }
     return request
@@ -44,7 +44,7 @@ http.interceptors.request.use((request) => {
 // attach token to header
 http.interceptors.request.use((request) => {
     const token = localStorage.getItem(TOKEN)
-    if (token) {
+    if (token && request.headers) {
         request.headers['Authorization'] = `bearer ${token}` // 让每个请求携带自定义 token
     }
     return request

gofi-frontend/src/components/Exception.tsx

@@ -1,5 +1,5 @@
-import { Link, useNavigate } from '@reach/router'
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import Button from './Button'
 interface IProps {
     title?: string

gofi-frontend/src/components/Loading.tsx

@@ -1,10 +1,9 @@
 import { RiLoader2Line } from '@hacknug/react-icons/ri'
-import { RouteComponentProps } from '@reach/router'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import logo from '../assets/logo.svg'
 
-interface IProps extends RouteComponentProps {}
+interface IProps {}
 
 const defualtProps: IProps = {}
 

gofi-frontend/src/components/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { RiFolder2Line, RiFolder3Line } from '@hacknug/react-icons/ri'
+import { RiFolder3Line } from '@hacknug/react-icons/ri'
 import React from 'react'
 
 interface IProps {

gofi-frontend/src/components/layouts/MainLayout/LoginStatus.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
 import { RiLogoutBoxRLine, RiLoginBoxLine } from '@hacknug/react-icons/ri'
-import { Link } from '@reach/router'
 import { useStore } from '../../../stores'
 import { observer } from 'mobx-react-lite'
 import { useTranslation } from 'react-i18next'
+import { Link, useNavigate } from 'react-router-dom'
 
 interface IProps {}
 
@@ -14,6 +14,7 @@ const textClass = 'px-2 text-sm hidden sm:block'
 const LoginStatus: React.FC<IProps> = () => {
     const { userStore } = useStore()
     const { t } = useTranslation()
+    const navigate = useNavigate()
 
     return (
         <div className="flex h-full">
@@ -22,6 +23,7 @@ const LoginStatus: React.FC<IProps> = () => {
                     className={buttonClass}
                     onClick={() => {
                         userStore.logout()
+                        navigate('/')
                     }}
                 >
                     <RiLogoutBoxRLine />

gofi-frontend/src/components/layouts/MainLayout/NavMenu.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { RiGithubFill, RiFolder3Line, RiSettings2Line, RiBook2Line } from '@hacknug/react-icons/ri'
-import { Link, useLocation } from '@reach/router'
 import EnvUtil from '../../../utils/env.util'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
+import { Link, useLocation } from 'react-router-dom'
 
 const menuItemUnderLineClass =
     'transition-all box-content h-full px-4 cursor-pointer flex items-center border-b-2 text-gray-600 hover:border-indigo-500 hover:text-indigo-500'

gofi-frontend/src/components/layouts/PureLayout.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
+import { Outlet } from 'react-router'
 import Footer from '../Footer'
 
 const PureLayout: React.FC = (props) => {
     return (
         <div className="h-full flex flex-col items-center justify-center space-y-6 p-6">
-            <div className="flex-grow flex flex-col items-center justify-center w-full h-full">{props.children}</div>
+            <div className="flex-grow flex flex-col items-center justify-center w-full h-full">
+                <Outlet />
+                {props.children}
+            </div>
             <Footer />
         </div>
     )

gofi-frontend/src/pages/Login.tsx

@@ -1,29 +1,27 @@
 import { RiLoginBoxLine } from '@hacknug/react-icons/ri'
-import { navigate, RouteComponentProps } from '@reach/router'
+import { replace } from 'lodash'
 import { observer, useLocalObservable } from 'mobx-react-lite'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router'
 import backgroundImage from '../assets/login.svg'
 import logo from '../assets/logo.svg'
 import Button from '../components/Button'
 import Checkbox from '../components/form/Checkbox'
 import Input from '../components/form/Input'
 import PureLayout from '../components/layouts/PureLayout'
-import Tooltip from '../components/Tooltip'
 import { useStore } from '../stores'
 import EnvUtil from '../utils/env.util'
 import Toast from '../utils/toast.util'
 
-interface IProps extends RouteComponentProps {}
+interface IProps {}
 
 const defualtProps: IProps = {}
 
 const Login: React.FC<IProps> = (props) => {
     const { userStore } = useStore()
+    const navigate = useNavigate()
     const { t } = useTranslation()
-    if (userStore.isLogin) {
-        navigate('/')
-    }
 
     const loginStore = useLocalObservable(() => ({
         rememberme: true,

gofi-frontend/src/pages/Setup.tsx

@@ -1,7 +1,6 @@
 import { RiArrowGoBackFill } from '@hacknug/react-icons/ri'
-import { RouteComponentProps } from '@reach/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { interval, take } from 'rxjs'
 import logo from '../assets/logo.svg'
 import backgroundImage from '../assets/setup.svg'
@@ -14,7 +13,7 @@ import Tooltip from '../components/Tooltip'
 import { useStore } from '../stores'
 import TextUtil from '../utils/text.util'
 
-interface IProps extends RouteComponentProps {
+interface IProps {
     defaultStoragePath?: string
 }
 

gofi-frontend/src/pages/admin/setting/Index.tsx

@@ -1,11 +1,4 @@
-import {
-    RiComputerLine,
-    RiDatabase2Line,
-    RiDoorLockLine,
-    RiSettings2Line,
-    RiShieldUserLine,
-} from '@hacknug/react-icons/ri'
-import { RouteComponentProps } from '@reach/router'
+import { RiComputerLine, RiDatabase2Line, RiDoorLockLine, RiSettings2Line } from '@hacknug/react-icons/ri'
 import classNames from 'classnames'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import React, { useEffect } from 'react'
@@ -18,7 +11,7 @@ import { useStore } from '../../../stores'
 import Toast from '../../../utils/toast.util'
 import InputField from './InputField'
 
-interface IProps extends RouteComponentProps {}
+interface IProps {}
 
 const defualtProps: IProps = {}
 

gofi-frontend/src/pages/exception/403.tsx

@@ -1,10 +1,9 @@
-import { RouteComponentProps } from '@reach/router'
 import React from 'react'
 import unauthorizeImage from '../../assets/403.svg'
 import Exception from '../../components/Exception'
 import PureLayout from '../../components/layouts/PureLayout'
 
-const UnAuthorized: React.FC<RouteComponentProps> = () => {
+const UnAuthorized: React.FC = () => {
     return (
         <PureLayout>
             <Exception title="404" message="无权访问此页面" image={unauthorizeImage} />

gofi-frontend/src/pages/exception/404.tsx

@@ -1,10 +1,9 @@
-import { RouteComponentProps } from '@reach/router'
 import React from 'react'
 import notFoundImage from '../../assets/404.svg'
 import Exception from '../../components/Exception'
 import PureLayout from '../../components/layouts/PureLayout'
 
-const NotFound: React.FC<RouteComponentProps> = () => {
+const NotFound: React.FC = () => {
     return (
         <PureLayout>
             <Exception title="404" message="找不到页面..." image={notFoundImage} />

gofi-frontend/src/pages/exception/500.tsx

@@ -1,10 +1,9 @@
-import { RouteComponentProps } from '@reach/router'
 import React from 'react'
 import internalServerErrorImage from '../../assets/500.svg'
 import Exception from '../../components/Exception'
 import PureLayout from '../../components/layouts/PureLayout'
 
-const ServerError: React.FC<RouteComponentProps> = () => {
+const ServerError: React.FC = () => {
     return (
         <PureLayout>
             <Exception title="500" message="服务器睡着了..." image={internalServerErrorImage} />

gofi-frontend/src/pages/file/FileDetail.tsx

@@ -1,9 +1,9 @@
 import { MdOpenInNew } from '@hacknug/react-icons/md'
 import { RiLoader2Line } from '@hacknug/react-icons/ri'
-import { RouteComponentProps, useLocation, useNavigate } from '@reach/router'
 import classNames from 'classnames'
 import React, { lazy, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate } from 'react-router-dom'
 import repo, { FileInfo } from '../../api/repository'
 import previewIsNotSupport from '../../assets/no-data.svg'
 import Button from '../../components/Button'
@@ -21,7 +21,7 @@ const ImageViewer = lazy(() => import('../../components/viewer/ImageViewer'))
 const PdfViewer = lazy(() => import('../../components/viewer/PdfViewer'))
 const VideoViewer = lazy(() => import('../../components/viewer/VideoViewer'))
 
-const FileDetail: React.FC<RouteComponentProps> = (props) => {
+const FileDetail: React.FC = (props) => {
     const navigate = useNavigate()
     const location = useLocation()
     const [downloadUrl, setDownloadUrl] = useState<string>()

gofi-frontend/src/pages/file/FileViewer.tsx

@@ -1,8 +1,8 @@
 import { RiRefreshLine, RiUploadFill } from '@hacknug/react-icons/ri'
-import { navigate, RouteComponentProps, useLocation } from '@reach/router'
 import { observer } from 'mobx-react-lite'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate } from 'react-router-dom'
 import repo, { FileInfo } from '../../api/repository'
 import NotFoundImage from '../../assets/404.svg'
 import Button from '../../components/Button'
@@ -22,7 +22,7 @@ import TextUtil from '../../utils/text.util'
 import Toast from '../../utils/toast.util'
 import UrlUtil from '../../utils/url.util'
 
-const FileViewer: React.FC<RouteComponentProps> = (props) => {
+const FileViewer: React.FC = (props) => {
     const { fileStore } = useStore()
     const location = useLocation()
     const [currentPath, setCurrentPath] = useState('')
@@ -31,6 +31,7 @@ const FileViewer: React.FC<RouteComponentProps> = (props) => {
     const [uploadModalMessage, setUploadModalMessage] = useState<React.ReactNode>(null)
     const uploadRef = useRef<HTMLInputElement>(null)
     const { t } = useTranslation()
+    const navigate = useNavigate()
 
     const pathQuery = () => {
         let searchParams = new URLSearchParams(location.search)