{"id":17809551,"url":"https://github.com/ldd/react-simplest-router","last_synced_at":"2025-04-02T06:28:43.343Z","repository":{"id":57344813,"uuid":"253681541","full_name":"ldd/react-simplest-router","owner":"ldd","description":"simplest router for React","archived":false,"fork":false,"pushed_at":"2020-04-07T04:14:19.000Z","size":389,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-29T07:03:02.770Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ldd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-07T03:52:38.000Z","updated_at":"2020-04-07T04:33:07.000Z","dependencies_parsed_at":"2022-09-12T06:00:13.307Z","dependency_job_id":null,"html_url":"https://github.com/ldd/react-simplest-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/ldd%2Freact-simplest-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-simplest-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-simplest-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-simplest-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ldd","download_url":"https://codeload.github.com/ldd/react-simplest-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246766240,"owners_count":20830244,"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-10-27T15:19:46.167Z","updated_at":"2025-04-02T06:28:43.322Z","avatar_url":"https://github.com/ldd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-simplest-router\n\n\u003e Simplest React router using hooks\n\n[![NPM](https://img.shields.io/npm/v/react-simplest-router.svg)](https://www.npmjs.com/package/react-simplest-router)\n[![Build Status](https://travis-ci.com/ldd/react-simplest-router.png?branch=master)](https://travis-ci.com/ldd/react-simplest-router)\n[![Coverage Status](https://coveralls.io/repos/github/ldd/react-simplest-router/badge.svg?branch=master)](https://coveralls.io/github/ldd/react-simplest-router?branch=add-tests)\n[![Dependencies](https://david-dm.org/ldd/react-simplest-router.svg)](https://david-dm.org/ldd/react-simplest-router)\n[![Size](https://badgen.net/bundlephobia/minzip/react-simplest-router)](https://bundlephobia.com/result?p=react-tech-tree@0.5.1)\n\n_Tired of very big routers with a lot of options and documentation?_\n\n_Need the absolutely simplest router?_\n\n_URL Hash routers are ok with you?_\n\nUse this package\n\n## Install\n\n```bash\nnpm install --save react-simplest-router\n```\n\nor\n\n```bash\nyarn add react-simplest-router\n```\n\n## Usage\n\n`react-simplest-router` exports by default a hook that you can use to handle routing.\n\nIn the spirit of show-dont-tell, here's an example:\n\n```jsx\nimport React from \"react\";\nimport useRouter from \"react-simplest-router\";\nimport \"./App.css\";\n\nconst A = () =\u003e \u003clabel\u003eA\u003c/label\u003e;\nconst B = () =\u003e \u003clabel\u003eB\u003c/label\u003e;\n\nconst initialRoutes = [\n  { location: \"#A\", component: A },\n  { location: \"#B\", component: B }\n];\n\nconst Picker = ({ routes, changeRoute }) =\u003e (\n  \u003cdiv\u003e\n    {routes.map(({ location, isActive }) =\u003e (\n      \u003cbutton\n        key={location}\n        onClick={() =\u003e changeRoute(location)}\n        className={isActive ? \"active\" : \"inactive\"}\n      \u003e\n        {location}\n      \u003c/button\u003e\n    ))}\n  \u003c/div\u003e\n);\n\nconst App = () =\u003e {\n  const { setRoute, routes, ActiveComponent } = useRouter(initialRoutes);\n  const changeRoute = newRoute =\u003e {\n    setRoute(newRoute);\n    document.location.hash = newRoute;\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cPicker changeRoute={changeRoute} routes={routes} /\u003e\n      \u003cActiveComponent /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nAs you can see, `useRouter` only takes in a routes array. Each route should have two properties:\n\n- `location` to know where to go\n- `component` to know what to render\n\n\u003e `react-simplest-router` doesn't have ANY other functionality or API to learn. It is truly the simplest router\n\n## License\n\nMIT © [ldd](https://github.com/ldd)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldd%2Freact-simplest-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fldd%2Freact-simplest-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldd%2Freact-simplest-router/lists"}