Overview and purpose
1.0.0Size (core + integration): 1.78 KB + 0.33 KBCoverage: 94.93 % in 498 tests
When using MobX, Vue reactivity, Solid.js signals, and other reactive systems, it is difficult to maintain synchronization with non-reactive routers, which are often tied to the UI or file structure.
To solve this problem, Reactive Route was created. It works with any reactive libraries and frameworks, which greatly simplifies working with different stacks.
Ready-made integrations are available for:
- React + MobX
- React + Observable
- Preact (without compat) + MobX
- Preact (without compat) + Observable
- Solid.js + Solid.js reactivity
- Solid.js + MobX
- Solid.js + Observable
- Vue + Vue reactivity
Advantages
The library follows a strict philosophy — minimum size, maximum typing, mandatory validation of URL parameters, fault tolerance, and support for SSR / Widget / MPA modes.
Reactive Route is a separate routing layer that encourages you not to scatter configuration across files and components. It has no redirects by partial paths or nested routes, which makes it possible to use TypeScript static analysis (and therefore automatic refactoring, fast navigation and autocomplete + stable generation with AI models).
The component tree in the project remains clean, and there are no restrictions on folder structure or file names.
Async beforeEnter and beforeLeave methods let you control access and load data into stores, while beforeComponentChange lets you design modular architectures with code-splitting support not only for page components, but also for other entities (and "destroy" them when navigating to other pages), with seamless SSR support.
Carefully designed reactivity support lets you build applications with granular rerenders, without running into inconsistencies in how reactions and UI framework mount / unmount mechanisms are triggered when route state changes.
Browser support
Reactive Route uses Dual Packaging (CJS and ESM are selected automatically based on the project configuration) for maximum compatibility. To work without polyfills, you need at least Chrome 49, Firefox 29, Safari 10.1, and Node.js 10 if SSR is used, due to the requirement for URLSearchParams.
You can go straight to Examples for your stack or to the next documentation section to get familiar with how the library works.