{"id":14977652,"url":"https://github.com/shack-js/auto-routes-loader","last_synced_at":"2026-03-04T08:31:10.750Z","repository":{"id":61477719,"uuid":"550228471","full_name":"shack-js/auto-routes-loader","owner":"shack-js","description":"loader that can auto generate routes for react","archived":false,"fork":false,"pushed_at":"2022-11-28T00:37:49.000Z","size":18,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-20T04:44:10.532Z","etag":null,"topics":["react","react-router"],"latest_commit_sha":null,"homepage":"https://studio.youtube.com/video/bWEoack39jY/edit","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shack-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-12T12:09:34.000Z","updated_at":"2023-05-16T09:03:49.000Z","dependencies_parsed_at":"2022-10-19T22:15:19.453Z","dependency_job_id":null,"html_url":"https://github.com/shack-js/auto-routes-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shack-js/auto-routes-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shack-js%2Fauto-routes-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shack-js%2Fauto-routes-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shack-js%2Fauto-routes-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shack-js%2Fauto-routes-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shack-js","download_url":"https://codeload.github.com/shack-js/auto-routes-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shack-js%2Fauto-routes-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30076849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T08:01:56.766Z","status":"ssl_error","status_checked_at":"2026-03-04T08:00:42.919Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router"],"created_at":"2024-09-24T13:56:04.973Z","updated_at":"2026-03-04T08:31:10.703Z","avatar_url":"https://github.com/shack-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @shack-js/auto-routes-loader\r\nloader that can auto generate routes for react and react-router, inspired by Next.JS\r\n\r\n给 react + react-router 项目自动生成路由信息的 loader，灵感来源于 Next.JS\r\n\r\n## basic usage | 基本使用\r\n\r\nput `page` component files inside folder `pages`, each file has default export \r\n\r\n把 `页面` 组件文件放到 `pages` 文件夹，每个文件都使用 default 导出\r\n\r\n### use cli | 使用命令行\r\n\r\n`npx @shack-js/auto-routes-loader \u003cpages-folder\u003e \u003ctarget-file\u003e`\r\n\r\n```\r\nnpx @shack-js/auto-routes-loader src/pages src/test-get-routes.js\r\n\r\n```\r\n\r\nand then import default function from the file and it will return routes\r\n\r\n然后从生成文件引入导出的函数，运行生成路由信息并使用\r\n\r\n```\r\n...\r\n\r\nimport { useRoutes } from \"react-router-dom\"\r\nimport getRoutes from './test-get-routes'\r\nlet routes = getRoutes()\r\nconst App = () =\u003e {\r\n  return useRoutes(routes)\r\n}\r\n...\r\n```\r\n\r\n### use loader | 以 webpack loader 方式使用\r\n\r\n```\r\nnpm i @shack-js/auto-routes-loader -D\r\n```\r\n\r\nin `webpack.config.js`\r\n```\r\nmodule.exports = {\r\n  module:{\r\n    rules:[\r\n      ...,\r\n      {\r\n        test: /\\.m?js$/,\r\n        /* important: shack-get-routes needs to be compiled if you target more browsers */\r\n        exclude: /(node_modules|bower_components).*(?\u003c!shack-get-routes\\.js)$/, \r\n        use: {\r\n          loader: 'babel-loader',\r\n          options: {\r\n            ...\r\n          }\r\n        }\r\n      },\r\n      {\r\n        test: /shack-get-routes\\.js$/,\r\n        use: {\r\n          loader: '@shack-js/auto-routes-loader',\r\n        }\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\nin your code\r\n\r\n```\r\nimport { createRoot } from 'react-dom/client'\r\nimport {  BrowserRouter, useRoutes } from \"react-router-dom\"\r\n// ** import this function and **\r\nimport getRoutes from '@shack-js/auto-routes-loader/dist/shack-get-routes'\r\nimport { Suspense } from 'react'\r\n...\r\n\r\n// ** auto get routes you can use **\r\nlet routes = getRoutes()\r\n\r\nconst App = () =\u003e {\r\n  return useRoutes(routes)\r\n}\r\n\r\n// ** pages are lazy loaded, so remember to wrap with `Suspense` **\r\ncreateRoot(el).render(\u003cBrowserRouter\u003e\r\n  \u003cSuspense fallback={'page loading...'}\u003e\r\n    \u003cApp /\u003e\r\n  \u003c/Suspense\u003e\r\n\u003c/BrowserRouter\u003e)\r\n\r\n```\r\n\r\n## details | 细节 \r\n\r\nchange pages folder: use `folder` option in webpack config\r\n\r\n调整存放页面的文件夹路径： 修改 loader 的 `folder` 参数\r\n\r\n```\r\n      {\r\n        test: /\\.m?js$/,\r\n        /* important: shack-get-routes needs to be compiled */\r\n        /* 重要: shack-get-routes 需要走 babel */\r\n        exclude: /(node_modules|bower_components).*(?\u003c!shack-get-routes\\.js)$/, \r\n        use: {\r\n          loader: 'babel-loader',\r\n          options: {\r\n            presets: ['@babel/preset-env', '@babel/preset-react']\r\n          }\r\n        }\r\n      },\r\n      /* use this loader */\r\n      {\r\n        test: /shack-get-routes\\.js$/,\r\n        use: {\r\n          loader: '@shack-js/auto-routes-loader',\r\n          options: {\r\n            folder: 'src/pages'\r\n          }\r\n        }\r\n      }\r\n```\r\n\r\nuse layouts: put a `_layout.js` file in a folder, all files under the folder will share the layout, child pages shall appear where `Outlet` locates, example code:\r\n\r\n使用模板： 在 `_layout.js` 中导出模板，模板中使用 `Outlet` 指定页面内容的位置\r\n\r\n```\r\n// pages/_layout.js\r\n\r\nimport { Link, Outlet, useLocation } from \"react-router-dom\"\r\n\r\nexport default ({ }) =\u003e {\r\n  let location = useLocation()\r\n  if (location.pathname.startsWith('/login')) return \u003cOutlet /\u003e\r\n  return \u003cdiv\u003e\r\n    \u003cp\u003elayout for all pages except login\u003c/p\u003e\r\n    \u003cdiv\u003e \u003cOutlet /\u003e \u003c/div\u003e\r\n  \u003c/div\u003e\r\n}\r\n```\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshack-js%2Fauto-routes-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshack-js%2Fauto-routes-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshack-js%2Fauto-routes-loader/lists"}