{"id":19401372,"url":"https://github.com/onthegosystems/micro_router","last_synced_at":"2026-06-14T08:33:03.623Z","repository":{"id":57164617,"uuid":"179526585","full_name":"OnTheGoSystems/micro_router","owner":"OnTheGoSystems","description":"Simple pure JS router","archived":false,"fork":false,"pushed_at":"2019-04-09T09:21:33.000Z","size":97,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-07T16:34:52.200Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/OnTheGoSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-04T15:33:10.000Z","updated_at":"2020-09-08T08:51:15.000Z","dependencies_parsed_at":"2022-09-12T17:11:41.997Z","dependency_job_id":null,"html_url":"https://github.com/OnTheGoSystems/micro_router","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OnTheGoSystems%2Fmicro_router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OnTheGoSystems","download_url":"https://codeload.github.com/OnTheGoSystems/micro_router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240576485,"owners_count":19823293,"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":[],"created_at":"2024-11-10T11:18:15.010Z","updated_at":"2025-11-18T08:03:55.539Z","avatar_url":"https://github.com/OnTheGoSystems.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MicroRouter\n## Simple and minimalistic pure JS router for clientside\n\n# Usage example\n\n```js\nimport { MicroRouter } from \"@tarvit/micro_router\";\n\n// define router\nconst MyRouter = new MicroRouter('state_view_router_state', MicroRouter.modes.windowHash);\n\n// draw your routes\nMyRouter.setDefaultRoute('notification/example');\nMyRouter.addRoute('dashboard', StateDashboard); // StateDashboard is your ReactComponent.\nMyRouter.addRoute('notification/:text', StateNotification); // StateNotification is another your ReactComponent.\n\n// create nav helpers (optional)\nMyRouter.nav = {\n  toDashboard: () =\u003e {\n    MyRouter.navigate({ view: StateDashboard});\n  },\n  toNotification: (message) =\u003e {\n    MyRouter.navigate({ view: StateNotification, text: message})\n  }\n};\n\n\n// create root component\nimport React, { Component } from 'react';\n\nexport default class AppRoot extends Component {\n  constructor(props) {\n    super(props);\n    \n    // enable automtical route resolving\n    MyRouter.bindToWindowHash();\n\n    // define default state\n    this.state  = {\n      viewState: MyRouter.currentState()\n    };\n\n    // subscribe to updates\n    MyRouter.afterNavigate(()=\u003e{\n      this.setState({\n        viewState: MyRouter.currentState()\n      })\n    });\n  }\n  \n  // render corresponding component\n  render() {\n    const V = this.state.viewState.view;\n \n    return (\n      \u003cdiv\u003e\n        { \u003cV {...this.state.viewState} /\u003e }\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nTo change router state use the folowing syntax`MyRouter.navigate({ view: StateNotification, text: message})` or `MyRouter.navigatebyPath('notification/your-text-here')`\n\n\n# Commands for development\n## install dependencies\n$ yarn\n\n## test\n$ yarn test\n\n## build\n$ yarn build\n\n## release\n$ npm publish\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonthegosystems%2Fmicro_router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonthegosystems%2Fmicro_router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonthegosystems%2Fmicro_router/lists"}