@nanostores/router

Nano Stores Router

A tiny URL router for Nano Stores state manager.

• Small. 673 bytes (minified and brotlied). Zero dependencies.
• Good TypeScript support.
• Framework agnostic. Can be used with React, Preact, Vue, Svelte, Angular, Solid.js, 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'

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

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} />
  }
}

---

Made in Evil Martians, product consulting for developer tools.

---

Docs

Read full docs here.