https://github.com/postor/webpack-react-auto-route-plugin
This plugin can automatically create react routes config for react-router base on file structure of page source files
https://github.com/postor/webpack-react-auto-route-plugin
Last synced: 3 months ago
JSON representation
This plugin can automatically create react routes config for react-router base on file structure of page source files
- Host: GitHub
- URL: https://github.com/postor/webpack-react-auto-route-plugin
- Owner: postor
- License: mit
- Created: 2023-09-23T08:17:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-09T08:35:29.000Z (about 1 year ago)
- Last Synced: 2025-01-25T17:45:43.050Z (4 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/webpack-react-auto-route-plugin
- Size: 14.6 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-react-auto-route-plugin
This plugin can automatically create react routes config for react-router base on file structure of page source files
## how to use
example projects:
- [JavaScript version](https://github.com/postor/webpack-react-auto-route-plugin-example) [online preview](https://githubbox.com/postor/webpack-react-auto-route-plugin-example)
- [TypeScript version](https://github.com/postor/webpack-react-auto-route-plugin-ts-example) [online preview](https://githubbox.com/postor/webpack-react-auto-route-plugin-ts-example )
```
// webpack.config.js
const AutoRoutePlugin = require('react-autot-route-plugin')
module.exports = {
...
plugins:[
new AutoRoutePlugin({
root: './src/pages', //route base on structure of './src/pages'
skip: /^\$/, // ignore files starts with '$'
extensions: ['.ts','.tsx','.js','.jsx','.mjs','.cjs'], // only route file with these extensions
getRoutesFile: /get-routes\.js/, //
})
]
}
```
```
// src/get-routes.js
export default ()=>[]
```
```
// src/app.tsx
import { createRoot } from "react-dom/client"
import { BrowserRouter, useRoutes } from "react-router-dom"
import getRoutes from 'get-routes'
let routes = getRoutes()
console.log(routes)
const App = () => {
return useRoutes(routes)
}
createRoot(document.getElementById("react-root")).render(
)
```
## name rules
files
- `index` = current route, e.g. `/index.js` => `/`
- `xx` = named route, e.g. `/about.js` => `/about`
- `_layout` = all file under same folder, share appear in it's
- `[]` = * route, e.g. `/[].js` => `/*`
- `xx[]` = xx/* route, e.g. `/admin[].js` => `/admin/*`
- [xx] = paramed route, e.g. `/post/[id].js` => `/post/*`, and you can get param via `useParams()`
folders
- `xx` = named route, e.g. `/about/team.js` => `/about/team`
- [xx] = paramed route, e.g. `/post/[id]/comments.js` => `/post/*/comments`, and you can get param via `useParams()`