{"id":20617659,"url":"https://github.com/mtt-merz/route-gen","last_synced_at":"2026-04-20T19:04:36.972Z","repository":{"id":227880088,"uuid":"762719906","full_name":"mtt-merz/route-gen","owner":"mtt-merz","description":"Streamline the routes definition process in React.","archived":false,"fork":false,"pushed_at":"2024-03-21T12:37:10.000Z","size":76,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-18T18:47:33.943Z","etag":null,"topics":["codegen","react","react-router"],"latest_commit_sha":null,"homepage":"","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/mtt-merz.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-24T14:02:13.000Z","updated_at":"2024-03-16T22:17:56.000Z","dependencies_parsed_at":"2024-03-17T00:40:31.659Z","dependency_job_id":"f7143ef4-c67c-4ed0-8510-99187c4fdca3","html_url":"https://github.com/mtt-merz/route-gen","commit_stats":null,"previous_names":["mtt-merz/route-gen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtt-merz%2Froute-gen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtt-merz%2Froute-gen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtt-merz%2Froute-gen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtt-merz%2Froute-gen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mtt-merz","download_url":"https://codeload.github.com/mtt-merz/route-gen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242277251,"owners_count":20101530,"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":["codegen","react","react-router"],"created_at":"2024-11-16T12:05:15.386Z","updated_at":"2026-04-20T19:04:36.941Z","avatar_url":"https://github.com/mtt-merz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Route-Gen\n\nRoute-Gen is a Node.js package designed to streamline the routes definition process in React.\nIt automatically generates routes for [React Router](https://reactrouter.com/en/main) (v6), depending on the file\nstructure of your project.\n\n## Installation\n\nYou can easily install Route-Gen with `npm`:\n\n```bash\nnpm install --save-dev @m-mrz/route-gen\n```\n\n## Usage\n\nOnce Route-Gen is installed, you can trigger the routes generation by running the following command:\n\n```bash\nroute-gen\n```\n\nThis command will analyze the project structure (see [Project Structure](#project-structure)) and generate routes accordingly.\nAfter that, wrap your project entrypoint in a `RouteProvider` tag, providing the generated routes as follows.\n\n```typescript jsx\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport {\n    createBrowserRouter,\n    RouterProvider,\n} from \"react-router-dom\";\n\nimport { routes } from \"../routes\"\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n    \u003cRouterProvider router={router}/\u003e\n);\n```\n\n## Project Structure\n\nRoute-Gen relies on a specific project structure to generate routes correctly. The structure is highly inspired by\nthe [App Router](https://nextjs.org/docs/getting-started/project-structure) of Next.js.\n\n###  Use folders to represents routes\n\nAll pages should be put into a parent folder called `pages`.\nHere, the folder structure will mirror the generated routes.\nFor instance, if we plan to have two routes `/books` and `/books/:bookID` we should create the following structure.\n\n```\npages/\n  └─ books/\n      └─ :bookID/\n```\n\n#### Static routes\n\n**Static** routes are the classic routes, like the `/books` one in the previous example, where the route name is fixed in time.\nIn this case, the folder name exactly mirror the name of the generated route.\n\n#### Dynamic routes\n\nOn the other hand, **dynamic** routes are routes that can have a different value depending on the rendered element.\nFollowing the React Router convention, their folder name should have the `:` char as prefix, like the `/books/:bookID` route in the previous example.\n\n### Use files to represent elements \n\nEach rendered route contains a bunch of elements with a specific meaning\n\n| Element  | Description                                                                  | Required |\n|----------|------------------------------------------------------------------------------|----------|\n| `page`   | The content of the route view. It should be present in every accepted route. | False    |\n| `layout` | The layout wrapping the route page, if any, and its children routes.         | False    |\n\nEach element should be put in a different file, and \u003cu\u003ethe name of the file should mirror the name of the component\u003c/u\u003e.\nTo make the generator understand that a file represents a specific element we should end its name with the element name.\n\nFor instance, consider the `/books` route of the previous example, and imagine it has both page and layout components.\nThe resulting structure should be the following.\n\n```\npages/\n  └─ books/\n      ├─ :bookID/...\n      ├─ BooksPage.tsx\n      └─ BooksLayout.tsx\n```\n\n### Utility folders\n\nA common need of React developers is to split a big component in several sub-components, for better readability and maintainability, that are usually put inside a `components` folder.\n\nSince in our convention each folder would represent a different route, we add the concept of **utility folders**, that is folders not considered in the generated routes tree.\nTo differentiate them from traditional ones, their name should have the `_` char as prefix.\n\nBy enriching the previous examples, the resulting structure is something like that.\n\n```\npages/\n  └─ books/\n      ├─ _components/...\n      ├─ :bookID/...\n      ├─ BooksPage.tsx\n      └─ BooksLayout.tsx\n```\n\n### Structure Example\n\nHere an example of the resulting structure.\n\n```\npages/\n  ├─ items/\n  │   └─ :itemID/\n  │       ├─ _components/...\n  │       ├─ _graphql/...\n  │       └─ RootPage.tsx\n  ├─ menus/\n  │   └─ :menuID/\n  │       ├─ _components/...\n  │       ├─ _graphql/...\n  │       └─ RootPage.tsx\n  └─ merchants/\n      ├─ :merchantID/\n      │   ├─ _components/...\n      │   ├─ _graphql/...\n      │   └─ RootPage.tsx\n      ├─ menus/\n      │   ├─ _components/...\n      │   ├─ _graphql/...\n      │   └─ RootPage.tsx\n      └─ ItemDetailLayout.tsx\n```\n\n## Configuration\n\nTo customize Route-Gen's behavior, create a `route-gen.json` file in the root of your project.\nHere, you can specify the root of the `pages` directory, which serves as the starting point for generated routes and\nwhere the generated routes will be placed.\n\nHere's the default configuration:\n\n```json\n{\n  \"root\": \"./src\"\n}\n```\n\n## License\n\nRoute-Gen is [MIT Licensed](./LICENSE).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtt-merz%2Froute-gen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtt-merz%2Froute-gen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtt-merz%2Froute-gen/lists"}