From f8f62053d946d95eeabb7a76f9a29ab8ad45648c Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Thu, 21 Aug 2025 15:26:38 -0400 Subject: [PATCH 1/3] Remove unused client side middleware future flag --- .changeset/brown-ladybugs-yawn.md | 8 ++++++++ packages/react-router/lib/router/router.ts | 5 +---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/brown-ladybugs-yawn.md diff --git a/.changeset/brown-ladybugs-yawn.md b/.changeset/brown-ladybugs-yawn.md new file mode 100644 index 0000000000..ac8aab0a5d --- /dev/null +++ b/.changeset/brown-ladybugs-yawn.md @@ -0,0 +1,8 @@ +--- +"react-router": patch +--- + +[UNSTABLE] Remove Data Mode `future.unstable_middleware` flag from `createBrowserRouter` + +- This is only needed as a Framework Mode flag because of the route modules and the `getLoadContext` type behavior change +- In Data Mode, it's an opt-in feature because it's just a new property on a route object, so there's no behavior changes that necessitate a flag diff --git a/packages/react-router/lib/router/router.ts b/packages/react-router/lib/router/router.ts index f5525b7a6c..314320233f 100644 --- a/packages/react-router/lib/router/router.ts +++ b/packages/react-router/lib/router/router.ts @@ -384,9 +384,7 @@ export type HydrationState = Partial< /** * Future flags to toggle new feature behavior */ -export interface FutureConfig { - unstable_middleware: boolean; -} +export interface FutureConfig {} /** * Initialization options for createRouter @@ -874,7 +872,6 @@ export function createRouter(init: RouterInit): Router { // Config driven behavior flags let future: FutureConfig = { - unstable_middleware: false, ...init.future, }; // Cleanup function for history From 9ee7022546d4b5500763dcc4802ba4ad1f46aded Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Thu, 21 Aug 2025 17:07:31 -0400 Subject: [PATCH 2/3] Update docs --- docs/how-to/middleware.md | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/docs/how-to/middleware.md b/docs/how-to/middleware.md index cc959d00ce..522ebb5ca9 100644 --- a/docs/how-to/middleware.md +++ b/docs/how-to/middleware.md @@ -133,17 +133,9 @@ function getLoadContext(req, res) { ## Quick Start (Data Mode) -### 1. Enable the middleware flag +Note there is no future flag in Data Mode because you can simply opt-into middleware by adding it to your routes, no breaking changes exist that require a future flag. -```tsx -const router = createBrowserRouter(routes, { - future: { - unstable_middleware: true, - }, -}); -``` - -### 2. Create a context +### 1. Create a context Middleware uses a `context` provider instance to provide data down the middleware chain. You can create type-safe context objects using [`unstable_createContext`][createContext]: @@ -156,7 +148,7 @@ export const userContext = unstable_createContext(null); ``` -### 3. Add middleware to your routes +### 2. Add middleware to your routes ```tsx import { redirect } from "react-router"; @@ -216,7 +208,7 @@ export default function Profile() { } ``` -### 4. Add an `unstable_getContext` function (optional) +### 3. Add an `unstable_getContext` function (optional) If you wish to include a base context on all navigations/fetches, you can add an [`unstable_getContext`][getContext] function to your router. This will be called to populate a fresh context on every navigation/fetch. @@ -224,9 +216,6 @@ If you wish to include a base context on all navigations/fetches, you can add an let sessionContext = unstable_createContext(); const router = createBrowserRouter(routes, { - future: { - unstable_middleware: true, - }, unstable_getContext() { let context = new unstable_RouterContextProvider(); context.set(sessionContext, getSession()); From 6060b7ec1d5675aec979ea83130e02492beba391 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Thu, 21 Aug 2025 17:10:39 -0400 Subject: [PATCH 3/3] Update --- docs/how-to/middleware.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to/middleware.md b/docs/how-to/middleware.md index 522ebb5ca9..be7e84acfa 100644 --- a/docs/how-to/middleware.md +++ b/docs/how-to/middleware.md @@ -133,7 +133,7 @@ function getLoadContext(req, res) { ## Quick Start (Data Mode) -Note there is no future flag in Data Mode because you can simply opt-into middleware by adding it to your routes, no breaking changes exist that require a future flag. +Note there is no future flag in Data Mode because you can opt-into middleware by adding it to your routes, no breaking changes exist that require a future flag. ### 1. Create a context