Remix File-Based Routing for React Router via Vite.

Checkout the Example to see a working demo

Usage

Install the dependencies npm install --save-dev vite-plugin-react-router-remix-routes @remix-run/dev

Configure the vite plugin

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { flatRoutes } from "@remix-run/dev/dist/config/flat-routes";
import { reactRouterRemixRoutes } from "vite-plugin-react-router-remix-routes";

export default defineConfig(() => {
    const config = {
        plugins: [react(), reactRouterRemixRoutes(flatRoutes, "src", ["**/*.tsx.cs"], "routes"))],
    };
    return config;
});

Import the remix routes from the plugin and pass to createRouter()

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import remixRoutes from "react-router-remix-routes";

const router = createBrowserRouter([remixRoutes]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

This is the virtual module generated by vite to contain the file based route tree import remixRoutes from "react-router-remix-routes";