vite-plugin-remix-flat-routes

vite-plugin-remix-flat-routes is a convention-based routing vite plugin that provides Remix-style React file system routing.

When used with keepalive-react-router, it makes it easier to implement route caching and route lazy loading!

Usage

For basic usage, please refer to Getting Started.

After integrating vite-plugin-remix-flat-routes, we only need a few simple steps:

Root Component

We still need to introduce KeepAlive in the Root component and remove Outlet.

// root.tsx
import { KeepAliveOutlet, KeepAliveProvider } from 'keepalive-react-router'

export function Root() {
  return (
    <>
      <Outlet />
      <KeepAliveProvider>
        <KeepAliveOutlet />
      </KeepAliveProvider>
    </>
  )
}

Route Component

In the route component, export keepAlive to enable route caching.

// Route Component

export const handle = { keepAlive: true }

export default function Page() {
  return <div>Page</div>
}

It's that simple.

For more details, please refer to the example.