{"id":22368493,"url":"https://github.com/Ohh-889/react-auto-route","last_synced_at":"2025-07-30T18:32:35.006Z","repository":{"id":250171760,"uuid":"833670221","full_name":"mufeng889/react-auto-route","owner":"mufeng889","description":"A plugin to create router elegantly","archived":false,"fork":false,"pushed_at":"2024-09-09T15:03:56.000Z","size":162,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-16T01:42:16.611Z","etag":null,"topics":["react-router","react-router-dom-v6","reactjs","router","routing"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@ohh-889/react-auto-route","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/mufeng889.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-25T14:05:29.000Z","updated_at":"2024-09-09T15:03:57.000Z","dependencies_parsed_at":"2024-08-08T16:10:33.381Z","dependency_job_id":"0821b1ea-ab60-49c9-adce-925a0cf128b9","html_url":"https://github.com/mufeng889/react-auto-route","commit_stats":null,"previous_names":["mufeng889/react-auto-route"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mufeng889%2Freact-auto-route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mufeng889%2Freact-auto-route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mufeng889%2Freact-auto-route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mufeng889%2Freact-auto-route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mufeng889","download_url":"https://codeload.github.com/mufeng889/react-auto-route/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228168299,"owners_count":17879731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-router","react-router-dom-v6","reactjs","router","routing"],"created_at":"2024-12-04T18:33:30.138Z","updated_at":"2025-07-30T18:32:34.997Z","avatar_url":"https://github.com/mufeng889.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ElegantRouter\n\nEnglish | [中文文档](./README.zh-CN.md)\n\n## Introduction\n\nThis document introduces a **file-based routing plugin inspired by Next.js**, designed specifically for React projects that **do not require Node.js or SSR**. It uses a **convention-over-configuration** approach to automatically generate routes based on the file structure under the `pages` directory.\n\nFor complete documentation, please visit:  \n👉 **[https://react-docs.soybeanjs.cn/routes](https://react-docs.soybeanjs.cn/routes)**\n\n---\n\n## Why This Plugin?\n\n- **No Node.js Required – Perfect for Static Deployments**  \n  Unlike Next.js, which relies on Node.js for SSR (Server-Side Rendering) or SSG (Static Site Generation), this plugin is designed to work in **pure frontend environments**. Just build your project with Vite, Webpack, or any other bundler, and deploy the output to any static hosting platform or CDN.\n\n- **Convention-Based Routing – Files as Routes**  \n  Inspired by Next.js, this plugin eliminates the need for manually maintaining route configuration files. Just follow a simple folder structure under `pages`, and the plugin will automatically generate the correct routing configuration.\n\n- **Optimized for Chinese Frontend Workflow**  \n  In many Chinese frontend projects, it’s common to place pages directly under `src/pages`. This plugin matches that convention and integrates seamlessly with React Router, allowing you to get started without changing your existing habits.\n\n- **Fully Compatible with React Router**  \n  Built on top of [React Router](https://reactrouter.com/), the plugin preserves all native features and APIs. If needed, you can still manually configure or extend routes using standard React Router logic.\n\n---\n\n## Key Features\n\n1. **Auto-Generated Routes Based on File Structure**  \n   No need to manually configure `path`, `element`, or `children`. The plugin scans the `pages` directory and generates a nested route configuration automatically.\n\n2. **Supports Dynamic Routing / Params**  \n   Files named `[id].tsx` or `[...slug].tsx` are treated as dynamic routes. Use `useParams()` from React Router (or utility helpers) to access route parameters inside your components.\n\n3. **Supports Nested Routes**  \n   Example structure:\n   ```\n   pages/\n     user/\n       profile.tsx\n       settings.tsx\n   ```\n   Generates routes like `/user/profile` and `/user/settings` automatically without writing `\u003cRoute\u003e` manually.\n\n4. **Customizable with Hooks and Guards**  \n   Need route guards, auth checks, or data preloading? You can still use `useLocation`, `useNavigate`, `Outlet`, etc., just like in native React Router projects. The plugin doesn't lock you in.\n\n5. **Compatible with Modern Toolchains**  \n   - Works with Vite, Webpack, Parcel, and other build tools.  \n   - Doesn't require a specific framework scaffold. Works with `create-react-app`, custom setups, or enterprise-grade applications.\n\n---\n\n## Installation\n\n\u003e 📘 **Full documentation and advanced usage**:  \n\u003e [https://react-docs.soybeanjs.cn/routes](https://react-docs.soybeanjs.cn/routes)\n\n### 1. Install the Plugin\n\n```bash\n# using npm\nnpm install --save-dev @soybean-react/vite-plugin-react-router\n\n# or yarn/pnpm\nyarn add --dev @soybean-react/vite-plugin-react-router\n```\n\n### 2. Configure in Vite\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport FileBasedRouter from '@soybean-react/vite-plugin-react-router';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    FileBasedRouter({\n      pagesDir: 'src/pages', // Optional: customize your page directory\n      // ... other options\n    })\n  ],\n});\n```\n\n### 3. Create the `pages` Directory\n\nExample file structure:\n```\nsrc/\n  pages/\n    index.tsx          → '/'\n    about.tsx          → '/about'\n    user/\n      index.tsx        → '/user'\n      [id].tsx         → '/user/:id' (dynamic)\n```\n\nThe plugin will automatically convert these into route definitions.\n\n### 4. Run Your App\n\nStart your development server and visit routes like `/`, `/about`, or `/user/123`. The corresponding components should load automatically.\n\n---\n\n## FAQ\n\n### How is this different from React Router’s official file-based plugin?\n\nReact Router also offers [a file-based routing plugin](https://reactrouter.com/en/main/routers/picking-a-router). It’s powerful, but:\n\n- It often assumes Node.js or SSR context (e.g. Remix/Next.js style).\n- Static-only deployments can be harder to configure.\n- Customization is more complex in some cases.\n\nThis plugin **focuses on pure-SPA projects** and static hosting, with routing conventions tailored for teams that prefer simpler file-to-route mapping — especially common in the Chinese frontend ecosystem.\n\n---\n\n### Does it support layouts?\n\nYes! You can implement nested layouts using the folder structure and React Router's `\u003cOutlet\u003e`. You can also define shared `layout.tsx` files in specific directories. For examples, see the [documentation](https://react-docs.soybeanjs.cn/routes#layout-layout-support).\n\n---\n\n### Can I deploy it without any backend or Node.js server?\n\nAbsolutely. The output is a fully static frontend bundle. Deploy it to:\n\n- Netlify, Vercel, GitHub Pages  \n- OSS/CDN platforms (like Alibaba Cloud, Qiniu, etc.)  \n- Any Nginx or static HTTP server\n\nFor correct behavior on page refresh (like `/user/123`), make sure your server is configured to fallback to `index.html`.\n\n---\n\n### Is SSR or SSG supported?\n\nNot directly. This plugin is for client-side rendering (SPA). If your project requires SSR/SSG, consider using Next.js, Remix, or similar frameworks. This plugin is ideal for teams **not using Node or SSR**.\n\n---\n\n## Resources\n\n- 📘 **Full Documentation**: [https://react-docs.soybeanjs.cn/routes](https://react-docs.soybeanjs.cn/routes)  \n  Includes nested layouts, dynamic routing, advanced usage, and more.\n- 💬 Found a bug or want a new feature? Feel free to submit an [Issue/PR](https://github.com/soybeanjs/soybeanjs/issues) on GitHub.\n\n---\n\nBy using this **Next.js-style file-based router for React**, you can **achieve automatic route generation** with minimal configuration, full React Router compatibility, and flexible static deployment.\n\nIf you're looking for a clean, SPA-friendly alternative to manual routing, this plugin could be the perfect fit.\n\nCheck out the full docs here 👉 [https://react-docs.soybeanjs.cn/routes](https://react-docs.soybeanjs.cn/routes)  \nHappy coding! ✨","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOhh-889%2Freact-auto-route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOhh-889%2Freact-auto-route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOhh-889%2Freact-auto-route/lists"}