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