Merge pull request #2 from firxworx/react-router-v7

react-router v6->v7

apps/client/package.json

@@ -27,7 +27,7 @@
     "react-error-boundary": "^4.1.2",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.53.2",
-    "react-router-dom": "^6.27.0",
+    "react-router": "^7.0.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {

apps/client/src/App.tsx

@@ -1,5 +1,5 @@
 import { Suspense, type ErrorInfo } from 'react'
-import { RouterProvider } from 'react-router-dom'
+import { RouterProvider } from 'react-router/dom'
 
 import { AppErrorBoundary } from '@workspace/react-layout'
 import { ScreenSpinner } from '@workspace/react-ui/components/ui/spinner'
@@ -22,7 +22,7 @@ function App(): JSX.Element {
         <AppContextProviders>
           <AppErrorBoundary onError={handleError}>
             <Suspense fallback={<ScreenSpinner />}>
-              <RouterProvider router={router} fallbackElement={<ScreenSpinner />} />
+              <RouterProvider router={router} />
             </Suspense>
           </AppErrorBoundary>
         </AppContextProviders>

apps/client/src/components/landing/HeroSection.tsx

@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { cn } from '@workspace/tw-style'
 import { LinkButton } from '@workspace/react-ui/components/ui/link-button'

apps/client/src/layout/root.layout.tsx

@@ -1,4 +1,4 @@
-import { ScrollRestoration } from 'react-router-dom'
+import { ScrollRestoration } from 'react-router'
 import { AppLayout } from '@workspace/react-layout/app.layout'
 
 import { NAV_LINKS } from '@/nav'

apps/client/src/pages/about.page.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { PageLayout } from '@workspace/react-layout/page.layout'
 
 export default function AboutPage(): JSX.Element {

apps/client/src/pages/demo.page.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { PageLayout } from '@workspace/react-layout/page.layout'
 
 export default function DemoPage(): JSX.Element {

apps/client/src/pages/error.page.tsx

@@ -1,4 +1,4 @@
-import { useRouteError } from 'react-router-dom'
+import { useRouteError } from 'react-router'
 import { getRouteErrorMessage } from '@workspace/data'
 import { PageLayout } from '@workspace/react-layout/page.layout'
 

apps/client/src/router.tsx

@@ -1,17 +1,19 @@
-import { createBrowserRouter, type RouteObject } from 'react-router-dom'
+import { createBrowserRouter, type RouteObject } from 'react-router'
+import { ScreenSpinner } from '@workspace/react-ui/components/ui/spinner'
 
 import RootLayout from '@/layout/root.layout'
 import IndexPage from '@/pages/index.page'
 import ErrorPage from '@/pages/error.page'
 
 /**
- * App routes as an array of react-router v6 `RouteObject`s.
+ * App routes as an array of React Router `RouteObject`s.
  */
 const routes: RouteObject[] = [
   {
     path: '/',
     element: <RootLayout />,
     errorElement: <ErrorPage />,
+    hydrateFallbackElement: <ScreenSpinner />,
     children: [
       {
         index: true,
@@ -34,6 +36,16 @@ const routes: RouteObject[] = [
 ]
 
 /**
- * react-router v6 BrowserRouter.
+ * React Router v7 `BrowserRouter` with all v7 feature flags enabled for future-proofing.
+ *
+ * @see https://reactrouter.com/upgrading/v6#update-to-latest-v6x
  */
-export const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter(routes)
+export const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter(routes, {
+  future: {
+    v7_relativeSplatPath: true,
+    v7_startTransition: true,
+    v7_fetcherPersist: true,
+    v7_normalizeFormMethod: true,
+    v7_partialHydration: true,
+  },
+})

packages/data/src/helpers/error-messages.ts

@@ -41,7 +41,7 @@ export function getErrorMessage(maybeError?: unknown): string | undefined {
 }
 
 /**
- * Return the string error message of the error object as returned by react-router-dom's `useRouteError` (v6+) hook.
+ * Return the string error message of the error object as returned by react-router's `useRouteError` (v6+) hook.
  *
  * - `string` input is returned as-is
  * - objects return `statusText` or `message` if available with a fallback to a generic message

packages/react-layout/README.md

@@ -14,7 +14,7 @@ pnpm --filter @workspace/react-layout build
 
 Refer to `package.json` for all dependencies. Peer dependencies include:
 
-- `react-router-dom` for router-specific `NavLink` + `Link` components
+- `react-router` for router-specific `NavLink` + `Link` components
 - `react-error-boundary` for implementing error boundaries and fallbacks
 
 Downstream projects powered by Vite can use a TypeScript path alias resolution plugin such as `vite-tsconfig-paths` or manually map the directory paths in their `vite.config.ts`.

packages/react-layout/package.json

@@ -69,7 +69,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "^4.1.2",
-    "react-router-dom": "^6.27.0",
+    "react-router": "^7.0.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.7.2",
@@ -86,7 +86,7 @@
     "react": ">=18.0.0 <20.0.0",
     "react-dom": ">=18.0.0 <20.0.0",
     "react-error-boundary": "^4.1.2",
-    "react-router-dom": "^6.27.0"
+    "react-router": "^7.0.1"
   },
   "dependencies": {
     "@workspace/data": "workspace:*",

packages/react-layout/src/app.layout.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useLocation } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router'
 import { cn } from '@workspace/tw-style'
 import type { AppNavLink, AppNavLinkGroup, SocialMediaDto } from '@workspace/data'
 

packages/react-layout/src/components/errors/router-root-error.boundary.tsx

@@ -1,4 +1,4 @@
-import { useRouteError } from 'react-router-dom'
+import { useRouteError } from 'react-router'
 
 /**
  * Root error boundary for react-router.

packages/react-layout/src/components/layout/layout-footer.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 import { cn } from '@workspace/tw-style'
 import { ThemeMenu } from '@workspace/react-ui/components/layout/theme-menu'

packages/react-layout/src/components/layout/layout-header.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { Link, NavLink, type NavLinkProps } from 'react-router-dom'
+import { Link, NavLink, type NavLinkProps } from 'react-router'
 import { useWindowScroll, useDebouncedValue } from '@mantine/hooks'
 
 import { cn } from '@workspace/tw-style'

packages/react-ui/package.json

@@ -79,7 +79,7 @@
     "postcss-discard-comments": "^7.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "^6.27.0",
+    "react-router": "^7.0.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "tailwindcss": "^3.4.15",
     "tailwindcss-animate": "^1.0.7",
@@ -95,7 +95,7 @@
     "@workspace/tw-preset-workspace": "workspace:*",
     "react": ">=18.0.0 <20.0.0",
     "react-dom": ">=18.0.0 <20.0.0",
-    "react-router-dom": "^6.27.0"
+    "react-router": "^7.0.1"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",

packages/react-ui/src/components/ui/link-button.tsx

@@ -19,7 +19,7 @@ export interface LinkButtonProps
  * Supports similar props to Button including `disabled`.
  *
  * The `asChild` prop powered by radix-ui `Slot` supports creating links of any router library
- * including `react-router-dom` / Remix, NextJS, Astro, etc.
+ * including `react-router` / Remix, NextJS, Astro, etc.
  *
  * Renders an `<a>` element by default if no alternative is provided via the `asChild` pattern.
  */