Update react-router monorepo to v7 (major)

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-router (source)	6.28.0 -> 7.0.2
react-router-dom (source)	6.28.0 -> 7.0.2

---

Release Notes

remix-run/react-router (react-router)

v7.0.2

Compare Source

Patch Changes

• temporarily only use one build in export map so packages can have a peer dependency on react router (#​12437)

• Generate wide matches and params types for current route and child routes (#​12397)

  At runtime, matches includes child route matches and params include child route path parameters.
  But previously, we only generated types for parent routes in matches; for params, we only considered the parent routes and the current route.
  To align our generated types more closely to the runtime behavior, we now generate more permissive, wider types when accessing child route information.

v7.0.1

Compare Source

v7.0.0

Compare Source

Major Changes

• Remove the original defer implementation in favor of using raw promises via single fetch and turbo-stream. This removes these exports from React Router: (#​11744)

  • defer
  • AbortedDeferredError
  • type TypedDeferredData
  • UNSAFE_DeferredData
  • UNSAFE_DEFERRED_SYMBOL,
• • Collapse @remix-run/router into react-router (#​11505)
  • Collapse react-router-dom into react-router
  • Collapse @remix-run/server-runtime into react-router
  • Collapse @remix-run/testing into react-router

• Remove single_fetch future flag. (#​11522)

• Drop support for Node 16, React Router SSR now requires Node 18 or higher (#​11391)

• Remove future.v7_startTransition flag (#​11696)

• • Expose the underlying router promises from the following APIs for compsition in React 19 APIs: (#​11521)
    • useNavigate()
    • useSubmit
    • useFetcher().load
    • useFetcher().submit
    • useRevalidator.revalidate

• Remove future.v7_normalizeFormMethod future flag (#​11697)

• For Remix consumers migrating to React Router, the crypto global from the Web Crypto API is now required when using cookie and session APIs. This means that the following APIs are provided from react-router rather than platform-specific packages: (#​11837)

  • createCookie
  • createCookieSessionStorage
  • createMemorySessionStorage
  • createSessionStorage

  For consumers running older versions of Node, the installGlobals function from @remix-run/node has been updated to define globalThis.crypto, using Node's require('node:crypto').webcrypto implementation.

  Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:

  • createCookieFactory
  • createSessionStorageFactory
  • createCookieSessionStorageFactory
  • createMemorySessionStorageFactory

• Imports/Exports cleanup (#​11840)

  • Removed the following exports that were previously public API from @remix-run/router
    • types
      • AgnosticDataIndexRouteObject
      • AgnosticDataNonIndexRouteObject
      • AgnosticDataRouteMatch
      • AgnosticDataRouteObject
      • AgnosticIndexRouteObject
      • AgnosticNonIndexRouteObject
      • AgnosticRouteMatch
      • AgnosticRouteObject
      • TrackedPromise
      • unstable_AgnosticPatchRoutesOnMissFunction
      • Action -> exported as NavigationType via react-router
      • Router exported as DataRouter to differentiate from RR's <Router>
    • API
      • getToPathname (@private)
      • joinPaths (@private)
      • normalizePathname (@private)
      • resolveTo (@private)
      • stripBasename (@private)
      • createBrowserHistory -> in favor of createBrowserRouter
      • createHashHistory -> in favor of createHashRouter
      • createMemoryHistory -> in favor of createMemoryRouter
      • createRouter
      • createStaticHandler -> in favor of wrapper createStaticHandler in RR Dom
      • getStaticContextFromError
  • Removed the following exports that were previously public API from react-router
    • Hash
    • Pathname
    • Search

• update minimum node version to 18 (#​11690)

• Remove future.v7_prependBasename from the ionternalized @remix-run/router package (#​11726)

• Migrate Remix type generics to React Router (#​12180)

  • These generics are provided for Remix v2 migration purposes
  • These generics and the APIs they exist on should be considered informally deprecated in favor of the new Route.* types
  • Anyone migrating from React Router v6 should probably not leverage these new generics and should migrate straight to the Route.* types
  • For React Router v6 users, these generics are new and should not impact your app, with one exception
    • useFetcher previously had an optional generic (used primarily by Remix v2) that expected the data type
    • This has been updated in v7 to expect the type of the function that generates the data (i.e., typeof loader/typeof action)
    • Therefore, you should update your usages:
      • ❌ useFetcher<LoaderData>()
      • ✅ useFetcher<typeof loader>()

• Remove future.v7_throwAbortReason from internalized @remix-run/router package (#​11728)

• Add exports field to all packages (#​11675)

• node package no longer re-exports from react-router (#​11702)

• renamed RemixContext to FrameworkContext (#​11705)

• updates the minimum React version to 18 (#​11689)

• PrefetchPageDescriptor replaced by PageLinkDescriptor (#​11960)

• • Consolidate types previously duplicated across @remix-run/router, @remix-run/server-runtime, and @remix-run/react now that they all live in react-router (#​12177)
    • Examples: LoaderFunction, LoaderFunctionArgs, ActionFunction, ActionFunctionArgs, DataFunctionArgs, RouteManifest, LinksFunction, Route, EntryRoute
    • The RouteManifest type used by the "remix" code is now slightly stricter because it is using the former @remix-run/router RouteManifest
      • Record<string, Route> -> Record<string, Route | undefined>
    • Removed AppData type in favor of inlining unknown in the few locations it was used
    • Removed ServerRuntimeMeta* types in favor of the Meta* types they were duplicated from
• • Remove the future.v7_partialHydration flag (#​11725)
    • This also removes the <RouterProvider fallbackElement> prop
      • To migrate, move the fallbackElement to a hydrateFallbackElement/HydrateFallback on your root route
    • Also worth nothing there is a related breaking changer with this future flag:
      • Without future.v7_partialHydration (when using fallbackElement), state.navigation was populated during the initial load
      • With future.v7_partialHydration, state.navigation remains in an "idle" state during the initial load

• Remove v7_relativeSplatPath future flag (#​11695)

• Drop support for Node 18, update minimum Node vestion to 20 (#​12171)

  • Remove installGlobals() as this should no longer be necessary

• Remove remaining future flags (#​11820)

  • React Router v7_skipActionErrorRevalidation
  • Remix v3_fetcherPersist, v3_relativeSplatPath, v3_throwAbortReason

• rename createRemixStub to createRoutesStub (#​11692)

• Remove @remix-run/router deprecated detectErrorBoundary option in favor of mapRouteProperties (#​11751)

• Add react-router/dom subpath export to properly enable react-dom as an optional peerDependency (#​11851)

  • This ensures that we don't blindly import ReactDOM from "react-dom" in <RouterProvider> in order to access ReactDOM.flushSync(), since that would break createMemoryRouter use cases in non-DOM environments
  • DOM environments should import from react-router/dom to get the proper component that makes ReactDOM.flushSync() available:
    • If you are using the Vite plugin, use this in your entry.client.tsx:
      • import { HydratedRouter } from 'react-router/dom'
    • If you are not using the Vite plugin and are manually calling createBrowserRouter/createHashRouter:
      • import { RouterProvider } from "react-router/dom"

• Remove future.v7_fetcherPersist flag (#​11731)

• Update cookie dependency to ^1.0.1 - please see the release notes for any breaking changes (#​12172)

Minor Changes

• • Add support for prerender config in the React Router vite plugin, to support existing SSG use-cases (#​11539)
    • You can use the prerender config to pre-render your .html and .data files at build time and then serve them statically at runtime (either from a running server or a CDN)
    • prerender can either be an array of string paths, or a function (sync or async) that returns an array of strings so that you can dynamically generate the paths by talking to your CMS, etc.

  // react-router.config.ts
  import type { Config } from "@​react-router/dev/config";
  
  export default {
    async prerender() {
      let slugs = await fakeGetSlugsFromCms();
      // Prerender these paths into `.html` files at build time, and `.data`
      // files if they have loaders
      return ["/", "/about", ...slugs.map((slug) => `/product/${slug}`)];
    },
  } satisfies Config;
  
  async function fakeGetSlugsFromCms() {
    await new Promise((r) => setTimeout(r, 1000));
    return ["shirt", "hat"];
  }

• Params, loader data, and action data as props for route component exports (#​11961)

  export default function Component({ params, loaderData, actionData }) {}
  
  export function HydrateFallback({ params }) {}
  export function ErrorBoundary({ params, loaderData, actionData }) {}

• Remove duplicate RouterProvider impliementations (#​11679)

• Typesafety improvements (#​12019)

  React Router now generates types for each of your route modules.
  You can access those types by importing them from ./+types.<route filename without extension>.
  For example:

  // app/routes/product.tsx
  import type * as Route from "./+types.product";
  
  export function loader({ params }: Route.LoaderArgs) {}
  
  export default function Component({ loaderData }: Route.ComponentProps) {}

  This initial implementation targets type inference for:

  • Params : Path parameters from your routing config in routes.ts including file-based routing
  • LoaderData : Loader data from loader and/or clientLoader within your route module
  • ActionData : Action data from action and/or clientAction within your route module

  In the future, we plan to add types for the rest of the route module exports: meta, links, headers, shouldRevalidate, etc.
  We also plan to generate types for typesafe Links:

  <Link to="/products/:id" params={{ id: 1 }} />
  //        ^^^^^^^^^^^^^          ^^^^^^^^^
  // typesafe `to` and `params` based on the available routes in your app

  Check out our docs for more:

  • Explanations > Type Safety
  • How-To > Setting up type safety

• Stabilize unstable_dataStrategy (#​11969)

• Stabilize unstable_patchRoutesOnNavigation (#​11970)

Patch Changes

• No changes (506329c4e)

• chore: re-enable development warnings through a development exports condition. (#​12269)

• Remove unstable upload handler. (#​12015)

• Remove unneeded dependency on @​web3-storage/multipart-parser (#​12274)

• Fix redirects returned from loaders/actions using data() (#​12021)

• fix(react-router): (v7) fix static prerender of non-ascii characters (#​12161)

• Replace substr with substring (#​12080)

• Remove the deprecated json utility (#​12146)

  • You can use Response.json if you still need to construct JSON responses in your app

• Remove unneeded dependency on source-map (#​12275)

v6.28.1: v6.28.1

Compare Source

See the changelog for release notes: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6281

remix-run/react-router (react-router-dom)

v7.0.2

Compare Source

Patch Changes

• Updated dependencies:
  • [email protected]

v7.0.1

Compare Source

Patch Changes

• Updated dependencies:
  • [email protected]

v7.0.0

Compare Source

Major Changes

• Remove the original defer implementation in favor of using raw promises via single fetch and turbo-stream. This removes these exports from React Router: (#​11744)

  • defer
  • AbortedDeferredError
  • type TypedDeferredData
  • UNSAFE_DeferredData
  • UNSAFE_DEFERRED_SYMBOL,

• Use createRemixRouter/RouterProvider in entry.client instead of RemixBrowser (#​11469)

• Remove single_fetch future flag. (#​11522)

• Remove future.v7_startTransition flag (#​11696)

• Remove future.v7_normalizeFormMethod future flag (#​11697)

• Allow returning undefined from actions and loaders (#​11680)

• update minimum node version to 18 (#​11690)

• Remove future.v7_prependBasename from the ionternalized @remix-run/router package (#​11726)

• Remove future.v7_throwAbortReason from internalized @remix-run/router package (#​11728)

• Add exports field to all packages (#​11675)

• node package no longer re-exports from react-router (#​11702)

• updates the minimum React version to 18 (#​11689)

• • Remove the future.v7_partialHydration flag (#​11725)
    • This also removes the <RouterProvider fallbackElement> prop
      • To migrate, move the fallbackElement to a hydrateFallbackElement/HydrateFallback on your root route
    • Also worth nothing there is a related breaking changer with this future flag:
      • Without future.v7_partialHydration (when using fallbackElement), state.navigation was populated during the initial load
      • With future.v7_partialHydration, state.navigation remains in an "idle" state during the initial load

• Remove future.v7_fetcherPersist flag (#​11731)

Minor Changes

• Add prefetching support to Link/NavLink when using Remix SSR (#​11402)
• Enhance ScrollRestoration so it can restore properly on an SSR'd document load (#​11401)
• Add built-in Remix-style hydration support to RouterProvider. When running from a Remix-SSR'd HTML payload with the proper window variables (__remixContext, __remixManifest, __remixRouteModules), you don't need to pass a router prop and RouterProvider will create the router for you internally. (#​11396) (#​11400)

Patch Changes

• Memoize some RouterProvider internals to reduce uneccesary re-renders (#​11817)
• Updated dependencies:
  • [email protected]

v6.28.1

Compare Source

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[renovate]

Branch automerge failure

This PR was configured for branch automerge. However, this is not possible, so it has been raised as a PR instead.

---

• Branch has one or more failed status checks

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.