Update routing library from react-router-dom to react-router

- Updated package.json to replace react-router-dom with react-router version 7.0.1.
- Refactored imports across the codebase

package.json

@@ -47,7 +47,7 @@
     "react-hook-form": "^7.53.2",
     "react-markdown": "^9.0.1",
     "react-redux": "9.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "react-spinners": "^0.14.1",
     "redux": "5.0.1",
     "redux-persist": "^6.0.0",

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, memo } from 'react'
 import { Provider as ReduxStoreProvider } from 'react-redux'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 import { persistStore } from 'redux-persist'
 import { PersistGate as ReduxPersistGate } from 'redux-persist/integration/react'
 

src/Routes.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Routes as ReactRouterRoutes, Route } from 'react-router-dom'
+import { Routes as ReactRouterRoutes, Route } from 'react-router'
 
 import About from './pages/About'
 import Dashboard from './pages/Dashboard'

src/components/Layout/Header.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import Header from './Header'
 

src/components/Layout/Header.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import Github from '../icons/Github'
 import ThemeToggle from '../ToggleTheme'

src/components/Layout/Layout.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import Layout from '.'
 

src/components/Sidebar/CreateLink.tsx

@@ -1,6 +1,6 @@
 import { PlusIcon } from '@heroicons/react/24/outline'
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { onCloseHander } from './onCloseHander'
 

src/components/Sidebar/DashboardLink.tsx

@@ -1,6 +1,6 @@
 import { HomeIcon } from '@heroicons/react/24/outline'
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { onCloseHander } from './onCloseHander'
 

src/components/Sidebar/LoginLink.tsx

@@ -1,6 +1,6 @@
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline'
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { onCloseHander } from './onCloseHander'
 

src/components/Sidebar/LogoutLink.tsx

@@ -1,7 +1,7 @@
 import { ArrowRightOnRectangleIcon } from '@heroicons/react/24/outline'
 import React, { memo } from 'react'
-import type { NavigateFunction } from 'react-router-dom'
-import { useNavigate } from 'react-router-dom'
+import type { NavigateFunction } from 'react-router'
+import { useNavigate } from 'react-router'
 
 import { logout } from '../../redux/adminSlice'
 import { API } from '../../redux/API'

src/components/Sidebar/SettingLink.tsx

@@ -1,6 +1,6 @@
 import { CogIcon } from '@heroicons/react/24/outline'
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { onCloseHander } from './onCloseHander'
 

src/lib/TestRenderer.tsx

@@ -3,8 +3,8 @@ import { render } from '@testing-library/react'
 import type { ReactElement } from 'react'
 import React from 'react'
 import { Provider } from 'react-redux'
-import type { MemoryRouterProps } from 'react-router-dom'
-import { MemoryRouter } from 'react-router-dom'
+import type { MemoryRouterProps } from 'react-router'
+import { MemoryRouter } from 'react-router'
 
 import { store } from '../redux/store'
 

src/pages/About/About.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import About from '.'
 

src/pages/Dashboard/Create/Create.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import Create from '.'
 

src/pages/Dashboard/Create/handlers.ts

@@ -1,5 +1,5 @@
 import type { ChangeEvent } from 'react'
-import type { NavigateFunction } from 'react-router-dom'
+import type { NavigateFunction } from 'react-router'
 
 import type { AdminState } from '../../../redux/adminSlice'
 import type { API } from '../../../redux/API'

src/pages/Dashboard/Create/index.tsx

@@ -1,7 +1,7 @@
 import { superstructResolver } from '@hookform/resolvers/superstruct'
 import React, { memo } from 'react'
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import Button from '@/src/components/Button'
 import Input from '@/src/components/Input/Input'

src/pages/Dashboard/Dashboard.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import Dashboard from '.'
 

src/pages/Dashboard/Edit/Edit.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { MemoryRouter, Routes, Route } from 'react-router'
 
 import Edit from '.'
 

src/pages/Dashboard/Edit/Edit.test.tsx

@@ -1,6 +1,6 @@
 import { waitFor } from '@testing-library/dom'
 import React from 'react'
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route } from 'react-router'
 
 import { sleep } from '../../../../lib/sleep'
 import TestRenderer from '../../../lib/TestRenderer'

src/pages/Dashboard/Edit/handlers.ts

@@ -1,5 +1,5 @@
 import type { UseFormGetValues } from 'react-hook-form'
-import type { NavigateFunction } from 'react-router-dom'
+import type { NavigateFunction } from 'react-router'
 
 import type { AdminState } from '../../../redux/adminSlice'
 import type { FormInput } from '../../../redux/draftSlice'

src/pages/Dashboard/Edit/index.tsx

@@ -1,7 +1,7 @@
 import { superstructResolver } from '@hookform/resolvers/superstruct'
 import React, { memo } from 'react'
 import { useForm } from 'react-hook-form'
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router'
 
 import Button from '@/src/components/Button'
 import Input from '@/src/components/Input/Input'

src/pages/Dashboard/EditButtonGroup.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import Button from '@/src/components/Button'
 import type { UsePagenationResult } from '@/src/components/Pagination/usePagination'

src/pages/Dashboard/Setting/index.tsx

@@ -7,7 +7,7 @@ import {
 import clsx from 'clsx'
 import React, { memo } from 'react'
 import type { ComponentProps } from 'react'
-import { Link, Routes, Route, Outlet, useLocation } from 'react-router-dom'
+import { Link, Routes, Route, Outlet, useLocation } from 'react-router'
 
 import Layout from '@/src/components/Layout'
 

src/pages/Dashboard/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import Button from '@/src/components/Button'
 import Layout from '@/src/components/Layout'

src/pages/Index/Index.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import Index from '.'
 

src/pages/Index/PostList/PostRow/PostLink/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 interface Props {
   index: number

src/pages/Login/Login.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import Login from '.'
 

src/pages/Login/index.tsx

@@ -2,7 +2,7 @@ import { superstructResolver } from '@hookform/resolvers/superstruct'
 import React, { memo } from 'react'
 import { useForm } from 'react-hook-form'
 import type { SubmitHandler, FieldValues } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import Button from '@/src/components/Button'
 import Input from '@/src/components/Input/Input'

src/pages/NotFound/NotFound.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 
 import NotFound from '.'
 

src/pages/Post/Content.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react'
 import React, { memo } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import rehypeRaw from 'rehype-raw'
 import breaks from 'remark-breaks'
 import gfm from 'remark-gfm'