@netlify/vite-plugin-react-router weekly downloads statistics

React Router Adapter for Netlify

The React Router Adapter for Netlify allows you to deploy your React Router app to Netlify.

How to use

To deploy a React Router 7+ site to Netlify, install this package:

It's also recommended (but not required) to use the Netlify Vite plugin, which provides full Netlify platform emulation directly in your local dev server:

and include the Netlify plugin in your vite.config.ts:

Your app is ready to deploy to Netlify.

Deploying to Edge Functions

By default, this plugin deploys your React Router app to Netlify Functions (Node.js runtime). You can optionally deploy to Netlify Edge Functions (Deno runtime) instead.

First, toggle the edge option:

Second, you must provide an app/entry.server.tsx (or .jsx) file. Create a file with the following content:

[!TIP]

If you prefer to avoid a @ts-ignore here, add this to vite-env.d.ts in your project root (or anywhere you prefer):

Finally, if you have your own Netlify Functions (typically in netlify/functions) for which you've configured a path, you must exclude those paths to avoid conflicts with the generated React Router SSR handler:

Moving back from Edge Functions to Functions

To switch from Edge Functions back to Functions, you must:

1. Remove the edge: true option from your vite.config.ts 2. Delete the app/entry.server.tsx file (React Router will use its default Node.js-compatible entry)

Edge runtime

Before deploying to Edge Functions, review the Netlify Edge Functions documentation for important details:

• Runtime environment - Understand the Deno runtime • Supported Web APIs - Check which APIs are available • Limitations - Be aware of resource limits and constraints

Load context

This plugin automatically includes all Netlify context fields on loader and action context.

If you're using TypeScript, AppLoadContext is automatically aware of these fields (via module augmentation).

For example:

If you've opted in to the future.v8_middleware flag, you can still use the above access pattern for backwards compatibility, but loader and action context will now be an instance of the type-safe RouterContextProvider. Note that this requires requires v2.0.0+ of @netlify/vite-plugin-react-router.

For example:

[!IMPORTANT]

Note that in local development, netlifyRouterContext requires Netlify platform emulation, which is provided seamlessly by @netlify/vite-plugin (or Netlify CLI - up to you).

Middleware context

React Router introduced a stable middleware feature in 7.9.0.

To use middleware, opt in to the feature via future.v8_middleware and follow the docs. Note that this requires requires v2.0.0+ of @netlify/vite-plugin-react-router.

To access the Netlify context specifically, you must import our RouterContext instance:

[!IMPORTANT]

Note that in local development, netlifyRouterContext requires Netlify platform emulation, which is provided seamlessly by @netlify/vite-plugin (or Netlify CLI - up to you).