webpack-react-auto-route-plugin
v1.0.6
Published
auto create react route base on file structure
Downloads
8
Readme
webpack-react-auto-route-plugin
auto create react route base on file structure
how to use
example projects:
// 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(
<BrowserRouter>
<App />
</BrowserRouter>
)
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 viauseParams()
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 viauseParams()