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.

• Demo repo
• Demo site

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.

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 anetlify.toml file with commonbuild settings.

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, runnpx 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.

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:

npminstall--save-dev@netlify/vite-plugin-react-router

import{reactRouter}from"@react-router/dev/vite";
import{defineConfig}from"vite";
importtsconfigPathsfrom"vite-tsconfig-paths";
// ↓ add this
importnetlifyPluginfrom"@netlify/vite-plugin-react-router";
export defaultdefineConfig({
plugins:[
reactRouter(),
tsconfigPaths(),
netlifyPlugin()// ← add this
]
});

import{reactRouter}from"@react-router/dev/vite";
// ↓ add this
importnetlifyPluginfrom"@netlify/vite-plugin-react-router";
export default{
plugins:[
reactRouter(),
netlifyPlugin()// ← add this
]
};

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

• React Router docs
• Netlify blog: Remix posts