Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 months 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 (12 months ago)
- Default Branch: main
- Last Pushed: 2024-08-13T11:12:29.000Z (5 months ago)
- Last Synced: 2024-08-13T14:17:19.352Z (5 months ago)
- Topics: react, react-router, remix
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-remix-router
- Size: 172 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- 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, see [reactive](https://github.com/ws-rush/reactive) template
>For more information, please refer to the React Router [documentation](https://reactrouter.com/en/main). Note that it follows the Remix file convention.
>**Important**
although react-router use names `loader`, `action`, `Component` these parts should exported from file as `clientLoader`, `clientAction`, `default`, see example below. use these name for future react-router releases.
## 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
### Project Structure
we can make lazy routes by adding `.lazy` to route file.
```sh
- 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
- main.tsx # init route, see #Init
```
### Init
```js
// main.tsx
import { routes } from 'virtual:routes'
const router = createBrowserRouter(routes)
createRoot(document.getElementById('app')!).render(
,
)
```
### Route Content
every route can export one of following, see [React Router](https://reactrouter.com/en/main) for more:
```js
export const caseSensitive = false
export const id = 'main-page'
// every `loader` should exported by name `clientLoader` from v2
export async function clientLoader() {}
// every `action` should exported by name `clientAction` from v2
export async function clientAction() {}
// every component should exported as `default` no matter what is the name from v2
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
}
```