Nano Stores Router

A tiny URL router for Nano Stores state manager.

• Small. 792 bytes (minified and gzipped). Zero dependencies. It uses Size Limit to control size.
• It has good TypeScript support.
• Framework agnostic. Can be used for React, Preact, Vue, Svelte, and vanilla JS.

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

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

// Types for :params in route templates
interface Routes {
  home: void
  category: 'categoryId'
  post: 'categoryId' | 'id'
}

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

Store in active mode listen for <a> clicks on document.body and Back button in 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} />
  }
}

Docs

Read full docs on GitHub.