vite-react-routes

Rename Starting from version 0.3.0, the package name changed from react-file-based-routes to vite-react-routes.

Installation

npm install vite-react-routes

Core characteristics

• Easy React Router generating like RemixJS, NextJS
• Customizable support for React Router
• Written in Typescript
• Required Vite

File Base

• _app.jsx is for HTML header
• layout.jsx wrap pages in the same or lower folder
• [id].tsx is for detail page
• The keyword "lazy_" is for dynamic importing
• Return 404 page when a leaf route exists but there is no index of the current route

pages
├── _404.tsx
├── _app.tsx
├── main
│   ├── [id].tsx            # /main/:id
│   ├── layout.tsx          #
│   ├── lazy_index.tsx      # /main
│   └── sub
│       ├── [id].tsx        # /main/sub/:id
│       ├── third
│       │   └── index.tsx   # /main/sub/third
│       ├── index.tsx       # /main/sub
│       └── layout.tsx
├── index.tsx               # /
├── main.tsx                # /main
└── sub.tsx                 # /sub

// Example for main/index page
return (
   <MainLayout>
      <Main />
   </MainLayout>
);

// Example for sub/index page
return (
   <MainLayout>
      <SubLayout>
         <Sub />
      </SubLayout>
   </MainLayout>
);

QuickStart

import { createBrowserRouter } from 'react-router-dom';
import { routes } from 'vite-react-routes';




const router = createBrowserRouter(routes());

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <RouterProvider router={router} />
);

Default routes

// _app.jsx & _404.jsx file is required

const App = _app.jsx;
const NotFound = _404.jsx;
const fallback = { path: '*', element: <NotFound /> };
const routes = [
   {
      element: <_app />,
      errorElement: <ErrorBoundary />,
      loader: _app?.Loader,
      children: [...pages, fallback],
   },
];

Use with React-Query

import { createBrowserRouter } from 'react-router-dom';
import { createRoutes } from 'vite-react-routes';


const createdRoutes = createRoutes(module => {
    return {
        loader: (arg) => {
            return (
                module?.Loader?.({
                    ...arg,
                    context: { queryClient },
                }) || {}
            );
        },
    };
});
const routes = [{ element: <App />, children: testRoutes }];

const router = createBrowserRouter(routes);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <RouterProvider router={router} />
);

License

Vite React Routes is MIT licensed.