nanostores
Nano Stores Router
A tiny URL router for Nano Stores state manager.
- Small. 712 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: '/',
list: '/posts/:category',
post: '/posts/:category/:post'
})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 === 'list') {
return <ListPage category={page.params.category} filters={page.search} />
} else if (page.route === 'post') {
return <PostPage post={page.params.post} />
}
}
Made at Evil Martians, product consulting for developer tools.
Docs
Read full docs here.