unplugin-remix-router

unplugin-remix-router generates a react-router file that depends on remix v2 file router convention, see reactive template

For more information, please refer to the React Router documentation. Note that it follows the Remix file convention.

Install

pnpm i -D unplugin-remix-router

Vite

// vite.config.ts
import remixRouter from 'unplugin-remixRouter/vite'

export default defineConfig({
  plugins: [
    remixRouter({ /* options */ }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import remixRouter from 'unplugin-remix-router/rollup'

export default {
  plugins: [
    remixRouter({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-remix-router/webpack')({ /* options */ })
  ]
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import remixRouter from 'unplugin-remix-router/esbuild'

build({
  plugins: [remixRouter()],
})

Usage

Project Structure

we can make lazy routes by adding .lazy to route file.

- app/
  - routes/
    - _index.tsx
    - about.lazy.tsx # lazy route
    - countries.tsx # layout
    - countries.yemen/route.tsx
    - countries.wusab/route.lazy.tsx # also lazy route
  - root.tsx # layout, every layout should use <Outlet >
  - main.tsx # init route, see #Init

Init

// main.tsx
import { routes } from 'virtual:routes'

const router = createBrowserRouter(routes)
createRoot(document.getElementById('app')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
)

Route Content

every route can export one of following, see React Router for more:

export const caseSensitive = false

export const id = 'main-page'

export async function loader() {}

export async function action() {}

// every component should exported without default with name `Component`
export function Component() {
  return <h1>Hello Remix Router!</h1>
}

export function ErrorBoundry() {
  return <h1>Something went wrong</h1>
}

export function shouldRevalidate({ currentUrl }) {
  return currentUrl.pathname === '/meal-plans/new'
}

export const handler = {
  attachedData: {
    key: 'value'
  }
}

Typescript

add following to vite-env.d.ts

declare module 'virtual:routes' {
  export const routes: any // Adjust the type accordingly based on your routes structure
}