https://github.com/shack-js/auto-routes-loader

loader that can auto generate routes for react
https://github.com/shack-js/auto-routes-loader

react react-router

Last synced: 5 days ago
JSON representation

loader that can auto generate routes for react

• Host: GitHub
• URL: https://github.com/shack-js/auto-routes-loader
• Owner: shack-js
• License: mit
• Created: 2022-10-12T12:09:34.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-28T00:37:49.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T05:20:57.050Z (7 months ago)
• Topics: react, react-router
• Language: TypeScript
• Homepage: https://studio.youtube.com/video/bWEoack39jY/edit
• Size: 17.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @shack-js/auto-routes-loader

loader that can auto generate routes for react and react-router, inspired by Next.JS

给 react + react-router 项目自动生成路由信息的 loader，灵感来源于 Next.JS

## basic usage | 基本使用

put `page` component files inside folder `pages`, each file has default export 

把 `页面` 组件文件放到 `pages` 文件夹，每个文件都使用 default 导出

### use cli | 使用命令行

`npx @shack-js/auto-routes-loader  `

```

npx @shack-js/auto-routes-loader src/pages src/test-get-routes.js

```

and then import default function from the file and it will return routes

然后从生成文件引入导出的函数，运行生成路由信息并使用

```

...

import { useRoutes } from "react-router-dom"

import getRoutes from './test-get-routes'

let routes = getRoutes()

const App = () => {

  return useRoutes(routes)

}

...

```

### use loader | 以 webpack loader 方式使用

```

npm i @shack-js/auto-routes-loader -D

```

in `webpack.config.js`

```

module.exports = {

  module:{

    rules:[

      ...,

      {

        test: /\.m?js$/,

        /* important: shack-get-routes needs to be compiled if you target more browsers */

        exclude: /(node_modules|bower_components).*(? {

  return useRoutes(routes)

}

// ** pages are lazy loaded, so remember to wrap with `Suspense` **

createRoot(el).render(

  

    

  

)

```

## details | 细节 

change pages folder: use `folder` option in webpack config

调整存放页面的文件夹路径： 修改 loader 的 `folder` 参数

```

      {

        test: /\.m?js$/,

        /* important: shack-get-routes needs to be compiled */

        /* 重要: shack-get-routes 需要走 babel */

        exclude: /(node_modules|bower_components).*(? {

  let location = useLocation()

  if (location.pathname.startsWith('/login')) return 

  return 


    
layout for all pages except login

    
  

  

}

```