React Router Release Notes

Minor Changes

• react-router - Add crossOrigin prop to Links component (#14687)

Patch Changes

• react-router - Fix double slash normalization for useNavigate paths with a colon (#14718)
• react-router - Fix missing nonce on inline criticalCss (#14691)
• react-router - Update failed origin checks to return a 400 status instead of a 500 (#14737)
• react-router - Loosen allowedActionOrigins glob check so ** matches all domains (#14722)
• @react-router/dev - Bump @remix-run/node-fetch-server dep (#14704)
• @react-router/fs-routes - Fix route file paths when routes directory is outside of the app directory (#13937)

Full Changelog: v7.12.0...v7.13.0

Security Notice

This release addresses 3 security vulnerabilities:

• CSRF in React Router Action/Server Action Request Processing
• XSS via Open Redirects
• React Router SSR XSS in ScrollRestoration

Minor Changes

• react-router - Add additional layer of CSRF protection by rejecting submissions to UI routes from external origins (#14708)
  • If you need to permit access to specific external origins, there is a new allowedActionOrigins config field in react-router.config.ts where you can specify external origins

Patch Changes

• react-router - Fix generatePath when used with suffixed params (i.e., /books/:id.json) (#14269)
• react-router - Escape HTML in scroll restoration keys (#14705)
• react-router - Validate redirect locations (#14706)
• @react-router/dev - Fix Maximum call stack size exceeded errors when HMR is triggered against code with cyclic imports (#14522)
• @react-router/dev - Skip SSR middleware in vite preview server for SPA mode (#14673)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• react-router - Preserve clientLoader.hydrate=true when using (#14674)
• react-router - Pass value through to the underlying importmap script tag when using future.unstable_subResourceIntegrity (#14675)
• react-router - Export UNSAFE_createMemoryHistory and UNSAFE_createHashHistory alongside UNSAFE_createBrowserHistory for consistency (#14663)
  • These are not intended to be used for new apps but intended to help apps using unstable_HistoryRouter migrate from v6->v7 so they can adopt the newer APIs
• @react-router/dev - Add a new future.unstable_trailingSlashAwareDataRequests flag to provide consistent behavior of request.pathname inside middleware, loader, and action functions on document and data requests when a trailing slash is present in the browser URL. (#14644)
  • Currently, your HTTP and request pathnames would be as follows for /a/b/c and /a/b/c/
  • With this flag enabled, these pathnames will be made consistent though a new _.data format for client-side .data requests
  • This a bug fix but we are putting it behind an opt-in flag because it has the potential to be a "breaking bug fix" if you are relying on the URL format for any other application or caching logic
  • Enabling this flag also changes the format of client side .data requests from /root.data to /.data when navigating to / to align with the new format - This does not impact the request pathname which is still / in all cases

Full Changelog: v7.11.0...v7.12.0

What's Changed

vite preview Support

We've added support for vite preview when using Framework mode to make it easy to preview your production build.

Stabilized Client-side onError

The existing / APIs have been stabilized as / . Please see the Error Reporting docs for more information.

Call-site Revalidation Opt-out (unstable)

We've added initial unstable support for call-site revalidation opt-out via a new unstable_defaultShouldRevalidate flag (RFC). This flag is available on all navigation/fetcher submission APIs to alter standard revalidation behavior. If any routes include a shouldRevalidate function, then the flag value will be passed to that function so the route has the final say on revalidation behavior.
This flag is also available on non-submission navigational use cases - for example, you may want to opt-out of revalidation when adding a search param that doesn't impact the UI:
This flag is also available on non-submission navigational use cases - for example, you may want to opt-out of revalidation when adding a search param that doesn't impact the UI:

Minor Changes

• react-router - Stabilize / (#14546)
• @react-router/dev - Add vite preview support (#14507)

Patch Changes

• react-router - Fix unstable_useTransitions prop on component to permit omission for backwards compatibility (#14646)
• react-router - Allow redirects to be returned from client side middleware (#14598)
• react-router - Handle dataStrategy implementations that return insufficient result sets by adding errors for routes without any available result (#14627)
• @react-router/serve - Update compression and morgan dependencies to address on-headers CVE: GHSA-76c9-3jph-rj3q (#14652)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• react-router - RSC: Support for throwing data() and Response from server component render phase (#14632)
  • Response body is not serialized as async work is not allowed as error encoding phase.
  • If you wish to transmit data to the boundary, throw data() instead
• react-router - RSC: Support for throwing redirect Response's at render time (#14596)
• react-router - RSC: routeRSCServerRequest replace fetchServer with serverResponse (#14597)
• @react-router/dev - RSC (Framework mode): Manual chunking for react and react-router deps (#14655)
• @react-router/dev - RSC (Framework mode): Optimize react-server-dom-webpack if in project package.json (#14656)
• @react-router/dev - RSC (Framework mode): Support custom entrypoints (#14643)
• react-router - Add a new unstable_defaultShouldRevalidate flag to various APIs to allow opt-ing out of standard revalidation behaviors (#14542)

Full Changelog: v7.10.1...v7.11.0

What's Changed

We've stabilized a handful of existing APIs and future flags in this release, please make the appropriate changes if you'd adopted any of these APIs in their unstable state!

Stabilized future.v8_splitRouteModules

The existing future.unstable_splitRouteModules flag has been stabilized as future.v8_splitRouteModules in react-router.config.ts. Please see the docs for more information on adopting this flag.

Stabilized future.v8_viteEnvironmentApi

The existing future.unstable_viteEnvironmentApi flag has been stabilized as future.v8_viteEnvironmentApi in react-router.config.ts. Please see the docs for more information on adopting this flag.

Stabilized fetcher.reset()

The existing fetcher.unstable_reset() API has been stabilized as fetcher.reset().

Stabilized DataStrategyMatch.shouldCallHandler()

The existing low-level DataStrategyMatch.unstable_shouldCallHandler() / DataStrategyMatch.unstable_shouldRevalidateArgs APIs have been stabilized as DataStrategyMatch.shouldCallHandler() / DataStrategyMatch.shouldRevalidateArgs. Please see the docs for information about using a custom dataStrategy and how to migrate away from the deprecated DataStrategyMatch.shouldLoad API if you are using that today.

Minor Changes

• react-router - Stabilize fetcher.reset() (#14545)
• react-router - Stabilize the dataStrategy match.shouldCallHandler() / match.shouldRevalidateArgs APIs (#14592)
• @react-router/dev - Stabilize future.v8_splitRouteModules, replacing future.unstable_splitRouteModules (#14595)
• @react-router/dev - Stabilize future.v8_viteEnvironmentApi, replacing future.unstable_viteEnvironmentApi (#14595)

Patch Changes

• react-router - Fix a Framework Mode bug where the defaultShouldRevalidate parameter to shouldRevalidate would not be correct after action returned a 4xx/5xx response (true when it should have been false) (#14592)
• react-router - Fix fetcher.submit failing with plain objects containing a tagName property (#14534)
• react-router - Fix the promise returned from useNavigate in Framework/Data Mode so that it properly tracks the duration of popstate navigations (i.e., navigate(-1)) (#14524)
• react-router - Preserve statusText on the ErrorResponse instance when throwing data() from a route handler (#14555)
• react-router - Optimize href() to avoid backtracking regex on splat (#14329)
• @react-router/dev - Fix internal type error in useRoute types that surfaces when skipLibCheck is disabled (#14577)
• @react-router/dev - Load environment variables before evaluating routes.ts (#14446)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• react-router - Add unstable_pattern to the parameters for client side unstable_onError (#14573)
• react-router - Refactor how unstable_onError is called internally by RouterProvider to avoid potential strict mode issues (#14573)
• react-router - Add new unstable_useTransitions flag to routers to give users control over the usage of React.startTransition and React.useOptimistic (#14524)

Full Changelog: v7.9.6...v7.10.0

Security Notice

This release addresses 1 security vulnerability:

• Unexpected external redirect via untrusted paths

Patch Changes

• react-router - Properly handle ancestor thrown middleware errors before next() on fetcher submissions (#14517)
• react-router - Fix issue with splat routes interfering with multiple calls to patchRoutesOnNavigation (#14487)
• react-router - Normalize double-slashes in resolvePath (#14529)
• @react-router/dev - Use a dynamic import() to load ESM-only p-map dependency to avoid issues on Node 20.18 and below (#14492)
• @react-router/dev - Short circuit HEAD document requests before calling renderToPipeableStream in the default entry.server.tsx to more closely align with the spec (#14488)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• react-router - Add location/params as arguments to client-side unstable_onError to permit enhanced error reporting (#14509)

Full Changelog: v7.9.5...v7.9.6

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.

Patch Changes

• react-router - Ensure action handlers run for routes with middleware even if no loader is present (#14443)
• @react-router/dev - Ensure route navigation doesn't remove CSS link elements used by dynamic imports (#14463)
• @react-router/dev - Typegen: only register route module types for routes within the app directory (#14439)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• react-router - Move unstable_RSCHydratedRouter and utils to react-router/dom export (#14457)
• react-router - Add a type-safe handle field to unstable_useRoute() (#14462)
• 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)
• 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)
• @react-router/dev - Introduce a prerender.unstable_concurrency option, to support running the pre-rendering concurrently, potentially speeding up the build (#14380)

Full Changelog: v7.9.4...v7.9.5

Security Notice

This release addresses 1 security vulnerability:

• Unauthorized file access when using createFileSessionStorage() with unsigned cookies

What's Changed

useRoute() (unstable)
This release includes a new unstable_useRoute() hook that provides a type-safe way to access route loaderData/actionData from a specific route in Framework Mode. Think of it like a better version of useRouteLoaderData that works with the typegen system and also supports actionData. Check out the changelog entry below for more information.

Patch Changes

• @react-router/dev - Update valibot dependency to ^1.1.0 (#14379)
• @react-router/node - Validate format of incoming session ids in createFileSessionStorage (#14426)

Unstable Changes

⚠️ Unstable features are not recommended for production use

• react-router - handle external redirects in from server actions (#14400)
• react-router - New (unstable) useRoute hook for accessing data from specific routes (#14407)

Full Changelog: v7.9.3...v7.9.4