Skip to content

Commit

Permalink
Add example
Browse files Browse the repository at this point in the history
  • Loading branch information
ai committed May 19, 2024
1 parent c6e9f1d commit d8e230e
Showing 1 changed file with 14 additions and 18 deletions.
32 changes: 14 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
A tiny URL router for [Nano Stores](https://github.com/nanostores/nanostores)
state manager.

* **Small.** 684 bytes (minified and brotlied). Zero dependencies.
* Good **TypeScript** support.
* Framework agnostic. Can be used with **React**, **Preact**, **Vue**,
- **Small.** 684 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,
Expand Down Expand Up @@ -51,24 +51,21 @@ export const Layout = () => {

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made in <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-router&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.
<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made in <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-router&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---


## Install

```sh
npm install nanostores @nanostores/router
```


## Usage

See [Nano Stores docs](https://github.com/nanostores/nanostores#guide)
about using the store and subscribing to store’s changes in UI frameworks.


### Routes

Routes is an object of route’s name to route pattern:
Expand Down Expand Up @@ -111,10 +108,9 @@ createRouter({
*/
```


### Search Query Routing

Router value contains parsed url search params:
Router value contains parsed URL search params (like `?sort=name`):

```js
createRouter({ home: '/posts/:category' })
Expand All @@ -131,17 +127,19 @@ router.get() //=> {
To use search query like `?a=1&b=2` in routes you need to set `search` option:

```js
createRouter({
home: '/p/?page=home'
}, {
search: true
})
createRouter(
{
home: '/p/?page=home'
},
{
search: true
}
)
```

Router will work with `?search` part as a string. Parameters order will
be critical.


### Clicks Tracking

By default, router and `?search` params store will add `click` event listener
Expand Down Expand Up @@ -171,7 +169,6 @@ export const Link = (props) => {
}
```


### URL Generation

Using `getPagePath()` avoids hard coding URL in templates. It is better
Expand All @@ -190,7 +187,7 @@ or `redirectPage`:
```ts
import { openPage, redirectPage } from '@nanostores/router'

function requireLogin () {
function requireLogin() {
openPage($router, 'login')
}

Expand All @@ -207,7 +204,6 @@ getPagePath($router, 'list', { category: 'guides' }, { sort: 'name' })
//=> '/posts/guides?sort=name'
```


### Server-Side Rendering

Router can be used in Node environment without `window` and `location`.
Expand Down

0 comments on commit d8e230e

Please sign in to comment.