diff --git a/.github/workflows/close-no-repro-issues.yml b/.github/workflows/close-no-repro-issues.yml
index f9a6e2e45f..efc77ff396 100644
--- a/.github/workflows/close-no-repro-issues.yml
+++ b/.github/workflows/close-no-repro-issues.yml
@@ -31,7 +31,7 @@ jobs:
uses: pnpm/action-setup@v4.1.0
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
# required for --experimental-strip-types
node-version: 22
diff --git a/.github/workflows/deduplicate-lock-file.yml b/.github/workflows/deduplicate-lock-file.yml
index 51d6c758b4..3174fcfcbb 100644
--- a/.github/workflows/deduplicate-lock-file.yml
+++ b/.github/workflows/deduplicate-lock-file.yml
@@ -26,7 +26,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 86ced6e59e..1e6391dfd8 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -35,7 +35,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: pnpm
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index 459c848d12..ff63cd21ee 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -25,7 +25,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: pnpm
diff --git a/.github/workflows/release-experimental.yml b/.github/workflows/release-experimental.yml
index 1b4624d7f4..373afa10ba 100644
--- a/.github/workflows/release-experimental.yml
+++ b/.github/workflows/release-experimental.yml
@@ -29,7 +29,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
diff --git a/.github/workflows/release-nightly.yml b/.github/workflows/release-nightly.yml
index b394521418..be5ec510e8 100644
--- a/.github/workflows/release-nightly.yml
+++ b/.github/workflows/release-nightly.yml
@@ -40,7 +40,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
diff --git a/.github/workflows/release-stage-2-alpha.yml b/.github/workflows/release-stage-2-alpha.yml
index 40157097f3..c82f906205 100644
--- a/.github/workflows/release-stage-2-alpha.yml
+++ b/.github/workflows/release-stage-2-alpha.yml
@@ -35,7 +35,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 366c8dcc9f..b88bb74292 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -35,7 +35,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
@@ -84,7 +84,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
diff --git a/.github/workflows/shared-build.yml b/.github/workflows/shared-build.yml
index 345ec9c300..4a3617aa6c 100644
--- a/.github/workflows/shared-build.yml
+++ b/.github/workflows/shared-build.yml
@@ -17,7 +17,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"
cache: "pnpm"
diff --git a/.github/workflows/shared-integration.yml b/.github/workflows/shared-integration.yml
index 0454fc2cca..782507c3ac 100644
--- a/.github/workflows/shared-integration.yml
+++ b/.github/workflows/shared-integration.yml
@@ -44,7 +44,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node ${{ matrix.node }}
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node }}
cache: "pnpm"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d510f93a25..2bf0dedbe9 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -39,7 +39,7 @@ jobs:
uses: pnpm/action-setup@v4
- name: ⎔ Setup node
- uses: actions/setup-node@v5
+ uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node }}
cache: pnpm
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80cfee7fa8..262c5fb008 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,127 +13,132 @@ We manage release notes in this file instead of the paginated Github Releases Pa
Table of Contents
- [React Router Releases](#react-router-releases)
- - [v7.9.4](#v794)
+ - [v7.9.5](#v795)
- [What's Changed](#whats-changed)
- - [`useRoute()` (unstable)](#useroute-unstable)
+ - [Instrumentation (unstable)](#instrumentation-unstable)
- [Patch Changes](#patch-changes)
- [Unstable Changes](#unstable-changes)
- - [v7.9.3](#v793)
+ - [v7.9.4](#v794)
+ - [What's Changed](#whats-changed-1)
+ - [`useRoute()` (unstable)](#useroute-unstable)
- [Patch Changes](#patch-changes-1)
+ - [Unstable Changes](#unstable-changes-1)
+ - [v7.9.3](#v793)
+ - [Patch Changes](#patch-changes-2)
- [v7.9.2](#v792)
- - [What's Changed](#whats-changed-1)
+ - [What's Changed](#whats-changed-2)
- [RSC Framework Mode (unstable)](#rsc-framework-mode-unstable)
- [Fetcher Reset (unstable)](#fetcher-reset-unstable)
- - [Patch Changes](#patch-changes-2)
- - [Unstable Changes](#unstable-changes-1)
- - [v7.9.1](#v791)
- [Patch Changes](#patch-changes-3)
+ - [Unstable Changes](#unstable-changes-2)
+ - [v7.9.1](#v791)
+ - [Patch Changes](#patch-changes-4)
- [v7.9.0](#v790)
- - [What's Changed](#whats-changed-2)
+ - [What's Changed](#whats-changed-3)
- [Stable Middleware and Context APIs](#stable-middleware-and-context-apis)
- [Minor Changes](#minor-changes)
- - [Patch Changes](#patch-changes-4)
- - [Unstable Changes](#unstable-changes-2)
- - [v7.8.2](#v782)
- [Patch Changes](#patch-changes-5)
- [Unstable Changes](#unstable-changes-3)
- - [v7.8.1](#v781)
+ - [v7.8.2](#v782)
- [Patch Changes](#patch-changes-6)
- [Unstable Changes](#unstable-changes-4)
+ - [v7.8.1](#v781)
+ - [Patch Changes](#patch-changes-7)
+ - [Unstable Changes](#unstable-changes-5)
- [v7.8.0](#v780)
- - [What's Changed](#whats-changed-3)
+ - [What's Changed](#whats-changed-4)
- [Consistently named `loaderData` values](#consistently-named-loaderdata-values)
- [Improvements/fixes to the middleware APIs (unstable)](#improvementsfixes-to-the-middleware-apis-unstable)
- [Minor Changes](#minor-changes-1)
- - [Patch Changes](#patch-changes-7)
- - [Unstable Changes](#unstable-changes-5)
- - [Changes by Package](#changes-by-package)
- - [v7.7.1](#v771)
- [Patch Changes](#patch-changes-8)
- [Unstable Changes](#unstable-changes-6)
+ - [Changes by Package](#changes-by-package)
+ - [v7.7.1](#v771)
+ - [Patch Changes](#patch-changes-9)
+ - [Unstable Changes](#unstable-changes-7)
- [v7.7.0](#v770)
- - [What's Changed](#whats-changed-4)
+ - [What's Changed](#whats-changed-5)
- [Unstable RSC APIs](#unstable-rsc-apis)
- [Minor Changes](#minor-changes-2)
- - [Patch Changes](#patch-changes-9)
- - [Unstable Changes](#unstable-changes-7)
+ - [Patch Changes](#patch-changes-10)
+ - [Unstable Changes](#unstable-changes-8)
- [Changes by Package](#changes-by-package-1)
- [v7.6.3](#v763)
- - [Patch Changes](#patch-changes-10)
- - [v7.6.2](#v762)
- [Patch Changes](#patch-changes-11)
- - [v7.6.1](#v761)
+ - [v7.6.2](#v762)
- [Patch Changes](#patch-changes-12)
- - [Unstable Changes](#unstable-changes-8)
+ - [v7.6.1](#v761)
+ - [Patch Changes](#patch-changes-13)
+ - [Unstable Changes](#unstable-changes-9)
- [v7.6.0](#v760)
- - [What's Changed](#whats-changed-5)
+ - [What's Changed](#whats-changed-6)
- [`routeDiscovery` Config Option](#routediscovery-config-option)
- [Automatic Types for Future Flags](#automatic-types-for-future-flags)
- [Minor Changes](#minor-changes-3)
- - [Patch Changes](#patch-changes-13)
- - [Unstable Changes](#unstable-changes-9)
+ - [Patch Changes](#patch-changes-14)
+ - [Unstable Changes](#unstable-changes-10)
- [Changes by Package](#changes-by-package-2)
- [v7.5.3](#v753)
- - [Patch Changes](#patch-changes-14)
+ - [Patch Changes](#patch-changes-15)
- [v7.5.2](#v752)
- [Security Notice](#security-notice)
- - [Patch Changes](#patch-changes-15)
- - [v7.5.1](#v751)
- [Patch Changes](#patch-changes-16)
- - [Unstable Changes](#unstable-changes-10)
+ - [v7.5.1](#v751)
+ - [Patch Changes](#patch-changes-17)
+ - [Unstable Changes](#unstable-changes-11)
- [v7.5.0](#v750)
- - [What's Changed](#whats-changed-6)
+ - [What's Changed](#whats-changed-7)
- [`route.lazy` Object API](#routelazy-object-api)
- [Minor Changes](#minor-changes-4)
- - [Patch Changes](#patch-changes-17)
- - [Unstable Changes](#unstable-changes-11)
+ - [Patch Changes](#patch-changes-18)
+ - [Unstable Changes](#unstable-changes-12)
- [Changes by Package](#changes-by-package-3)
- [v7.4.1](#v741)
- [Security Notice](#security-notice-1)
- - [Patch Changes](#patch-changes-18)
- - [Unstable Changes](#unstable-changes-12)
- - [v7.4.0](#v740)
- - [Minor Changes](#minor-changes-5)
- [Patch Changes](#patch-changes-19)
- [Unstable Changes](#unstable-changes-13)
+ - [v7.4.0](#v740)
+ - [Minor Changes](#minor-changes-5)
+ - [Patch Changes](#patch-changes-20)
+ - [Unstable Changes](#unstable-changes-14)
- [Changes by Package](#changes-by-package-4)
- [v7.3.0](#v730)
- [Minor Changes](#minor-changes-6)
- - [Patch Changes](#patch-changes-20)
- - [Unstable Changes](#unstable-changes-14)
+ - [Patch Changes](#patch-changes-21)
+ - [Unstable Changes](#unstable-changes-15)
- [Client-side `context` (unstable)](#client-side-context-unstable)
- [Middleware (unstable)](#middleware-unstable)
- [Middleware `context` parameter](#middleware-context-parameter)
- [`unstable_SerializesTo`](#unstable_serializesto)
- [Changes by Package](#changes-by-package-5)
- [v7.2.0](#v720)
- - [What's Changed](#whats-changed-7)
+ - [What's Changed](#whats-changed-8)
- [Type-safe `href` utility](#type-safe-href-utility)
- [Prerendering with a SPA Fallback](#prerendering-with-a-spa-fallback)
- [Allow a root `loader` in SPA Mode](#allow-a-root-loader-in-spa-mode)
- [Minor Changes](#minor-changes-7)
- - [Patch Changes](#patch-changes-21)
- - [Unstable Changes](#unstable-changes-15)
+ - [Patch Changes](#patch-changes-22)
+ - [Unstable Changes](#unstable-changes-16)
- [Split Route Modules (unstable)](#split-route-modules-unstable)
- [Changes by Package](#changes-by-package-6)
- [v7.1.5](#v715)
- - [Patch Changes](#patch-changes-22)
- - [v7.1.4](#v714)
- [Patch Changes](#patch-changes-23)
- - [v7.1.3](#v713)
+ - [v7.1.4](#v714)
- [Patch Changes](#patch-changes-24)
- - [v7.1.2](#v712)
+ - [v7.1.3](#v713)
- [Patch Changes](#patch-changes-25)
- - [v7.1.1](#v711)
+ - [v7.1.2](#v712)
- [Patch Changes](#patch-changes-26)
+ - [v7.1.1](#v711)
+ - [Patch Changes](#patch-changes-27)
- [v7.1.0](#v710)
- [Minor Changes](#minor-changes-8)
- - [Patch Changes](#patch-changes-27)
+ - [Patch Changes](#patch-changes-28)
- [Changes by Package](#changes-by-package-7)
- [v7.0.2](#v702)
- - [Patch Changes](#patch-changes-28)
- - [v7.0.1](#v701)
- [Patch Changes](#patch-changes-29)
+ - [v7.0.1](#v701)
+ - [Patch Changes](#patch-changes-30)
- [v7.0.0](#v700)
- [Breaking Changes](#breaking-changes)
- [Package Restructuring](#package-restructuring)
@@ -150,201 +155,201 @@ We manage release notes in this file instead of the paginated Github Releases Pa
- [Major Changes (`react-router`)](#major-changes-react-router)
- [Major Changes (`@react-router/*`)](#major-changes-react-router-1)
- [Minor Changes](#minor-changes-9)
- - [Patch Changes](#patch-changes-30)
+ - [Patch Changes](#patch-changes-31)
- [Changes by Package](#changes-by-package-8)
- [React Router v6 Releases](#react-router-v6-releases)
- [v6.30.1](#v6301)
- - [Patch Changes](#patch-changes-31)
+ - [Patch Changes](#patch-changes-32)
- [v6.30.0](#v6300)
- [Minor Changes](#minor-changes-10)
- - [Patch Changes](#patch-changes-32)
+ - [Patch Changes](#patch-changes-33)
- [v6.29.0](#v6290)
- [Minor Changes](#minor-changes-11)
- - [Patch Changes](#patch-changes-33)
- - [v6.28.2](#v6282)
- [Patch Changes](#patch-changes-34)
- - [v6.28.1](#v6281)
+ - [v6.28.2](#v6282)
- [Patch Changes](#patch-changes-35)
+ - [v6.28.1](#v6281)
+ - [Patch Changes](#patch-changes-36)
- [v6.28.0](#v6280)
- - [What's Changed](#whats-changed-8)
+ - [What's Changed](#whats-changed-9)
- [Minor Changes](#minor-changes-12)
- - [Patch Changes](#patch-changes-36)
+ - [Patch Changes](#patch-changes-37)
- [v6.27.0](#v6270)
- - [What's Changed](#whats-changed-9)
+ - [What's Changed](#whats-changed-10)
- [Stabilized APIs](#stabilized-apis)
- [Minor Changes](#minor-changes-13)
- - [Patch Changes](#patch-changes-37)
- - [v6.26.2](#v6262)
- [Patch Changes](#patch-changes-38)
- - [v6.26.1](#v6261)
+ - [v6.26.2](#v6262)
- [Patch Changes](#patch-changes-39)
+ - [v6.26.1](#v6261)
+ - [Patch Changes](#patch-changes-40)
- [v6.26.0](#v6260)
- [Minor Changes](#minor-changes-14)
- - [Patch Changes](#patch-changes-40)
- - [v6.25.1](#v6251)
- [Patch Changes](#patch-changes-41)
+ - [v6.25.1](#v6251)
+ - [Patch Changes](#patch-changes-42)
- [v6.25.0](#v6250)
- - [What's Changed](#whats-changed-10)
+ - [What's Changed](#whats-changed-11)
- [Stabilized `v7_skipActionErrorRevalidation`](#stabilized-v7_skipactionerrorrevalidation)
- [Minor Changes](#minor-changes-15)
- - [Patch Changes](#patch-changes-42)
- - [v6.24.1](#v6241)
- [Patch Changes](#patch-changes-43)
+ - [v6.24.1](#v6241)
+ - [Patch Changes](#patch-changes-44)
- [v6.24.0](#v6240)
- - [What's Changed](#whats-changed-11)
+ - [What's Changed](#whats-changed-12)
- [Lazy Route Discovery (a.k.a. "Fog of War")](#lazy-route-discovery-aka-fog-of-war)
- [Minor Changes](#minor-changes-16)
- - [Patch Changes](#patch-changes-44)
- - [v6.23.1](#v6231)
- [Patch Changes](#patch-changes-45)
+ - [v6.23.1](#v6231)
+ - [Patch Changes](#patch-changes-46)
- [v6.23.0](#v6230)
- - [What's Changed](#whats-changed-12)
+ - [What's Changed](#whats-changed-13)
- [Data Strategy (unstable)](#data-strategy-unstable)
- [Skip Action Error Revalidation (unstable)](#skip-action-error-revalidation-unstable)
- [Minor Changes](#minor-changes-17)
- [v6.22.3](#v6223)
- - [Patch Changes](#patch-changes-46)
- - [v6.22.2](#v6222)
- [Patch Changes](#patch-changes-47)
- - [v6.22.1](#v6221)
+ - [v6.22.2](#v6222)
- [Patch Changes](#patch-changes-48)
+ - [v6.22.1](#v6221)
+ - [Patch Changes](#patch-changes-49)
- [v6.22.0](#v6220)
- - [What's Changed](#whats-changed-13)
+ - [What's Changed](#whats-changed-14)
- [Core Web Vitals Technology Report Flag](#core-web-vitals-technology-report-flag)
- [Minor Changes](#minor-changes-18)
- - [Patch Changes](#patch-changes-49)
- - [v6.21.3](#v6213)
- [Patch Changes](#patch-changes-50)
- - [v6.21.2](#v6212)
+ - [v6.21.3](#v6213)
- [Patch Changes](#patch-changes-51)
- - [v6.21.1](#v6211)
+ - [v6.21.2](#v6212)
- [Patch Changes](#patch-changes-52)
+ - [v6.21.1](#v6211)
+ - [Patch Changes](#patch-changes-53)
- [v6.21.0](#v6210)
- - [What's Changed](#whats-changed-14)
+ - [What's Changed](#whats-changed-15)
- [`future.v7_relativeSplatPath`](#futurev7_relativesplatpath)
- [Partial Hydration](#partial-hydration)
- [Minor Changes](#minor-changes-19)
- - [Patch Changes](#patch-changes-53)
- - [v6.20.1](#v6201)
- [Patch Changes](#patch-changes-54)
+ - [v6.20.1](#v6201)
+ - [Patch Changes](#patch-changes-55)
- [v6.20.0](#v6200)
- [Minor Changes](#minor-changes-20)
- - [Patch Changes](#patch-changes-55)
+ - [Patch Changes](#patch-changes-56)
- [v6.19.0](#v6190)
- - [What's Changed](#whats-changed-15)
+ - [What's Changed](#whats-changed-16)
- [`unstable_flushSync` API](#unstable_flushsync-api)
- [Minor Changes](#minor-changes-21)
- - [Patch Changes](#patch-changes-56)
+ - [Patch Changes](#patch-changes-57)
- [v6.18.0](#v6180)
- - [What's Changed](#whats-changed-16)
+ - [What's Changed](#whats-changed-17)
- [New Fetcher APIs](#new-fetcher-apis)
- [Persistence Future Flag (`future.v7_fetcherPersist`)](#persistence-future-flag-futurev7_fetcherpersist)
- [Minor Changes](#minor-changes-22)
- - [Patch Changes](#patch-changes-57)
+ - [Patch Changes](#patch-changes-58)
- [v6.17.0](#v6170)
- - [What's Changed](#whats-changed-17)
+ - [What's Changed](#whats-changed-18)
- [View Transitions 🚀](#view-transitions-)
- [Minor Changes](#minor-changes-23)
- - [Patch Changes](#patch-changes-58)
+ - [Patch Changes](#patch-changes-59)
- [v6.16.0](#v6160)
- [Minor Changes](#minor-changes-24)
- - [Patch Changes](#patch-changes-59)
+ - [Patch Changes](#patch-changes-60)
- [v6.15.0](#v6150)
- [Minor Changes](#minor-changes-25)
- - [Patch Changes](#patch-changes-60)
- - [v6.14.2](#v6142)
- [Patch Changes](#patch-changes-61)
- - [v6.14.1](#v6141)
+ - [v6.14.2](#v6142)
- [Patch Changes](#patch-changes-62)
+ - [v6.14.1](#v6141)
+ - [Patch Changes](#patch-changes-63)
- [v6.14.0](#v6140)
- - [What's Changed](#whats-changed-18)
+ - [What's Changed](#whats-changed-19)
- [JSON/Text Submissions](#jsontext-submissions)
- [Minor Changes](#minor-changes-26)
- - [Patch Changes](#patch-changes-63)
+ - [Patch Changes](#patch-changes-64)
- [v6.13.0](#v6130)
- - [What's Changed](#whats-changed-19)
+ - [What's Changed](#whats-changed-20)
- [`future.v7_startTransition`](#futurev7_starttransition)
- [Minor Changes](#minor-changes-27)
- - [Patch Changes](#patch-changes-64)
- - [v6.12.1](#v6121)
- [Patch Changes](#patch-changes-65)
+ - [v6.12.1](#v6121)
+ - [Patch Changes](#patch-changes-66)
- [v6.12.0](#v6120)
- - [What's Changed](#whats-changed-20)
+ - [What's Changed](#whats-changed-21)
- [`React.startTransition` support](#reactstarttransition-support)
- [Minor Changes](#minor-changes-28)
- - [Patch Changes](#patch-changes-66)
- - [v6.11.2](#v6112)
- [Patch Changes](#patch-changes-67)
- - [v6.11.1](#v6111)
+ - [v6.11.2](#v6112)
- [Patch Changes](#patch-changes-68)
+ - [v6.11.1](#v6111)
+ - [Patch Changes](#patch-changes-69)
- [v6.11.0](#v6110)
- [Minor Changes](#minor-changes-29)
- - [Patch Changes](#patch-changes-69)
+ - [Patch Changes](#patch-changes-70)
- [v6.10.0](#v6100)
- - [What's Changed](#whats-changed-21)
+ - [What's Changed](#whats-changed-22)
- [Minor Changes](#minor-changes-30)
- [`future.v7_normalizeFormMethod`](#futurev7_normalizeformmethod)
- - [Patch Changes](#patch-changes-70)
+ - [Patch Changes](#patch-changes-71)
- [v6.9.0](#v690)
- - [What's Changed](#whats-changed-22)
+ - [What's Changed](#whats-changed-23)
- [`Component`/`ErrorBoundary` route properties](#componenterrorboundary-route-properties)
- [Introducing Lazy Route Modules](#introducing-lazy-route-modules)
- [Minor Changes](#minor-changes-31)
- - [Patch Changes](#patch-changes-71)
- - [v6.8.2](#v682)
- [Patch Changes](#patch-changes-72)
- - [v6.8.1](#v681)
+ - [v6.8.2](#v682)
- [Patch Changes](#patch-changes-73)
+ - [v6.8.1](#v681)
+ - [Patch Changes](#patch-changes-74)
- [v6.8.0](#v680)
- [Minor Changes](#minor-changes-32)
- - [Patch Changes](#patch-changes-74)
+ - [Patch Changes](#patch-changes-75)
- [v6.7.0](#v670)
- [Minor Changes](#minor-changes-33)
- - [Patch Changes](#patch-changes-75)
- - [v6.6.2](#v662)
- [Patch Changes](#patch-changes-76)
- - [v6.6.1](#v661)
+ - [v6.6.2](#v662)
- [Patch Changes](#patch-changes-77)
+ - [v6.6.1](#v661)
+ - [Patch Changes](#patch-changes-78)
- [v6.6.0](#v660)
- - [What's Changed](#whats-changed-23)
+ - [What's Changed](#whats-changed-24)
- [Minor Changes](#minor-changes-34)
- - [Patch Changes](#patch-changes-78)
+ - [Patch Changes](#patch-changes-79)
- [v6.5.0](#v650)
- - [What's Changed](#whats-changed-24)
+ - [What's Changed](#whats-changed-25)
- [Minor Changes](#minor-changes-35)
- - [Patch Changes](#patch-changes-79)
- - [v6.4.5](#v645)
- [Patch Changes](#patch-changes-80)
- - [v6.4.4](#v644)
+ - [v6.4.5](#v645)
- [Patch Changes](#patch-changes-81)
- - [v6.4.3](#v643)
+ - [v6.4.4](#v644)
- [Patch Changes](#patch-changes-82)
- - [v6.4.2](#v642)
+ - [v6.4.3](#v643)
- [Patch Changes](#patch-changes-83)
- - [v6.4.1](#v641)
+ - [v6.4.2](#v642)
- [Patch Changes](#patch-changes-84)
+ - [v6.4.1](#v641)
+ - [Patch Changes](#patch-changes-85)
- [v6.4.0](#v640)
- - [What's Changed](#whats-changed-25)
+ - [What's Changed](#whats-changed-26)
- [Remix Data APIs](#remix-data-apis)
- - [Patch Changes](#patch-changes-85)
+ - [Patch Changes](#patch-changes-86)
- [v6.3.0](#v630)
- [Minor Changes](#minor-changes-36)
- [v6.2.2](#v622)
- - [Patch Changes](#patch-changes-86)
- - [v6.2.1](#v621)
- [Patch Changes](#patch-changes-87)
+ - [v6.2.1](#v621)
+ - [Patch Changes](#patch-changes-88)
- [v6.2.0](#v620)
- [Minor Changes](#minor-changes-37)
- - [Patch Changes](#patch-changes-88)
- - [v6.1.1](#v611)
- [Patch Changes](#patch-changes-89)
+ - [v6.1.1](#v611)
+ - [Patch Changes](#patch-changes-90)
- [v6.1.0](#v610)
- [Minor Changes](#minor-changes-38)
- - [Patch Changes](#patch-changes-90)
- - [v6.0.2](#v602)
- [Patch Changes](#patch-changes-91)
- - [v6.0.1](#v601)
+ - [v6.0.2](#v602)
- [Patch Changes](#patch-changes-92)
+ - [v6.0.1](#v601)
+ - [Patch Changes](#patch-changes-93)
- [v6.0.0](#v600)
@@ -372,6 +377,57 @@ Date: YYYY-MM-DD
**Full Changelog**: [`v7.X.Y...v7.X.Y`](https://github.com/remix-run/react-router/compare/react-router@7.X.Y...react-router@7.X.Y)
-->
+## v7.9.5
+
+Date: 2025-10-27
+
+### What's Changed
+
+#### Instrumentation (unstable)
+
+This release adds new `unstable_instrumentation` APIs that will allow you to add runtime instrumentation logic to various aspects of your application (server handler, client navigations/fetches, loaders, actions, middleware, `route.lazy`). For more information, please see the [docs](https://reactrouter.com/7.9.5/how-to/instrumentation).
+
+### Patch Changes
+
+- `react-router` - Ensure action handlers run for routes with middleware even if no loader is present ([#14443](https://github.com/remix-run/react-router/pull/14443))
+- `@react-router/dev` - Ensure route navigation doesn't remove CSS `link` elements used by dynamic imports ([#14463](https://github.com/remix-run/react-router/pull/14463))
+- `@react-router/dev` - Typegen: only register route module types for routes within the app directory ([#14439](https://github.com/remix-run/react-router/pull/14439))
+
+### Unstable Changes
+
+⚠️ _[Unstable features](https://reactrouter.com/community/api-development-strategy#unstable-flags) are not recommended for production use_
+
+- `react-router` - Move `unstable_RSCHydratedRouter` and utils to `react-router/dom` export ([#14457](https://github.com/remix-run/react-router/pull/14457))
+- `react-router` - Add a type-safe `handle` field to `unstable_useRoute()` ([#14462](https://github.com/remix-run/react-router/pull/14462))
+
+ For example:
+
+ ```ts
+ // app/routes/admin.tsx
+ const handle = { hello: "world" };
+ ```
+
+ ```ts
+ // app/routes/some-other-route.tsx
+ export default function Component() {
+ const admin = useRoute("routes/admin");
+ if (!admin) throw new Error("Not nested within 'routes/admin'");
+ console.log(admin.handle);
+ // ^? { hello: string }
+ }
+ ```
+
+- `react-router` - Add `unstable_instrumentations` API to allow users to add observability to their apps by instrumenting route loaders, actions, middlewares, lazy, as well as server-side request handlers and client side navigations/fetches ([#14412](https://github.com/remix-run/react-router/pull/14412))
+ - Framework Mode:
+ - `entry.server.tsx`: `export const unstable_instrumentations = [...]`
+ - `entry.client.tsx`: ``
+ - Data Mode
+ - `createBrowserRouter(routes, { unstable_instrumentations: [...] })`
+- `react-router` - Add a new `unstable_pattern` parameter to loaders/actions/middleware which contains the un-interpolated route pattern (i.e., `/blog/:slug`) which is useful for aggregating logs/metrics by route in instrumentation code ([#14412](https://github.com/remix-run/react-router/pull/14412))
+- `@react-router/dev` - Introduce a `prerender.unstable_concurrency` option, to support running the pre-rendering concurrently, potentially speeding up the build ([#14380](https://github.com/remix-run/react-router/pull/14380))
+
+**Full Changelog**: [`v7.9.4...v7.9.5`](https://github.com/remix-run/react-router/compare/react-router@7.9.4...react-router@7.9.5)
+
## v7.9.4
Date: 2025-10-08
diff --git a/contributors.yml b/contributors.yml
index 0b1dee6722..08dd3651a3 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -117,6 +117,7 @@
- ericschn
- esadek
- faergeek
+- fernandojbf
- FilipJirsak
- focusotter
- foxscotch
@@ -211,6 +212,7 @@
- kigawas
- kilavvy
- kiliman
+- kirillgroshkov
- kkirsche
- kno-raziel
- knownasilya
@@ -308,6 +310,7 @@
- pawelblaszczyk5
- pcattori
- penx
+- peterneave
- petersendidit
- phildl
- phryneas
diff --git a/decisions/0015-observability.md b/decisions/0015-observability.md
new file mode 100644
index 0000000000..30fe084a50
--- /dev/null
+++ b/decisions/0015-observability.md
@@ -0,0 +1,283 @@
+# Title
+
+Date: 2025-09-22
+
+Status: proposed
+
+## Context
+
+We want it to be easy to add observability to production React Router applications. This involves the ability to add logging, error reporting, and performance tracing to your application on both the server and the client.
+
+We always had a good story for user-facing error _display_ via `ErrorBoundary`, but until recently we only had a server-side error _reporting_ solution via the `entry.server` `handleError` export. In `7.8.2`, we shipped an `unstable_onError` client-side equivalent so it should now be possible to report on errors on the server and client pretty easily.
+
+We have not historically had great recommendations for the other 2 facets of observability - logging and performance tracing. Middleware, shipped in `7.3.0` and stabilized in `7.9.0` gave us a way to "wrap" request handlers at any level of the tree, which provides a good solution for logging and _some_ high-level performance tracing. But it's too coarse-grained and does not allow folks to drill down into their applications.
+
+This has also been raised in the (currently) 2nd-most upvoted Proposal in the past year: https://github.com/remix-run/react-router/discussions/13749.
+
+One way to add fine-grained logging/tracing today is to manually include it in all of your loaders and actions, but this is tedious and error-prone.
+
+Another way is to "instrument" the server build, which has long been our suggestion - initially to the folks at Sentry - and over time to RR users here and there in discord and github issues. but, we've never formally documented this as a recommended pattern, and it currently only works on the server and requires that you use a custom server.
+
+## Decision
+
+Adopt instrumentation as a first class API and the recommended way to implement observability in your application.
+
+There are 2 levels in which we want to instrument:
+
+- handler (server) and router (client) level
+ - instrument the request handler on the server
+ - instrument navigations and fetcher calls on the client
+ - singular instrumentation per operation
+- route level
+ - instrument loaders, actions, middlewares, lazy
+ - multiple instrumentations per operation - multiple routes, multiple middlewares etc.
+
+On the server, if you are using a custom server, this is already possible by wrapping the react router request handler and walking the `build.routes` tree and wrapping the route handlers.
+
+To provide the same functionality when using `@react-router/serve` we need to open up a new API. Currently, I am proposing a new `instrumentations` export from `entry.server`. This will be applied to the server build in `createRequestHandler` and that way can work without a custom server. This will also allow custom-server users today to move some more code from their custom server into React Router by leveraging these new exports.
+
+A singular instrumentation function has the following shape:
+
+```tsx
+function intrumentationFunction(doTheActualThing, info) {
+ // Do some stuff before starting the thing
+
+ // Do the the thing
+ await doTheActualThing();
+
+ // Do some stuff after the thing finishes
+}
+```
+
+This API allows for a few things:
+
+- Consistent API for instrumenting any async action - from a handler, to a navigation, to a loader, or a middleware
+- By passing no arguments to `doTheActualThing()` and returning no data, this restricts the ability for instrumentation code to alter the actual runtime behavior of the app. I.e., you cannot modify arguments to loaders, nor change data returned from loaders. You can only report on the execution of loaders.
+- The `info` parameter allows us to pass relevant read-only information, such as the `request`, `context`, `routeId`, etc.
+- Nesting the call within a singular scope allows for contextual execution (i.e, `AsyncLocalStorage`) which enables things like nested OTEL traces to work properly
+
+Here's an example of this API on the server:
+
+```tsx
+// entry.server.tsx
+
+export const instrumentations = [
+ {
+ // Wrap the request handler - applies to _all_ requests handled by RR, including:
+ // - manifest requests
+ // - document requests
+ // - `.data` requests
+ // - resource route requests
+ handler({ instrument }) {
+ // Calling instrument performs the actual instrumentation
+ instrument({
+ // Provide the instrumentation implementation for the request handler
+ async request(handleRequest, { request }) {
+ let start = Date.now();
+ console.log(`Request start: ${request.method} ${request.url}`);
+ try {
+ await handleRequest();
+ } finally {
+ let duration = Date.now() - start;
+ console.log(
+ `Request end: ${request.method} ${request.url} (${duration}ms)`,
+ );
+ }
+ },
+ });
+ },
+ // Instrument an individual route, allowing you to wrap middleware/loader/action/etc.
+ // This also gives you a place to do global "shouldRevalidate" which is a nice side
+ // effect as folks have asked for that for a long time
+ route({ instrument, id }) {
+ // `id` is the route id in case you want to instrument only some routes or
+ // instrument in a route-specific manner
+ if (id === "routes/i-dont-care") return;
+
+ instrument({
+ loader(callLoader, { request }) {
+ let start = Date.now();
+ console.log(`Loader start: ${request.method} ${request.url}`);
+ try {
+ await callLoader();
+ } finally {
+ let duration = Date.now() - start;
+ console.log(
+ `Loader end: ${request.method} ${request.url} (${duration}ms)`,
+ );
+ }
+ },
+ // action(), middleware(), lazy()
+ });
+ },
+ },
+];
+```
+
+Open questions:
+
+- On the server we could technically do this at build time, but I don't expect this to have a large startup cost and doing it at build-time just feels a bit more magical and would differ from any examples we want to show in data mode.
+- Another option for custom server folks would be to make these parameters to `createRequestHandler`, but then we'd still need a way for `react-router-server` users to use them and thus we'd still need to support them in `entry.server`, so might as well make it consistent for both.
+
+Client-side, it's a similar story. You could do this today at the route level in Data mode before calling `createBrowserRouter`, and you could wrap `router.navigate`/`router.fetch` after that. but there's no way to instrument the router `initialize` method without "ejecting" to using the lower level `createRouter`. And there is no way to do this in framework mode.
+
+I think we can open up APIs similar to those in `entry.server` but do them on `createBrowserRouter` and `HydratedRouter`:
+
+```tsx
+// entry.client.tsx
+
+export const instrumentations = [{
+ // Instrument router operations
+ router({ instrument }) {
+ instrument({
+ async initialize(callNavigate, info) { /*...*/ },
+ async navigate(callNavigate, info) { /*...*/ },
+ async fetch(callNavigate, info) { /*...*/ },
+ });
+ },
+ route({ instrument, id }) {
+ instrument({
+ lazy(callLazy, info) { /*...*/ },
+ middleware(callMiddleware, info) { /*...*/ },
+ loader(callLoader, info) { /*...*/ },
+ action(callAction, info) { /*...*/ },
+ });
+ },
+}];
+
+// Data mode
+let router = createBrowserRouter(routes, { instrumentations })
+
+// Framework mode
+
+```
+
+In both of these cases, we'll handle the instrumentation at the router creation level. And by passing `instrumentRoute` into the router, we can properly instrument future routes discovered via `route.lazy` or `patchRouteOnNavigation`
+
+### Error Handling
+
+It's important to note that the "handler" function will never throw. If the underlying loader/action throws, React Router will catch the error and return it out to you in case you need to perform some conditional logic in your instrumentation function - but your entire instrumentation function is thus guaranteed to run to completion even if the underlying application code errors.
+
+```tsx
+function intrumentationFunction(doTheActualThing, info) {
+ let { status, error } = await doTheActualThing();
+ // status is `"success" | "error"`
+ // `error` will only be defined if status === "error"
+
+ if (status === "error") {
+ // ...
+ } else {
+ // ...
+ }
+}
+```
+
+You should not be using the instrumentation logic to report errors though, that's better served by `entry.server.tsx`'s `handleError` and `HydratedRouter`/`RouterProvider` `unstable_onError` props.
+
+If your throw from your instrumentation function, we do not want that to impact runtime application behavior so React Router will gracefully swallow that error with a console warning and continue running as if you had returned successfully.
+
+In both of these examples, the handlers and all other instrumentation functions will still run:
+
+```tsx
+// Throwing before calling the handler - we will detect this and still call the
+// handler internally
+function intrumentationFunction(doTheActualThing, info) {
+ somethingThatThrows();
+ await doTheActualThing();
+}
+
+// Throwing after calling the handler - error will be caught internally
+function intrumentationFunction2(doTheActualThing, info) {
+ await doTheActualThing();
+ somethingThatThrows();
+}
+```
+
+### Composition
+
+Instrumentations is an array so that you can compose together multiple independent instrumentations easily:
+
+```tsx
+let router = createBrowserRouter(routes, {
+ instrumentations: [logNavigations, addWindowPerfTraces, addSentryPerfTraces],
+});
+```
+
+### Dynamic Instrumentations
+
+By doing this at runtime, you should be able to enable instrumentation conditionally.
+
+Client side, it's trivial because it can be done on page load and avoid overhead on normal flows:
+
+```tsx
+let enableInstrumentation = window.location.search.startsWith("?DEBUG");
+let router = createBrowserRouter(routes, {
+ instrumentations: enableInstrumentation ? [debuggingInstrumentations] : [],
+});
+```
+
+Server side, it's a bit tricker but should be doable with a custom server:
+
+```tsx
+// Assume you export `instrumentations` from entry.server
+let getBuild = () => import("virtual:react-router/server-build");
+
+let instrumentedHandler = createRequestHandler({
+ build: getBuild,
+});
+
+let unInstrumentedHandler = createRequestHandler({
+ build: () =>
+ getBuild().then((m) => ({
+ ...m,
+ entry: {
+ ...m.entry,
+ module: {
+ ...m.entry.module,
+ unstable_instrumentations: undefined,
+ },
+ },
+ })),
+});
+
+app.use((req, res, next) => {
+ let url = new URL(req.url, `http://${req.headers.host}`);
+ if (url.searchParams.has("DEBUG")) {
+ return instrumentedHandler(req, res, next);
+ }
+ return unInstrumentedHandler(req, res, next);
+});
+```
+
+## Alternatives Considered
+
+### Events
+
+Originally we wanted to add an [Events API](https://github.com/remix-run/react-router/discussions/9565), but this proved to [have issues](https://github.com/remix-run/react-router/discussions/13749#discussioncomment-14135422) with the ability to "wrap" logic for easier OTEL instrumentation. These were not [insurmountable](https://github.com/remix-run/react-router/discussions/13749#discussioncomment-14421335), but the solutions didn't feel great.
+
+### patchRoutes
+
+Client side, we also considered whether this could be done via `patchRoutes`, but that's currently intended mostly to add new routes and doesn't work for `route.lazy` routes. In some RSC-use cases it can update parts of an existing route, but it only allows updates for the server-rendered RSC "elements," and doesn't walk the entire child tree to update children routes so it's not an ideal solution for updating loaders in the entire tree.
+
+### Naive Function wrapping
+
+The original implementation of this proposal was a naive simple wrapping of functions, but we moved away from this because by putting the wrapped function arguments (i.e., loader) in control of the user, they could potentially modify them and abuse the API to change runtime behavior instead of just instrument/observe. We want instrumentation to be limited to that - and it should not be able to change app behavior.
+
+```tsx
+function instrumentRoute(route: RouteModule): RequestHandler {
+ let { loader } = route;
+ let newRoute = { ...route };
+ if (loader) {
+ newRoute.loader = (args) => {
+ console.log("Loader start");
+ try {
+ // ⚠️ The user could send whatever they want into the actual loader here
+ return await loader(...args);
+ } finally {
+ console.log("Loader end");
+ }
+ };
+ }
+ return newRoute;
+}
+```
diff --git a/docs/api/data-routers/createHashRouter.md b/docs/api/data-routers/createHashRouter.md
index 528410ec37..307944a3fa 100644
--- a/docs/api/data-routers/createHashRouter.md
+++ b/docs/api/data-routers/createHashRouter.md
@@ -23,7 +23,7 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/do
[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.createHashRouter.html)
Create a new [data router](https://api.reactrouter.com/v7/interfaces/react_router.DataRouter.html) that manages the application
-path via the URL [`hash`]https://developer.mozilla.org/en-US/docs/Web/API/URL/hash).
+path via the URL [`hash`](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash).
## Signature
diff --git a/docs/api/rsc/RSCHydratedRouter.md b/docs/api/rsc/RSCHydratedRouter.md
index 7daecb105a..2882749a75 100644
--- a/docs/api/rsc/RSCHydratedRouter.md
+++ b/docs/api/rsc/RSCHydratedRouter.md
@@ -28,8 +28,6 @@ to release notes for relevant changes.
## Summary
-[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.unstable_RSCHydratedRouter.html)
-
Hydrates a server rendered [`unstable_RSCPayload`](https://api.reactrouter.com/v7/types/react_router.unstable_RSCPayload.html) in the browser.
```tsx
diff --git a/docs/api/rsc/createCallServer.md b/docs/api/rsc/createCallServer.md
index 4ae506c9f5..857b65d2f4 100644
--- a/docs/api/rsc/createCallServer.md
+++ b/docs/api/rsc/createCallServer.md
@@ -28,8 +28,6 @@ to release notes for relevant changes.
## Summary
-[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.unstable_createCallServer.html)
-
Create a React `callServer` implementation for React Router.
```tsx
diff --git a/docs/api/rsc/getRSCStream.md b/docs/api/rsc/getRSCStream.md
index 71a38a7ac9..26b875df87 100644
--- a/docs/api/rsc/getRSCStream.md
+++ b/docs/api/rsc/getRSCStream.md
@@ -28,8 +28,6 @@ to release notes for relevant changes.
## Summary
-[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.unstable_getRSCStream.html)
-
Get the prerendered [RSC](https://react.dev/reference/rsc/server-components)
stream for hydration. Usually passed directly to your
`react-server-dom-xyz/client`'s `createFromReadableStream`.
diff --git a/docs/how-to/instrumentation.md b/docs/how-to/instrumentation.md
new file mode 100644
index 0000000000..8bb39ef6fb
--- /dev/null
+++ b/docs/how-to/instrumentation.md
@@ -0,0 +1,567 @@
+---
+title: Instrumentation
+unstable: true
+---
+
+# Instrumentation
+
+[MODES: framework, data]
+
+
+
+
+The instrumentation APIs are experimental and subject to breaking changes in
+minor/patch releases. Please use with caution and pay **very** close attention
+to release notes for relevant changes.
+
+Instrumentation allows you to add logging, error reporting, and performance tracing to your React Router application without modifying your actual route handlers. This enables comprehensive observability solutions for production applications on both the server and client.
+
+## Overview
+
+With the React Router Instrumentation APIs, you provide "wrapper" functions that execute around your request handlers, router operations, route middlewares, and/or route handlers. This allows you to:
+
+- Monitor application performance
+- Add logging
+- Integrate with observability platforms (Sentry, DataDog, New Relic, etc.)
+- Implement OpenTelemetry tracing
+- Track user behavior and navigation patterns
+
+A key design principle is that instrumentation is **read-only** - you can observe what's happening but cannot modify runtime application behavior by modifying the arguments passed to, or data returned from your route handlers.
+
+
+As with any instrumentation approach, adding additional code execution at runtime may alter the performance characteristics compared to an uninstrumented application. Keep this in mind and perform appropriate testing and/or leverage conditional instrumentation to avoid a negative UX impact in production.
+
+
+## Quick Start (Framework Mode)
+
+[modes: framework]
+
+### 1. Server-side Instrumentation
+
+Add instrumentations to your `entry.server.tsx`:
+
+```tsx filename=app/entry.server.tsx
+export const unstable_instrumentations = [
+ {
+ // Instrument the server handler
+ handler(handler) {
+ handler.instrument({
+ async request(handleRequest, { request }) {
+ let url = `${request.method} ${request.url}`;
+ console.log(`Request start: ${url}`);
+ await handleRequest();
+ console.log(`Request end: ${url}`);
+ },
+ });
+ },
+
+ // Instrument individual routes
+ route(route) {
+ // Skip instrumentation for specific routes if needed
+ if (route.id === "root") return;
+
+ route.instrument({
+ async loader(callLoader, { request }) {
+ let url = `${request.method} ${request.url}`;
+ console.log(`Loader start: ${url} - ${route.id}`);
+ await callLoader();
+ console.log(`Loader end: ${url} - ${route.id}`);
+ },
+ // Other available instrumentations:
+ // async action() { /* ... */ },
+ // async middleware() { /* ... */ },
+ // async lazy() { /* ... */ },
+ });
+ },
+ },
+];
+
+export default function handleRequest(/* ... */) {
+ // Your existing handleRequest implementation
+}
+```
+
+### 2. Client-side Instrumentation
+
+Add instrumentations to your `entry.client.tsx`:
+
+```tsx filename=app/entry.client.tsx
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+const unstable_instrumentations = [
+ {
+ // Instrument router operations
+ router(router) {
+ router.instrument({
+ // Instrument navigations
+ async navigate(callNavigate, { currentUrl, to }) {
+ let nav = `${currentUrl} → ${to}`;
+ console.log(`Navigation start: ${nav}`);
+ await callNavigate();
+ console.log(`Navigation end: ${nav}`);
+ },
+ // Instrument fetcher calls
+ async fetch(
+ callFetch,
+ { href, currentUrl, fetcherKey },
+ ) {
+ let fetch = `${fetcherKey} → ${href}`;
+ console.log(`Fetcher start: ${fetch}`);
+ await callFetch();
+ console.log(`Fetcher end: ${fetch}`);
+ },
+ });
+ },
+
+ // Instrument individual routes (same as server-side)
+ route(route) {
+ // Skip instrumentation for specific routes if needed
+ if (route.id === "root") return;
+
+ route.instrument({
+ async loader(callLoader, { request }) {
+ let url = `${request.method} ${request.url}`;
+ console.log(`Loader start: ${url} - ${route.id}`);
+ await callLoader();
+ console.log(`Loader end: ${url} - ${route.id}`);
+ },
+ // Other available instrumentations:
+ // async action() { /* ... */ },
+ // async middleware() { /* ... */ },
+ // async lazy() { /* ... */ },
+ });
+ },
+ },
+];
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ ,
+ );
+});
+```
+
+## Quick Start (Data Mode)
+
+[modes: data]
+
+In Data Mode, you add instrumentations when creating your router:
+
+```tsx
+import {
+ createBrowserRouter,
+ RouterProvider,
+} from "react-router";
+
+const unstable_instrumentations = [
+ {
+ // Instrument router operations
+ router(router) {
+ router.instrument({
+ // Instrument navigations
+ async navigate(callNavigate, { currentUrl, to }) {
+ let nav = `${currentUrl} → ${to}`;
+ console.log(`Navigation start: ${nav}`);
+ await callNavigate();
+ console.log(`Navigation end: ${nav}`);
+ },
+ // Instrument fetcher calls
+ async fetch(
+ callFetch,
+ { href, currentUrl, fetcherKey },
+ ) {
+ let fetch = `${fetcherKey} → ${href}`;
+ console.log(`Fetcher start: ${fetch}`);
+ await callFetch();
+ console.log(`Fetcher end: ${fetch}`);
+ },
+ });
+ },
+
+ // Instrument individual routes (same as server-side)
+ route(route) {
+ // Skip instrumentation for specific routes if needed
+ if (route.id === "root") return;
+
+ route.instrument({
+ async loader(callLoader, { request }) {
+ let url = `${request.method} ${request.url}`;
+ console.log(`Loader start: ${url} - ${route.id}`);
+ await callLoader();
+ console.log(`Loader end: ${url} - ${route.id}`);
+ },
+ // Other available instrumentations:
+ // async action() { /* ... */ },
+ // async middleware() { /* ... */ },
+ // async lazy() { /* ... */ },
+ });
+ },
+ },
+];
+
+const router = createBrowserRouter(routes, {
+ unstable_instrumentations,
+});
+
+function App() {
+ return ;
+}
+```
+
+## Core Concepts
+
+### Instrumentation Levels
+
+There are different levels at which you can instrument your application. Each instrumentation function receives a second "info" parameter containing relevant contextual information for the specific aspect being instrumented.
+
+#### 1. Handler Level (Server)
+
+[modes: framework]
+
+Instruments the top-level request handler that processes all requests to your server:
+
+```tsx filename=entry.server.tsx
+export const unstable_instrumentations = [
+ {
+ handler(handler) {
+ handler.instrument({
+ async request(handleRequest, { request, context }) {
+ // Runs around ALL requests to your app
+ await handleRequest();
+ },
+ });
+ },
+ },
+];
+```
+
+#### 2. Router Level (Client)
+
+[modes: framework,data]
+
+Instruments client-side router operations like navigations and fetcher calls:
+
+```tsx
+export const unstable_instrumentations = [
+ {
+ router(router) {
+ router.instrument({
+ async navigate(callNavigate, { to, currentUrl }) {
+ // Runs around navigation operations
+ await callNavigate();
+ },
+ async fetch(
+ callFetch,
+ { href, currentUrl, fetcherKey },
+ ) {
+ // Runs around fetcher operations
+ await callFetch();
+ },
+ });
+ },
+ },
+];
+
+// Framework Mode (entry.client.tsx)
+;
+
+// Data Mode
+const router = createBrowserRouter(routes, {
+ unstable_instrumentations,
+});
+```
+
+#### 3. Route Level (Server + Client)
+
+[modes: framework,data]
+
+Instruments individual route handlers:
+
+```tsx
+const unstable_instrumentations = [
+ {
+ route(route) {
+ route.instrument({
+ async loader(
+ callLoader,
+ { params, request, context, unstable_pattern },
+ ) {
+ // Runs around loader execution
+ await callLoader();
+ },
+ async action(
+ callAction,
+ { params, request, context, unstable_pattern },
+ ) {
+ // Runs around action execution
+ await callAction();
+ },
+ async middleware(
+ callMiddleware,
+ { params, request, context, unstable_pattern },
+ ) {
+ // Runs around middleware execution
+ await callMiddleware();
+ },
+ async lazy(callLazy) {
+ // Runs around lazy route loading
+ await callLazy();
+ },
+ });
+ },
+ },
+];
+```
+
+### Read-only Design
+
+Instrumentations are designed to be **observational only**. You cannot:
+
+- Modify arguments passed to handlers
+- Change return values from handlers
+- Alter application behavior
+
+This ensures that instrumentation is safe to add to production applications and cannot introduce bugs in your route logic.
+
+### Error Handling
+
+To ensure that instrumentation code doesn't impact the runtime application, errors are caught internally and prevented from propagating outward. This design choice shows up in 2 aspects.
+
+First, if a "handler" function (loader, action, request handler, navigation, etc.) throws an error, that error will not bubble out of the `callHandler` function invoked from your instrumentation. Instead, the `callHandler` function returns a discriminated union result of type `{ type: "success", error: undefined } | { type: "error", error: unknown }`. This ensures your entire instrumentation function runs without needing any try/catch/finally logic to handle application errors.
+
+```tsx
+export const unstable_instrumentations = [
+ {
+ route(route) {
+ route.instrument({
+ async loader(callLoader) {
+ let { status, error } = await callLoader();
+
+ if (status === "error") {
+ // error case - `error` is defined
+ } else {
+ // success case - `error` is undefined
+ }
+ },
+ });
+ },
+ },
+];
+```
+
+Second, if your instrumentation function throws an error, React Router will gracefully swallow that so that it does not bubble outward and impact other instrumentations or application behavior. In both of these examples, the handlers and all other instrumentation functions will still run:
+
+```tsx
+export const unstable_instrumentations = [
+ {
+ route(route) {
+ route.instrument({
+ // Throwing before calling the handler - RR will
+ // catch the error and still call the loader
+ async loader(callLoader) {
+ somethingThatThrows();
+ await callLoader();
+ },
+ // Throwing after calling the handler - RR will
+ // catch the error internally
+ async action(callAction) {
+ await callAction();
+ somethingThatThrows();
+ },
+ });
+ },
+ },
+];
+```
+
+### Composition
+
+You can compose multiple instrumentations by providing an array:
+
+```tsx
+export const unstable_instrumentations = [
+ loggingInstrumentation,
+ performanceInstrumentation,
+ errorReportingInstrumentation,
+];
+```
+
+Each instrumentation wraps the previous one, creating a nested execution chain.
+
+### Conditional Instrumentation
+
+You can enable instrumentation conditionally based on environment or other factors:
+
+```tsx
+export const unstable_instrumentations =
+ process.env.NODE_ENV === "production"
+ ? [productionInstrumentation]
+ : [developmentInstrumentation];
+```
+
+```tsx
+// Or conditionally within an instrumentation
+export const unstable_instrumentations = [
+ {
+ route(route) {
+ // Only instrument specific routes
+ if (!route.id?.startsWith("routes/admin")) return;
+
+ // Or, only instrument if a query parameter is present
+ let sp = new URL(request.url).searchParams;
+ if (!sp.has("DEBUG")) return;
+
+ route.instrument({
+ async loader() {
+ /* ... */
+ },
+ });
+ },
+ },
+];
+```
+
+## Common Patterns
+
+### Request logging (server)
+
+```tsx
+const logging: unstable_ServerInstrumentation = {
+ handler({ instrument }) {
+ instrument({
+ request: (fn, { request }) =>
+ log(`request ${request.url}`, fn),
+ });
+ },
+ route({ instrument, id }) {
+ instrument({
+ middleware: (fn) => log(` middleware (${id})`, fn),
+ loader: (fn) => log(` loader (${id})`, fn),
+ action: (fn) => log(` action (${id})`, fn),
+ });
+ },
+};
+
+async function log(
+ label: string,
+ cb: () => Promise,
+) {
+ let start = Date.now();
+ console.log(`➡️ ${label}`);
+ await cb();
+ console.log(`⬅️ ${label} (${Date.now() - start}ms)`);
+}
+
+export const unstable_instrumentations = [logging];
+```
+
+### OpenTelemetry Integration
+
+```tsx
+import { trace, SpanStatusCode } from "@opentelemetry/api";
+
+const tracer = trace.getTracer("my-app");
+
+const otel: unstable_ServerInstrumentation = {
+ handler({ instrument }) {
+ instrument({
+ request: (fn, { request }) =>
+ otelSpan(`request`, { url: request.url }, fn),
+ });
+ },
+ route({ instrument, id }) {
+ instrument({
+ middleware: (fn, { unstable_pattern }) =>
+ otelSpan(
+ "middleware",
+ { routeId: id, pattern: unstable_pattern },
+ fn,
+ ),
+ loader: (fn, { unstable_pattern }) =>
+ otelSpan(
+ "loader",
+ { routeId: id, pattern: unstable_pattern },
+ fn,
+ ),
+ action: (fn, { unstable_pattern }) =>
+ otelSpan(
+ "action",
+ { routeId: id, pattern: unstable_pattern },
+ fn,
+ ),
+ });
+ },
+};
+
+async function otelSpan(
+ label: string,
+ attributes: Record,
+ cb: () => Promise,
+) {
+ return tracer.startActiveSpan(
+ label,
+ { attributes },
+ async (span) => {
+ let { error } = await cb();
+ if (error) {
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ });
+ }
+ span.end();
+ },
+ );
+}
+
+export const unstable_instrumentations = [otel];
+```
+
+### Client-side Performance Tracking
+
+```tsx
+const windowPerf: unstable_ClientInstrumentation = {
+ router({ instrument }) {
+ instrument({
+ navigate: (fn, { to, currentUrl }) =>
+ measure(`navigation:${currentUrl}->${to}`, fn),
+ fetch: (fn, { href }) =>
+ measure(`fetcher:${href}`, fn),
+ });
+ },
+ route({ instrument, id }) {
+ instrument({
+ middleware: (fn) => measure(`middleware:${id}`, fn),
+ loader: (fn) => measure(`loader:${id}`, fn),
+ action: (fn) => measure(`action:${id}`, fn),
+ });
+ },
+};
+
+async function measure(
+ label: string,
+ cb: () => Promise,
+) {
+ performance.mark(`start:${label}`);
+ await cb();
+ performance.mark(`end:${label}`);
+ performance.measure(
+ label,
+ `start:${label}`,
+ `end:${label}`,
+ );
+}
+
+;
+```
diff --git a/docs/how-to/pre-rendering.md b/docs/how-to/pre-rendering.md
index 71e182c423..e0cbc6a85d 100644
--- a/docs/how-to/pre-rendering.md
+++ b/docs/how-to/pre-rendering.md
@@ -9,43 +9,105 @@ title: Pre-Rendering
-Pre-Rendering allows you to speed up page loads for static content by rendering pages at build time instead of at runtime. Pre-rendering is enabled via the `prerender` config in `react-router.config.ts` and can be used in two ways based on the `ssr` config value:
+Pre-Rendering allows you to speed up page loads for static content by rendering pages at build time instead of at runtime.
-- Alongside a runtime SSR server with `ssr:true` (the default value)
-- Deployed to a static file server with `ssr:false`
+## Configuration
+
+Pre-rendering is enabled via the `prerender` config in `react-router.config.ts`.
+
+The simplest configuration is a boolean `true` which will pre-render all off the applications static paths based on `routes.ts`:
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
-## Pre-rendering with `ssr:true`
+export default {
+ prerender: true,
+} satisfies Config;
+```
-### Configuration
+The boolean `true` will not include any dynamic paths (i.e., `/blog/:slug`) because the parameter values are unknown.
-Add the `prerender` option to your config, there are three signatures:
+To configure specific paths including dynamic values, you can specify an array of paths:
-```ts filename=react-router.config.ts lines=[7-8,10-11,13-21]
+```ts filename=react-router.config.ts
import type { Config } from "@react-router/dev/config";
+let slugs = getPostSlugs();
+
export default {
- // Can be omitted - defaults to true
- ssr: true,
+ prerender: [
+ "/",
+ "/blog",
+ ...slugs.map((s) => `/blog/${s}`),
+ ],
+} satisfies Config;
+```
- // all static paths (no dynamic segments like "/post/:slug")
- prerender: true,
+If you need to perform more complex and/or asynchronous logic to determine the paths, you can also provide a function that returns an array of paths. This function provides you with a `getStaticPaths` method you can use to avoid manually adding all of the static paths in your application:
- // specific paths
- prerender: ["/", "/blog", "/blog/popular-post"],
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
- // async function for dependencies like a CMS
+export default {
async prerender({ getStaticPaths }) {
- let posts = await fakeGetPostsFromCMS();
+ let slugs = await getPostSlugsFromCMS();
return [
+ ...getStaticPaths(), // "/" and "/blog"
+ ...slugs.map((s) => `/blog/${s}`),
+ ];
+ },
+} satisfies Config;
+```
+
+### Concurrency (unstable)
+
+This API is experimental and subject to breaking changes in
+minor/patch releases. Please use with caution and pay **very** close attention
+to release notes for relevant changes.
+
+By default, pages are pre-rendered one path at a time. You can enable concurrency to pre-render multiple paths in parallel which can speed up build times in many cases. You should experiment with the value that provides the best performance for your app.
+
+To specify concurrency, move your `prerender` config down into a `prerender.paths` field and you can specify the concurrency in `prerender.unstable_concurrency`:
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
+
+let slugs = getPostSlugs();
+
+export default {
+ prerender: {
+ paths: [
"/",
"/blog",
- ...posts.map((post) => post.href),
- ];
+ ...slugs.map((s) => `/blog/${s}`),
+ ],
+ unstable_concurrency: 4,
},
} satisfies Config;
```
-### Data Loading and Pre-rendering
+## Pre-Rendering with/without a Runtime Server
+
+Pre-Rendering can be used in two ways based on the `ssr` config value:
+
+- Alongside a runtime SSR server with `ssr:true` (the default value)
+- Deployed to a static file server with `ssr:false`
+
+### Pre-rendering with `ssr:true`
+
+When pre-rendering with `ssr:true`, you're indicating you will still have a runtime server but you are choosing to pre-render certain paths for quicker Response times.
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
+
+export default {
+ // Can be omitted - defaults to true
+ ssr: true,
+ prerender: ["/", "/blog", "/blog/popular-post"],
+} satisfies Config;
+```
+
+#### Data Loading and Pre-rendering
There is no extra application API for pre-rendering. Routes being pre-rendered use the same route `loader` functions as server rendering:
@@ -64,7 +126,7 @@ Instead of a request coming to your route on a deployed server, the build create
When server rendering, requests to paths that have not been pre-rendered will be server rendered as usual.
-### Static File Output
+#### Static File Output
The rendered result will be written out to your `build/client` directory. You'll notice two files for each path:
@@ -89,7 +151,7 @@ Prerender: Generated build/client/blog/my-first-post/index.html
During development, pre-rendering doesn't save the rendered results to the public directory, this only happens for `react-router build`.
-## Pre-rendering with `ssr:false`
+### Pre-rendering with `ssr:false`
The above examples assume you are deploying a runtime server but are pre-rendering some static pages to avoid hitting the server, resulting in faster loads.
@@ -108,7 +170,7 @@ If you specify `ssr:false` without a `prerender` config, React Router refers to
If you want to pre-render paths with `ssr:false`, those matched routes _can_ have loaders because we'll pre-render all of the matched routes for those paths, not just the root. You cannot include `actions` or `headers` functions in any routes when `ssr:false` is set because there will be no runtime server to run them on.
-### Pre-rendering with a SPA Fallback
+#### Pre-rendering with a SPA Fallback
If you want `ssr:false` but don't want to pre-render _all_ of your routes - that's fine too! You may have some paths where you need the performance/SEO benefits of pre-rendering, but other pages where a SPA would be fine.
@@ -155,7 +217,7 @@ sirv-cli build/client --single index.html
sirv-cli build/client --single __spa-fallback.html
```
-### Invalid Exports
+#### Invalid Exports
When pre-rendering with `ssr:false`, React Router will error at build time if you have invalid exports to help prevent some mistakes that can be easily overlooked.
diff --git a/docs/how-to/react-server-components.md b/docs/how-to/react-server-components.md
index c38fab5c87..b705f44fda 100644
--- a/docs/how-to/react-server-components.md
+++ b/docs/how-to/react-server-components.md
@@ -10,7 +10,9 @@ unstable: true
-React Server Components support is experimental and subject to breaking changes.
+React Server Components support is experimental and subject to breaking changes in
+minor/patch releases. Please use with caution and pay **very** close attention
+to release notes for relevant changes.
React Server Components (RSC) refers generally to an architecture and set of APIs provided by React since version 19.
diff --git a/integration/browser-entry-test.ts b/integration/browser-entry-test.ts
index 37e1dbce47..5171b7bd93 100644
--- a/integration/browser-entry-test.ts
+++ b/integration/browser-entry-test.ts
@@ -196,3 +196,126 @@ test("allows users to pass an onError function to HydratedRouter", async ({
appFixture.close();
});
+
+test("allows users to instrument the client side router via HydratedRouter", async ({
+ page,
+}) => {
+ let fixture = await createFixture({
+ files: {
+ "app/entry.client.tsx": js`
+ import { HydratedRouter } from "react-router/dom";
+ import { startTransition, StrictMode } from "react";
+ import { hydrateRoot } from "react-dom/client";
+
+ startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+
+ );
+ });
+ `,
+ "app/routes/_index.tsx": js`
+ import { Link } from "react-router";
+ export default function Index() {
+ return Go to Page;
+ }
+ `,
+ "app/routes/page.tsx": js`
+ import { useFetcher } from "react-router";
+ export function loader() {
+ return { data: "hello world" };
+ }
+ export function action() {
+ return "OK";
+ }
+ export default function Page({ loaderData }) {
+ let fetcher = useFetcher({ key: 'a' });
+ return (
+ <>
+