Nano Stores Router

Nano Stores Router logo

Services & Skills

Share on

  • Small. 836 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 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 the 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} />
  }
}
Authors

In the same orbit

Explore more open source projects

Contact us

We’d love to hear from you! We’re not really all that evil, and we love discussing potential projects, intriguing ideas, and new opportunities. Complete the form below or drop us a line at surrender@evilmartians.com.

Martians at a glance
16
years in business

A product development consultancy that works with startups and established businesses, while also creating open source-based products and services