Remix Newsletter #34

Middleware and type-safe context APIs are now stable! Plus a number of other updates, major improvements to @remix-run/route-pattern, and a look at the Remix Jam lineup.

Let's jump in! 💿

React Router v7.8.1-v7.9.0

React Router v7.8.1-v7.9.0 brings middleware and context APIs to production, client-side error reporting, and other improvements.

New Features

Middleware & Context (stable): All the way back in March we released React Router 7.3.0 with unstable support for middleware. Since then we've been squashing bugs, improving the adoption story, and ensuring that it's production-ready. This is one of the longest awaited features of Remix/React Router, and we're excited to announce that it's finally stable!

Read more about middleware and context below.

Client-side error reporting: New unstable_onError props on <RouterProvider> and <HydratedRouter> so you can actually see what's breaking on the client.

Improvements to RSC: We continue to improve React Server Components with better Await components, hydration fixes for client loaders with custom basenames, and improved context handling. We're getting very close to RSC support landing in framework mode.

Bug Fixes & Improvements

We also made a number of other improvements and bug fixes:

• Fix basename usage without a leading slash in data routers
• Fix pre-rendering when a basename is set with ssr:false
• Properly escape interpolated param values in generatePath()
• Fix optional path segments in nested routes with absolute paths
• Improve Route.MetaArgs types so loaderData is only potentially undefined when an ErrorBoundary is present
• Fix potential memory leak in default entry.server
• Better error propagation from middleware to error boundaries
• Correct href() processing for routes with extensions after parameters
• Maintain ReadonlyMap and ReadonlySet types in server response data
• Fix TypeError if you throw from patchRoutesOnNavigation when no partial matches exist
• Fix optional static segment matching in matchPath

Check out the full React Router changelog ↗

React Router Middleware

React Router's middleware API lets you run code before and after your route handlers, which is perfect for auth, logging, updating headers, and more.

Middleware runs in a chain from parent to child routes on the way down, then back up after your handlers run.

To enable middleware, you need to set the future.v8_middleware flag to true in your react-router.config.ts file:

Here's a simplified example of how you can protect routes with an auth middleware:

Middleware also introduces a new context API, giving you a type-safe way to share data between middleware, loaders, and actions. This replaces the old AppLoadContext pattern with a unified, type-safe API that works the same on both server and client.

Check out the middleware docs ↗

Route Pattern: Comprehensive URL Matching

The @remix-run/route-pattern package is part of our Remix 3 work. It lays the foundation for a much more sophisticated, yet easy to use, URL matching API.

Here are some of the key features:

• Comprehensive URL Matching: Match complete URLs including protocol, hostname, port, pathname, and query parameters
• Developer-Friendly Syntax: Clean, readable patterns inspired by Rails routing
• Type Safety: Generate URLs with type-safe parameter validation and autocompletion
• Universal Runtime Support: Works seamlessly across all JavaScript environments including Node.js, Bun, Deno, Cloudflare Workers, and browsers

Here's an example of how you can handle API versioning with RoutePattern. With a single pattern you can handle legacy calls, versioned APIs, and optional JSON extensions:

@remix-run/route-pattern also includes a createHrefBuilder function that makes URL generation type-safe. Using the same API versioning pattern from above:

Check out the Route Pattern package ↗

Remix Jam 2025: The Lineup is Here!

Remix Jam is 1 month away (October 10th)! We're excited to share our official lineup of expert speakers sharing their insights on AI, MCP, scalability, and the future of web development. Plus, we'll finally unveil Remix 3.

You won't want to miss this event. If you can't make it to Toronto, we'll have a live stream available during the event.

Only a few tickets remain, secure yours today!

See the full schedule online ↗

Get your Remix Jam ticket ↗

Connect at a Remix Meetup

Remix Meetups are run voluntarily by members of the community all around the globe with in-person and online options. These meetups feature local speakers, hackathons, workshops, and more!

Find a meetup near you ↗

No meetups near you? Reply to this email if you are interested in starting your own meetup. We've even created some guides to help you get started.

Starting a New Remix Meetup ↗

If you enjoy getting this email, please let us know! We'd love to hear from you, what you like about Remix and these updates, and any suggestions you have to improve them.

- The Remix Team