Nano Stores Router at Evil Martians

Small. 836 bytes (minified and gzipped). Zero dependencies. It uses Size Limit to control size.
Good TypeScript support.
Framework agnostic; can be used with React, React Native, Preact, Vue, Svelte, Solid, Lit, Angular, and vanilla JS.

Since Nano Stores promotes moving logic to the store, the router is a store, not a component in a UI framework like React.

// stores/router.ts
import { createRouter } from '@nanostores/router'

export const router = createRouter({
  home: '/',
  category: '/posts/:categoryId',
  post: '/posts/:categoryId/:id'
} as const)

In active mode, the store listens for <a> clicks on document.body and the Back button in the browser.

// components/layout.tsx
import { useStore } from '@nanostores/react'

import { router } from '../stores/router.js'

export const Layout = () => {
  const page = useStore(router)

  if (!page) {
    return <Error404 />
  } else if (page.route === 'home') {
    return <HomePage />
  } else if (page.route === 'category') {
    return <CategoryPage categoryId={page.params.categoryId} />
  } else if (page.route === 'post') {
    return <PostPage postId={page.params.postId} />
  }
}

In the same orbit