Getting Started ​

This guide will walk you through the process of setting up the vite-plugin-remix-router plugin in your Vite project. You can start with a new project or add the plugin to an existing project.

Step 1: Installation ​

First, install vite-plugin-remix-router and react-router-dom packages:

npm install --save-dev vite-plugin-remix-router react-router-dom

yarn add --dev vite-plugin-remix-router react-router-dom

pnpm add --dev vite-plugin-remix-router react-router-dom

Then, add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import RemixRouter from 'vite-plugin-remix-router'

export default defineConfig({
  plugins: [
    RemixRouter({
      // configuration options
    }),
  ],
})

Step 2: Define your first route ​

Create a hello.tsx file in the src/routes directory with the following contents. This directory contains all your application routes, and you can change it in the plugin's configuration options.

mkdir src/routes && touch src/routes/hello.tsx

// src/routes/hello.tsx

export function Component() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Powered by Vite, React, and vite-plugin-remix-router</p>
    </div>
  )
}

Step 3: Create a Router instance ​

Create a router.ts file in the src directory and add the following:

import { createBrowserRouter } from 'react-router-dom'
import { routes } from 'virtual:routes'

export const router = createBrowserRouter(routes)

The virtual:routes export is generated by the vite-plugin-remix-router and contains all the routes defined in your src/routes.

To use the data APIs in react-router^6.4.0, you should use the createBrowserRouter to create a router instance. Check out the Picking a Router guide in React Router documentation to learn more.

If you are using typescript, add the following to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["vite-plugin-remix-router/client"]
  }
}

Finally, import and pass the router instance to the RouterProvider component:

import { Suspense } from 'react'
import { RouterProvider } from 'react-router-dom'
import { router } from './router'

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RouterProvider router={router} />
    </Suspense>
  )
}

Step 4: Start the development server ​

Now you can start the development server and visit http://localhost:5173/hello.

What's next? ​

By now, you should be able to install the vite-plugin-remix-router plugin and create a new route. Next, we'll learn how to define application routes.

You can also check the configuration reference for customizing the plugin's behavior.