https://github.com/ws-rush/unplugin-remix-router
This plugin streamlines React Router's routing setup with automatic file-based routing, requiring React Router 6.4+.
https://github.com/ws-rush/unplugin-remix-router
react react-router remix
Last synced: 8 days ago
JSON representation
This plugin streamlines React Router's routing setup with automatic file-based routing, requiring React Router 6.4+.
- Host: GitHub
- URL: https://github.com/ws-rush/unplugin-remix-router
- Owner: ws-rush
- License: mit
- Created: 2024-02-09T12:53:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-04T14:56:34.000Z (16 days ago)
- Last Synced: 2025-04-09T16:54:55.125Z (10 days ago)
- Topics: react, react-router, remix
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-remix-router
- Size: 305 KB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - unplugin-remix-router - Generates a React Router file, that depends on Remix v2 file-based router convention. (Plugins / React)
- awesome-vite - unplugin-remix-router - Generates a React Router file, that depends on Remix v2 file-based router convention. (Plugins / React)
README
[](https://stand-with-palestine.org)
# unplugin-remix-router
`unplugin-remix-router` generates a `react-router` file that depends on [remix v2](https://remix.run/docs/en/main/file-conventions/routes) file router convention.
>For more information, please refer to the React Router [documentation](https://reactrouter.com/en/main). Note that it follows the Remix file convention.
## Install
```bash
pnpm i -D unplugin-remix-router
```
Vite
```ts
// vite.config.ts
import remixRouter from 'unplugin-remix-router/vite'
export default defineConfig({
plugins: [
remixRouter({ /* options */ }),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import remixRouter from 'unplugin-remix-router/rollup'
export default {
plugins: [
remixRouter({ /* options */ }),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-remix-router/webpack')({ /* options */ })
]
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import remixRouter from 'unplugin-remix-router/esbuild'
build({
plugins: [remixRouter()],
})
```
## Usage
### Init
```js
// main.tsx
import { routes } from 'virtual:routes'
export const router = createBrowserRouter(routes)
createRoot(document.getElementById('app')!).render(
,
)
```
### Project Structure
for deep understanding how file based routing work, see examples in remix v2 [file router convention](https://remix.run/docs/en/main/file-conventions/routes)
```sh
- app/
- routes/
- _index.tsx
- about.tsx
- countries.tsx # layout
- countries.yemen/route.tsx
- countries.wusab/route.tsx
- routes.tsx # `index.html` and `routes.jsx` are the project starter point
```
### Route Content
every route can export one of following, see [React Router](https://reactrouter.com/en/main) for more.
use example in `playground/` as starter kit, or [reactive](https://github.com/ws-rush/reactive) template. also there is a version of official [react-router-tutorial](https://github.com/ws-rush/react-router-tutorial) with unplugin-remix-router
```js
export const caseSensitive = false
export const id = 'main-page'
// every `loader` should exported by name `clientLoader`
export async function clientLoader() {}
// every `action` should exported by name `clientAction`
export async function clientAction() {}
// every `middleware` should exported by name `clientMiddleware`
export const clientMiddleware = [/* put middlewares here */]
// every component should exported as `default` no matter what is the name
export default function Component() {
return
Hello Remix Router!
}
export function ErrorBoundry() {
return
Something went wrong
}
export function shouldRevalidate({ currentUrl }) {
return currentUrl.pathname === '/meal-plans/new'
}
export const handler = {
attachedData: {
key: 'value'
}
}
```
## Typescript
add following to `vite-env.d.ts`
```ts
declare module 'virtual:routes' {
export const routes: any // Adjust the type accordingly based on your routes structure
}
```
## Feauters
### Lazy routes
By default, Vite and other JavaScript bundlers package all project files into a single file. While this is often beneficial, it can result in slower initial load times for the project. To address this, you can implement lazy loading for routes, allowing the bundler to split the code for each route into separate files. This approach can improve the performance of the initial load.
`unplugin-remix-router` do it out-of-box, for fine-grained control add option `remixRouter({ lazy: 'suffix' })`, then simply add .lazy to route names (note: this applies only to routes, not components). Consequently, the project structure will look like this:
```sh
- app/
- routes/
- _index.tsx
- about.tsx
- countries.tsx
- countries.yemen/route.tsx
- countries.wusab/route.tsx
- main.tsx
```
### Access router methods globally
Most React Router commands are accessed through hooks, such as `const navigate = useNavigate()`. However, there are times when you need to access these functions within state manager actions. By defining a global router in main.jsx, you can access many of these functions from anywhere in your application. Here’s how you can do it:
```js
// main.jsx
import { createBrowserRouter } from 'react-router'
import { createRoot } from 'react-dom/client'
export const router = createBrowser(/* ... */)
createRoot(/* ... */)
// Now you can import `router` from any file and use its methods
// For example, to navigate programmatically:
router.navigate('/login')
```