# rct-router > a router for react Latest version **5.0.9** (published 2026-05-22) · MIT license · 0 weekly downloads ## Install ```sh npm install rct-router pnpm add rct-router yarn add rct-router bun add rct-router ``` ## Health **Score 60/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.0.9 | | Published | 2026-05-22 | | First published | 2017-09-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 21.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Armen Vartan | | Maintainers | hippopotamus | | Keywords | react, router, typescript | ## Links - npm: https://www.npmjs.com/package/rct-router - Repository: https://github.com/hippopotamus2/rct-router - Homepage: https://github.com/hippopotamus2/rct-router#readme - Issues: https://github.com/hippopotamus2/rct-router/issues - npm.io page: https://npm.io/package/rct-router ## Dependencies (3) - [qs](https://npm.io/package/qs.md) 6.15.2 - [react](https://npm.io/package/react.md) ^18.3.1 || ^19.0.0 - [url-pattern](https://npm.io/package/url-pattern.md) 1.0.3 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 5.0.9 (latest) — 2026-05-22 - 5.0.8 — 2026-05-06 - 5.0.7 — 2026-02-18 - 5.0.6 — 2026-01-05 - 5.0.5 — 2025-12-10 - 5.0.4 — 2025-12-08 - 5.0.3 — 2025-12-08 - 5.0.2 — 2025-12-02 - 5.0.1 — 2025-12-02 - 5.0.0 — 2025-12-02 - 4.2.1 — 2024-02-27 - 4.2.0 — 2024-02-27 - 4.1.1 — 2023-12-20 - 4.1.0 — 2023-12-19 - 4.0.1 — 2022-12-22 - … 25 more at https://npm.io/package/rct-router/versions ## README # rct-router ## Routing in React with the HTML5 History API NOTE: This won't work with browsers that don't support the HTML5 History API ### An example ```js /** routes.js */ import { Collection, createGo, RootCollection, RctRoute } from 'rct-router' const router = new RootCollection({ error: Views.Error, notFound: Views.NotFound, path: '/', template: Templates.Root, }).addRoute(new RctRoute({ name: 'home', path: '/', component: Views.Login, })).addRoute(new RctRoute({ name: 'login', path: '/login', component: Views.Login, })).addCollection( new Collection({ name: 'dashboard', path: '/dashboard', template: Templates.Dashboard, }).addRoute(new RctRoute({ name: 'home', path: '/', component: Views.Dashboard.Home, beforeRender: authenticateAnd(['admin']), inject: { ...injectBreadCrumbs([ { name: 'home', urn: route.dashboard }, ]) } })).addCollection( new Collection({ name: 'profile', path: '/profile', }).addRoute(new RctRoute({ name: 'home', path: '/', component: Views.Dashboard.Profile.Home, beforeRender: authenticateAnd(['admin']), inject: { ...injectBreadCrumbs([ { name: 'home', urn: route.dashboard }, { name: 'profile', urn: route.profile }, ]) } })))).build() export const routes = router export const go = createGo(router) /** app.js */ import { Router } from 'rct-router' import { routes } from './routes' ReactDOM.render( , document.getElementById('root') ) ``` ### How to use Start with RootCollection, which takes the parameters "template", "notFound", and "path"... notFound is the optional component to render when a route isn't found error is an optional component which should follow the [react 16 error handler pattern](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html). there is a default ugly one provided in this package. ```js new RootCollection({ path?: '/' or whatever you want the root to be, template?: Component with props.children, notFound?: Component, error?: Component }) ``` use `addCollection` to add a collection of routes with the params. this method also exists on collections ```js new Collection({ name: string, path: string, template?: Component with props.children, }) ``` the `addRoute` method on both RootCollection and Collection takes the parameters ```js new RctRoute({ name: string path: string component: React.ComponentType template?: React.ComponentType beforeRender?: Promise or function (it uses async/await) inject?: any object }) ``` * Routes and templates inherit their parent templates * `beforeRender` is for middleware, authentication and things of the sort can be done there. The view won't render until the function completes * `inject` lets you inject props into the view Call the method `build` on the `RootCollection` when you're done adding routes to create the end routes class. use the helper `createGo` to create a function (I call it 'go') for routing. The arguments for 'go' are: ```js go( pointer, // names of parent collections and name of the route joined with periods, params, // an object of params needed for the route. event?, // optionally pass in event from click events or whatever, and it will call preventDefault for you ) // How I use it /** routes.ts */ export enum Route { Home = 'home', Login = 'login', Dashboard = 'dashboard.home', Profile = 'dashboard.profile.home', } export const go = createGo(router) /** dashboard/home.tsx */ import { Route, go } from '../../routes' class Dashboard extends Component { /** ... */ onClick = (e) => { go(Route.Profile, { personId: this.props.person.id }, e) } /** ... */ } ``` If you have any questions, feel free to reach out to me <3 --- _Source: https://npm.io/package/rct-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._