{"id":15043468,"url":"https://github.com/alecell/smart-routes","last_synced_at":"2025-04-14T20:52:38.983Z","repository":{"id":57363897,"uuid":"288291409","full_name":"Alecell/smart-routes","owner":"Alecell","description":"A framework agnostic simple and lightweight way to create and reuse routes on web apps.","archived":false,"fork":false,"pushed_at":"2024-05-01T21:06:09.000Z","size":13,"stargazers_count":11,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-07-18T14:00:25.677Z","etag":null,"topics":["angular","angularjs","prs","react-router","reuse-routes","vue-router"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/smart-routes","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alecell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2020-08-17T21:36:50.000Z","updated_at":"2024-05-01T20:22:28.000Z","dependencies_parsed_at":"2024-09-21T02:08:16.372Z","dependency_job_id":"82e309aa-f3d2-405e-980a-db25eb656ba8","html_url":"https://github.com/Alecell/smart-routes","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.08333333333333337,"last_synced_commit":"8d067a82cea1df74112b5bd56db7f0e128a6ab6e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alecell%2Fsmart-routes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alecell%2Fsmart-routes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alecell%2Fsmart-routes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alecell%2Fsmart-routes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alecell","download_url":"https://codeload.github.com/Alecell/smart-routes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248960988,"owners_count":21189990,"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":["angular","angularjs","prs","react-router","reuse-routes","vue-router"],"created_at":"2024-09-24T20:49:06.112Z","updated_at":"2025-04-14T20:52:38.959Z","avatar_url":"https://github.com/Alecell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smart Routes ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg \"PRs Welcome\")\n\n\nA framework agnostic simple and lightweight way to create and reuse routes on web apps.\n\n**IMPORTANT:** This **isn't** a router like `vue-router` or `react-router`. Smart Routes just brings a simplified and safer way to declare and reuse routes.\n\n\n## Motivation\nAs our web application grow, its amount of routes grows too. Apps with 20, 30, 40 and more routes variations can be really messy to deal with, even more when we add dynamic routing. \n\nThat kind of thing came with some problems like:\n* Links leading to unexpected route;\n* Send parameter to a not parameterized route;\n* Non intelligible routes names;\n* Work around to apply parameters;\n* Forget to replace a link when an entirely route needs to be changed.\n\nA routes single source of truth allows to better organize your routes, better use them and prevent routing mistakes. \n\n\n## Install\n### npm\n```\nnpm install smart-routes\n```\n### yarn\n```\nyarn add smart-routes\n```\n\n\n## Basic usage\nImport `Route` from the package\n```\nimport { Route } from 'smart-routes';\n```\n\nCrete your route\n\n```js\nconst routes = {\n  user: new Route('/user')\n}\n```\n\nDefining route \n\n```jsx\n\u003cRoute path={routes.user().path} component={SomeComponent} /\u003e\n```\n\nLink like this\n\n```jsx\n// Leads to /user\n\u003cLink to={routes.user().path}\u003e \n  // ...\n\u003c/Link\u003e\n```\n\n\n## Route parameters\n```js\nconst routes = {\n  user: new Route('/user', ':userId')\n}\n```\n\n```jsx\n//  `routes.user().path` leads to /user/:userId\n\u003cRoute path={routes.user().path} component={SomeComponent} /\u003e\n```\n\n```jsx\nconst someUserId = 123;\n\n// Leads to /user/123\n\u003cLink to={routes.user(someUserId).exec()}\u003e\n  // ...\n\u003c/Link\u003e\n```\n\n\n## Subroutes\n```js\nconst routes = {\n  user: new Route('/user', {\n    info: new Route('/info')\n  })\n}\n```\n\n```jsx\n\u003cRoute path={routes.user().info().path} component={SomeComponent} /\u003e\n```\n\n```jsx\n// Leads to /user/info\n\u003cLink to={routes.user().info().path}\u003e \n  // ...\n\u003c/Link\u003e\n```\n\n\n## Complete example\n```js\nconst routes = {\n  user: new Route('user', ':userId', {\n    info: new Route('info'),\n    cart: new Route('cart', {\n      item: new Route('item', ':itemId')\n    })\n  })\n}\n```\n\n```jsx\n//  /user/:userId\n\u003cRoute path={routes.user().path} component={SomeComponent} /\u003e\n\n//  /user/:userId/info\n\u003cRoute path={routes.user().info().path} component={SomeComponent1} /\u003e\n\n//  /user/:userId/cart\n\u003cRoute path={routes.user().cart().path} component={SomeComponent2} /\u003e\n\n//  /user/:userId/cart/item/:itemId\n\u003cRoute path={routes.user().cart().item().path} component={SomeComponent3} /\u003e\n```\n\n```jsx\n//  Leads to /user/123\n\u003cLink to={routes.user(123).path}\u003e \n  ...\n\u003c/Link\u003e\n\n//  Leads to /user/123/info\n\u003cLink to={routes.user(123).info().path}\u003e \n  ...\n\u003c/Link\u003e\n\n//  Leads to /user/123/cart\n\u003cLink to={routes.user(123).cart().path}\u003e \n  ...\n\u003c/Link\u003e\n\n// Leads to /user/123/cart/item/456\n\u003cLink to={routes.user(123).cart().item(456).path}\u003e \n  ...\n\u003c/Link\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falecell%2Fsmart-routes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falecell%2Fsmart-routes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falecell%2Fsmart-routes/lists"}