Chicane

A safe router for React and TypeScript

import { createRouter } from "@swan-io/chicane";
import { match } from "ts-pattern";

export const Router = createRouter({
  Home: "/",
  UserList: "/users",
  UserDetail: "/users/:userId",
});

const App = () => {
  const route = Router.useRoute(["UserList", "UserDetail"]);

  return match(route)
    .with({ name: "UserList" }, () => <UserList />)
    .with({ name: "UserDetail" }, ({ params }) => (
      <UserDetail userId={params.userId} />
    ))
    .otherwise(() => <NotFound />);
};

Easy to use

With named, typed routes, your development experience is much simpler than passing unsafe URLs around.

Built for React Components

The API we provide can be consumed from any component. We're not here to tell you how to organize your code.

Completely typesafe

Your routes are fully-typed, making it safe to create links and consume routes. You'll never forget a param again.