Typesafe Routes

typesafe-routes helps you to accelerate your app development and reduce your test efforts by incorporating the TypeScript compiler for advanced type checking. Don't look for broken router paths manually; instead, let TypeScript notify you about inconsistencies in your routes.

typesafe-routes features include:

• Autocompletion for paths and parameters
• Path & template rendering
• Nested, absolute, and relative path rendering
• Parameter parsing and serialization
• Type-safe, customizable, and extendable
• Compatible with JavaScript (apart from type safety)
• Small bundle size starting at less than 1kb

Example (Default Renderer)

import { createRoutes, int, renderPath, parsePath, template } from "typesafe-routes";

// route tree definition
const routes = createRoutes({
  users: {
    path: ["users", int("uid")],    // /users/:uid
    children: {
      edit: { path: ["edit"] },     // /users/:uid/edit
      delete: { path: ["delete"] }, // /users/:uid/delete
    }
  }
});

// absolute paths
renderPath(routes.users, { uid: 123 }); // ~> "/users/123"

// nested paths
renderPath(routes.users.edit, { uid: 123 }); // ~> "/users/123/edit"
renderPath(routes.users.delete, { uid: 123 }); // ~> "/users/123/delete"

// relative paths ("_" indicates the starting segment)
renderPath(routes._.users.$render, { uid: 123 }); // ~> "users/123"
renderPath(routes.users._.edit, {}); // ~> "edit"

// parse path params
parsePath(routes.users.edit, { uid: "42" }); // ~> { uid: 42 }
parsePath(routes.users.edit, "/users/99/edit"); // ~> { uid: 99 }

// templates 
template(routes.users.edit); // ~> "/users/:uid/edit"
template(routes._.users.edit); // ~> "users/:uid/edit"
template(routes.users._.edit); // ~> "edit"

Quick Reference

The complete documentation can be found here.

• Functions
  • renderPath: renders a path with parameters
  • renderQuery: renders a search query
  • render: renders a path with parameters including query string
  • template: renders a route template
  • parsePath: parses dynamic segments in a path
  • parseQuery: parses parameters in a search query
  • parse: parses path and search query for parameters
  • replace: partially replaces dynamic segments and query params in a string-based path (i.e. location.path)

Installation

npm i typesafe-routes # or any npm alternative

How to Contribute

• leave a star ⭐
• report a bug 🐞
• open a pull request 🏗️
  • please discuss your idea on github or discord before you start working on your PR
• help others ❤️
• buy me a coffee ☕

Roadmap

• v10-v12 migration guide
• v12beta-v12.1 migration guide
• check for duplicate param names in the route tree
• customizable parsing of search params (for example with qs)
• demos & utils
  • react-router
  • wouter
  • vue router
  • angular router
  • refinejs

Docs

• [x] quickstart
• basic-features
  • [x] absolute-routes
  • [x] parameters
  • [x] nested-routes
  • [x] relative-routes
  • [x] route-templates
  • [x] parameter-parsing
  • [x] parameter-binding
  • [x] parameter-types
• advanced-features
  • [x] replace-dynamic-segments
  • [x] global-query-parameters
• customization
  • [x] custom-parameter-types
• tutorials
  • [x] angular router
  • [ ] react router
  • [ ] wouter
  • [ ] vue router
  • [ ] refine