https://github.com/jtsang4/vite-plugin-react-routes
A vite plugin support setup React Router by JSON config file.
https://github.com/jtsang4/vite-plugin-react-routes
vite-plugin vite-plugin-react
Last synced: 15 days ago
JSON representation
A vite plugin support setup React Router by JSON config file.
- Host: GitHub
- URL: https://github.com/jtsang4/vite-plugin-react-routes
- Owner: jtsang4
- License: mit
- Created: 2022-02-06T21:59:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-08T15:05:13.000Z (over 4 years ago)
- Last Synced: 2025-09-10T14:52:33.309Z (9 months ago)
- Topics: vite-plugin, vite-plugin-react
- Language: TypeScript
- Homepage:
- Size: 168 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-react-routes
[](https://www.npmjs.com/package/vite-plugin-react-routes)
> Inspired by [vite-plugin-react-router](https://github.com/morelearn1990/vite-plugin-react-router)
A vite plugin support setup React Router by JSON config file.
## Install
```bash
pnpm add vite-plugin-react-routes
// or
npm install vite-plugin-react-routes --save
// or
yarn add vite-plugin-react-routes
```
## Usage
**1. Config in vite config file and config type reference**
```ts
// vitee.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import routes from 'vite-plugin-react-routes'
export default defineConfig({
plugins: [react(), routes()],
})
```
```ts
// vite-env.d.ts
///
```
**2. Add `routes.json` file**
Add `routes.json` file in your workspace root.
```json
[
{
"path": "/",
"layout": "layout", // will use 'src/layout' component as wrapper
"children": [
{
"path": "/",
"component": "pages/a" // will use 'src/pages/a' as comopnent corresponding to path '/'
},
{
"path": "a",
"component": "pages/a" // will use 'src/pages/a' as comopnent corresponding to path '/a'
},
{
"path": "b",
"component": "pages/b" // will use 'src/pages/b' as comopnent corresponding to path '/b'
}
]
}
]
```
**3. Import in App root**
```tsx
import ReactDOM from 'react-dom'
import Router from 'virtual:generated-react-router'
ReactDOM.render(, document.getElementById('root'))
```
## API
This is API for `virtual:generated-react-router`:
### mode
* type: `'browser' | 'hash'`
use `` or ``
## License
[MIT](./LICENSE) License © 2022 [James Tsang](https://github.com/jtsang4)