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.

Deploy a React Router site

Get started with React Router on Netlify right away by clicking the button above

• Demo repo
• Demo site

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

vite.config.ts

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
  ]
});

vite.config.js

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

• React Router docs
• Netlify blog: Remix posts