Framework Adoption from Component Routes | React Router

If you are using <RouterProvider> please see Framework Adoption from RouterProvider instead.
If you are using <Routes> this is the right place.
The React Router Vite plugin adds framework features to React Router. This guide will help you adopt the plugin in your app. If you run into any issues, please reach out for help on Twitter or Discord.
The Vite plugin adds:
The initial setup requires the most work. However, once complete, you can adopt new features incrementally, one route at a time.
To use the Vite plugin, your project requires:
👉 Install the React Router Vite plugin
👉 Install a runtime adapter
We will assume you are using Node as your runtime.
👉 Swap out the React plugin for React Router.
👉 Create a react-router.config.ts file
Add the following to the root of your project. In this config you can tell React Router about your project, like where to find the app directory and to not use SSR (server-side rendering) for now.
In a typical Vite app, the index.html file is the entry point for bundling. The React Router Vite plugin moves the entry point to a root.tsx file so you can use React to render the shell of your app instead of static HTML, and eventually upgrade to Server Rendering if you want.
👉 Move your existing index.html to root.tsx
For example, if your current index.html looks like this:
You would move that markup into src/root.tsx and delete index.html:
In the typical Vite app the index.html file points to src/main.tsx as the client entry point. React Router uses a file named src/entry.client.tsx instead.
👉 Make src/entry.client.tsx your entry point
If your current src/main.tsx looks like this:
You would rename it to entry.client.tsx and change it to this:
Between root.tsx and entry.client.tsx, you may want to shuffle some stuff around between them.
Note that your root.tsx file will be statically generated and served as the entry point of your app, so just that module will need to be compatible with server rendering. This is where most of your trouble will come.
The React Router Vite plugin uses a routes.ts file to configure your routes. For now we'll add a simple catchall route to get things going.
👉 Set up a catchall.tsx route
👉 Render a placeholder route
Eventually we'll replace this with our original App component, but for now we'll just render something simple to make sure we can boot the app.
View our guide on configuring routes to learn more about the routes.ts file.
At this point you should be able to boot the app and see the root layout.
👉 Add dev script and run the app
Now make sure you can boot your app at this point before moving on:
You will probably want to add .react-router/ to your .gitignore file to avoid tracking unnecessary files in your repository.
You can check out Type Safety to learn how to fully set up and use autogenerated type safety for params, loader data, and more.
To get back to rendering your app, we'll update the "catchall" route we set up earlier that matches all URLs so that your existing <Routes> get a chance to render.
👉 Update the catchall route to render your app
Your app should be back on the screen and working as usual!
You can now incrementally migrate your routes to route modules.
Given an existing route like this:
👉 Add the route definition to routes.ts
👉 Add the route module
Edit the route module to use the Route Module API: