{"id":25152,"library":"cyclic-router","title":"cyclic-router","description":"A routing library for Cycle.js applications, wrapping the main function to provide route matching and navigation. Current stable version is 6.0.0, released sporadically with a focus on incremental improvements. Unlike older versions (V4 and below) that acted as drivers, V5+ uses a `routerify` wrapper that works with `@cycle/history` and supports route parameters, basename configuration, and raw history access. Differentiators include integration with switch-path matcher and explicit route-to-component mapping via `routedComponent()`. Requires peer dependencies `@cycle/history` and `history`.","status":"active","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/cyclejs-community/cyclic-router","tags":["javascript","typescript"],"install":[{"cmd":"npm install cyclic-router","lang":"bash","label":"npm"},{"cmd":"yarn add cyclic-router","lang":"bash","label":"yarn"},{"cmd":"pnpm add cyclic-router","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; provides the underlying driver for browser history interactions.","package":"@cycle/history","optional":false},{"reason":"Peer dependency; used by @cycle/history under the hood.","package":"history","optional":false},{"reason":"Recommended route matcher; injected into routerify.","package":"switch-path","optional":true}],"imports":[{"note":"ESM import preferred; CommonJS require also works with Node.js but may have interop issues.","wrong":"const routerify = require('cyclic-router').routerify","symbol":"routerify","correct":"import { routerify } from 'cyclic-router'"},{"note":"TypeScript type export; only available when using TypeScript via 'import type'.","wrong":"const RouterOptions = require('cyclic-router').RouterOptions","symbol":"RouterOptions","correct":"import { RouterOptions } from 'cyclic-router'"},{"note":"routedComponent expects the full sources object, not just DOM, to pass to nested components.","wrong":"sources.router.routedComponent({...})(sources.DOM)","symbol":"routedComponent","correct":"sources.router.routedComponent({...})(sources)"}],"quickstart":{"code":"import xs from 'xstream';\nimport { run } from '@cycle/run';\nimport { makeDOMDriver } from '@cycle/dom';\nimport { routerify } from 'cyclic-router';\nimport { makeHistoryDriver } from '@cycle/history';\nimport switchPath from 'switch-path';\n\nfunction HomeComponent(sources) {\n  return {\n    DOM: xs.of('<div>Home</div>')\n  };\n}\n\nfunction OtherComponent(sources) {\n  return {\n    DOM: xs.of('<div>Other</div>')\n  };\n}\n\nfunction main(sources) {\n  const pageSinks$ = sources.router.routedComponent({\n    '/': HomeComponent,\n    '/other': OtherComponent\n  })(sources);\n\n  return {\n    DOM: pageSinks$.map(c => c.DOM).flatten(),\n    router: xs.of('/other')\n  };\n}\n\nconst mainWithRouting = routerify(main, switchPath);\n\nrun(mainWithRouting, {\n  DOM: makeDOMDriver('#app'),\n  history: makeHistoryDriver()\n});","lang":"typescript","description":"Minimal Cycle.js app using routerify to route between Home and Other components."},"warnings":[{"fix":"Upgrade to V5+ and wrap your main function with routerify, passing sources.router instead of sources.history.","message":"V5 changed from a driver-based architecture to a main wrapper (routerify). Driver patterns from V4 are incompatible.","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Upgrade to cyclic-router V5+.","message":"V4 and earlier are deprecated; new features and fixes only for V5+.","severity":"deprecated","affected_versions":"<5.0.0"},{"fix":"Always pass sources (the full sources object) to routedComponent's returned function.","message":"routedComponent expects the full sources object, not just DOM. Passing only DOM will cause nested components to receive undefined sources.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Use 'router' for navigation; set omitHistory: false if you need raw history access.","message":"The router sink is named 'router' by default, but it proxies the history driver. Sinks named 'history' will be hidden unless omitHistory is set to false.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install @cycle/history","cause":"@cycle/history is a peer dependency not automatically installed.","error":"Cannot find module '@cycle/history'"},{"fix":"Ensure you wrap main: const mainWithRouting = routerify(main, switchPath); and use sources.router in main.","cause":"Cycle.js main function not wrapped with routerify, or routerify not called correctly.","error":"TypeError: sources.router.routedComponent is not a function"},{"fix":"Update to cyclic-router V5+ and use import { routerify } from 'cyclic-router'.","cause":"Wrong import syntax or old version of cyclic-router (V4 or earlier).","error":"export 'routerify' was not found in 'cyclic-router'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}