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: 8 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-08T15:05:13.000Z (almost 3 years ago)
• Last Synced: 2024-10-05T04:21:54.949Z (about 1 month ago)
• Topics: vite-plugin, vite-plugin-react
• Language: TypeScript
• Homepage:
• Size: 168 KB
• Stars: 0
• 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

[![NPM version](https://img.shields.io/npm/v/vite-plugin-react-routes?color=a1b858&label=)](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)