{"id":15099292,"url":"https://github.com/wompojs/wompo-router","last_synced_at":"2026-01-29T10:55:59.850Z","repository":{"id":231116951,"uuid":"775394880","full_name":"wompojs/wompo-router","owner":"wompojs","description":"Wompo-Router is a library that allows to create a Single Page Application using client routing with wompo.","archived":false,"fork":false,"pushed_at":"2024-09-25T08:40:02.000Z","size":138,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-02T13:21:32.345Z","etag":null,"topics":["client-routing","single-page-applications","spa","web-components","wompo"],"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/wompojs.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,"publiccode":null,"codemeta":null}},"created_at":"2024-03-21T10:04:29.000Z","updated_at":"2024-09-25T08:39:37.000Z","dependencies_parsed_at":"2024-04-04T19:30:26.706Z","dependency_job_id":"8250469d-b918-411a-a56c-7f974c4a0967","html_url":"https://github.com/wompojs/wompo-router","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.3584905660377359,"last_synced_commit":"6a130d1aa36fcbceb1e960930018da72d164a4ee"},"previous_names":["saderyal/wompo-router"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/wompojs/wompo-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wompojs%2Fwompo-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wompojs%2Fwompo-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wompojs%2Fwompo-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wompojs%2Fwompo-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wompojs","download_url":"https://codeload.github.com/wompojs/wompo-router/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wompojs%2Fwompo-router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28876549,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T10:31:27.438Z","status":"ssl_error","status_checked_at":"2026-01-29T10:31:01.017Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["client-routing","single-page-applications","spa","web-components","wompo"],"created_at":"2024-09-25T17:09:31.942Z","updated_at":"2026-01-29T10:55:59.835Z","avatar_url":"https://github.com/wompojs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wompo Router\n\nWompo-Router is a Wompo based library to create Single Page Applications using client routing.\nWompo Router uses nested routes to create layouts, based on the famous React-Router library.\n\n## API\n\nWompo Router exposes the following components to create routes:\n\n- `Routes` - It's the component that will include the whole routing logic. Accepts a\n  **notFoundElement** prop, which defines what to render when the router don't find a matching\n  route, and an **origin** prop, which specifies the url location on where the routing starts.\n- `Route` - Define a single route. Accepts the following props:\n  ```ts\n  interface RouteProps extends WompoProps {\n  \tpath?: string; // The path of the route.\n  \tindex?: boolean; // True if the route is an index route (of the parent).\n  \tredirect?: string; // If valorized, the route will redirect to another one.\n  \telement?: RenderHtml; // The element to render.\n  \tlazy?: () =\u003e LazyCallbackResult; // If valorized, must be a callback that returns a lazy component.\n  \tfallback?: RenderHtml; // The fallback element to visualize while a lazy component is being imported.\n  \tmeta?: {\n  \t\ttitle?: string;\n  \t\tdescription?: string;\n  \t};\n  }\n  ```\n- `ChildRoute` - Defines where a child route should be rendered inside the parent route. Accepts no props.\n\nIt also exposes this helper components:\n\n- `Link` - The component you want to use to navigate across routes. Accepts two props: _to_ (the link), and _target_.\n- `NavLink` - Same as Link, but will have an \"active\" class if the current route corresponds to the link.\n  Accepts a two props: _to_ (the link), and _target_..\n\nFinally, Wompo Router has the following hooks:\n\n- `useParams` - Will return the parameters for the current route.\n- `useNavigate` - Will return a **navigate** function that you can use to manually navigate across routes.\n- `useCurrentRoute` - Will return the current route.\n- `useRoutes` - Will return the array of routes that the router can handle.\n\n## Creating an Application\n\nThis is an example of an application made with Wompo Router:\n\n```javascript\nfunction App() {\n\treturn (\n\t\t\u003cRoutes\u003e\n\t\t\t\u003cRoute path='/' element={\u003cHomePage /\u003e} /\u003e\n\t\t\t\u003cRoute path='/docs' element={\u003cDocsLayout /\u003e}\u003e\n\t\t\t\t\u003cRoute path='overview' element={\u003cOverview /\u003e} /\u003e\n\t\t\t\t\u003cRoute path='quick-start' element={\u003cQuickStart /\u003e} /\u003e\n\t\t\t\t\u003cRoute path='hooks' element={\u003cHooks /\u003e}\u003e\n\t\t\t\t\t\u003cRoute path=':name' element={\u003cHook /\u003e} /\u003e\n\t\t\t\t\u003c/Route\u003e\n\t\t\t\t\u003cRoute index redirect='overview' /\u003e\n\t\t\t\u003c/Route\u003e\n\t\t\t\u003cRoute path='*' element={\u003cNotFound /\u003e} /\u003e\n\t\t\u003c/Routes\u003e\n\t);\n}\n```\n\nThe above routing system will generate the following routes:\n\n- /\n- /docs ---\u003e will redirect to ---\u003e /docs/overview\n- /docs/overview\n- /docs/hooks\n- /docs/hooks/:name (where \"name\" is a parameter in the url)\n\nAll the other routes will fallback into the `NotFound` Page.\n\nSo, if you go to the url _/docs/hooks/useNavigate_, Womp Router will render the\nfollowing nested routes where \"useNavigate\" is assigned to the \"name\" parameter:\n\n```javascript\n\u003cDocsLayout\u003e\n\t\u003cHooks\u003e\n\t\t\u003cHook /\u003e\n\t\u003c/Hooks\u003e\n\u003c/DocsLayout\u003e\n```\n\nActually, this process of nested routes will not happen automatically: the components\n`DocsLayout` and `Hooks` will have to tell \"Womp Router\" where to render the nested\nroute. To do that, you use the `ChildRoute` component.\n\nExample of `DocsLayout`:\n\n```javascript\n\u003cheader\u003e...\u003c/header\u003e\n\u003cmain\u003e\n  \u003cChildRoute /\u003e\n\u003c/main\u003e\n\u003cfooter\u003e...\u003c/footer\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwompojs%2Fwompo-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwompojs%2Fwompo-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwompojs%2Fwompo-router/lists"}