build: bump react router to v7 (#397)

.github/dependabot.yml

@@ -11,7 +11,7 @@ updates:
           - 'react*'
           - '@types/react*'
         exclude-patterns:
-          - 'react-router-dom'
+          - 'react-router'
       storybook-group:
         patterns:
           - 'storybook*'

package.json

@@ -87,7 +87,7 @@
     "dexie-react-hooks": "^1.1.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.15.0",
+    "react-router": "^7.0.1",
     "theme-change": "^2.5.0",
     "uuid": "^9.0.0"
   },

src/components/app.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 
 import Header from '~/components/header';

src/components/breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { useMatches } from 'react-router-dom';
+import { useMatches } from 'react-router';
 
 import { breadcrumbs, crumb as StCrumb } from './breadcrumbs.css';
 

src/components/header.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { themeChange } from 'theme-change';
 
 function Header() {

src/components/post-preview.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { db } from '~/services/db';
 

src/index.tsx

@@ -1,6 +1,7 @@
 import { lazy, StrictMode, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
+import { createBrowserRouter, Link } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 
 import './index.css';
 
@@ -58,7 +59,9 @@ const router = createBrowserRouter(
               element: <UserInfo />,
               loader: ({ params }) => params,
               handle: {
-                crumb: (data) => <span>{data.userName}</span>,
+                crumb: (data: { userName: string }) => (
+                  <span>{data.userName}</span>
+                ),
               },
             },
           ],
@@ -72,13 +75,25 @@ const router = createBrowserRouter(
   ],
   {
     basename: import.meta.env.BASE_URL,
+    future: {
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true,
+    },
   },
 );
 
 root.render(
   <StrictMode>
     <Suspense fallback={<>loading...</>}>
-      <RouterProvider router={router} />
+      <RouterProvider
+        router={router}
+        future={{
+          v7_startTransition: true,
+        }}
+      />
     </Suspense>
   </StrictMode>,
 );

src/pages/[all].tsx

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 function NoMatch() {
   const location = useLocation();

src/pages/posts/[postId]/edit.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import { useState } from 'react';
-import { redirect, useParams } from 'react-router-dom';
+import { redirect, useParams } from 'react-router';
 import { useLiveQuery } from 'dexie-react-hooks';
 
 import { db } from '~/services/db';

src/pages/posts/[postId]/index.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useLiveQuery } from 'dexie-react-hooks';
 
 import { db } from '~/services/db';

src/pages/posts/new.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { v4 as uuidv4 } from 'uuid';
 
 import { Input } from '~/components/input';

src/pages/users/[user-name].tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useLiveQuery } from 'dexie-react-hooks';
 
 import { db } from '~/services/db';