Netlify Docs
Ask Netlify

Contact

Frameworks /Framework support /

React Router on Netlify

React Router 7+ can be used as a framework, giving you a server and browser runtime that focuses on performance and excellent user experiences. You get a number of built-in tools to build better websites, such as nested routes, parallel data requests, and robust built-in error handling.

# Key features

These features provide important benefits for React Router projects, including those built by and deployed with Netlify.

  • Nested routes. By default, React Router creates routes for components that serve as boundaries for data loading and code splitting.
  • Parallel data requests by default. Instead of waiting on sequential requests, React Router processes requests in parallel and then sends a complete HTML document.
  • Built-in global error handling. React Router has built-in error handling for server and client rendering and server side data handling. Error boundaries don’t block the entire page from rendering, only the affected component.

# Netlify integration

To create a React Router app and deploy it on Netlify, use our Netlify starter template with the command: npx create-react-router@latest --template netlify/react-router-template.

You'll get all you need to deploy to Netlify, including a netlify.toml file with common build settings.

# Create a new React Router app to deploy to Netlify

You can use the command line to scaffold a new project based on the Netlify starter template for React Router. This can streamline the process of getting your project up and running.

  1. In your terminal, run npx create-react-router@latest --template netlify/react-router-template.
  2. Follow the interactive prompts.
  3. Follow the starter template README to get your project running.

# Update the deploy target for an existing React Router app

If you have an existing React Router 7+ project that isn’t deployed on Netlify and you want to change the deploy target to Netlify, install Netlify's React Router Vite plugin and add it to your Vite config:

npm install --save-dev @netlify/vite-plugin-react-router

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
// ↓ add this
import netlifyPlugin from "@netlify/vite-plugin-react-router";

export default defineConfig({
  plugins: [
    reactRouter(),
    tsconfigPaths(),
    netlifyPlugin() // ← add this
  ]
});

import { reactRouter } from "@react-router/dev/vite";
// ↓ add this
import netlifyPlugin from "@netlify/vite-plugin-react-router";

export default {
  plugins: [
    reactRouter(),
    netlifyPlugin() // ← add this
  ]
};

# Limitations

  • Running React Router as a framework on Netlify Edge Functions is not yet supported

# More resources

←