Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/brown-ladybugs-yawn.md
Original file line number Diff line number Diff line change
@@ -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
19 changes: 4 additions & 15 deletions docs/how-to/middleware.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,17 +133,9 @@ function getLoadContext(req, res) {

## Quick Start (Data Mode)

### 1. Enable the middleware flag
<docs-info>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.</docs-info>

```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]:
Expand All @@ -156,7 +148,7 @@ export const userContext =
unstable_createContext<User | null>(null);
```

### 3. Add middleware to your routes
### 2. Add middleware to your routes

```tsx
import { redirect } from "react-router";
Expand Down Expand Up @@ -216,17 +208,14 @@ 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.

```tsx
let sessionContext = unstable_createContext();

const router = createBrowserRouter(routes, {
future: {
unstable_middleware: true,
},
unstable_getContext() {
let context = new unstable_RouterContextProvider();
context.set(sessionContext, getSession());
Expand Down
5 changes: 1 addition & 4 deletions packages/react-router/lib/router/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down