https://github.com/knadh/tinyrouter.js
A tiny, zero-dependency lib for frontend routing and navigation on top of `window.history`
https://github.com/knadh/tinyrouter.js
alpinejs browser-navigation clientside-routing history-api router routing
Last synced: 3 months ago
JSON representation
A tiny, zero-dependency lib for frontend routing and navigation on top of `window.history`
- Host: GitHub
- URL: https://github.com/knadh/tinyrouter.js
- Owner: knadh
- License: mit
- Created: 2025-04-26T16:20:23.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-05-06T12:09:13.000Z (9 months ago)
- Last Synced: 2025-06-05T23:08:03.257Z (8 months ago)
- Topics: alpinejs, browser-navigation, clientside-routing, history-api, router, routing
- Language: JavaScript
- Homepage: https://knadh.github.io/tinyrouter.js/demo
- Size: 17.6 KB
- Stars: 25
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tinyrouter.js
A tiny, vanilla JS client-side router for single-page apps on top of the browser's `window.history` API.
No dependencies and ~950 bytes minified+gzipped. Ideal for simple vanilla JS single-page applications, using with AlpineJS etc.
## Features
- Dynamic route parameters using the `{param}` syntax
- Route grouping with shared handlers
- Support for before/after handler hooks
- Automatic optional binding to `` and other tags for navigation
[**View demo**](https://knadh.github.io/tinyrouter.js/demo)
## Usage
```
npm install @knadh/tinyrouter
```
### Basic
```javascript
import router from @knadh/tinyrouter;
// Create router instance.
const r = router.new({
defaultHandler: (ctx) => console.log('Route not found', ctx.location.pathname)
});
// Register routes.
r.on('/', (ctx) => console.log(ctx));
r.on('/users/{id}', (ctx) => console.log('User profile', ctx.params.id));
// Initialize router.
r.ready();
r.navigate('/users/42', { filter: 'active' }, 'settings');
```
### Advanced
```javascript
// Route with before/handler hooks.
r.on('/posts/{id}', {
before: (ctx) => console.log('Before post handler'),
on: (ctx) => console.log('Post content', ctx.params.id),
after: (ctx) => console.log('After post handler')
});
// Route group.
const admin = r.group('/admin', {
before: (ctx) => checkAdminAuth()
});
// These routes are automatically prefixed with /admin and the before()
// callback on the group is triggered for all of them.
admin.on('/dashboard', (ctx) => renderDashboard());
admin.on('/users/{id}', (ctx) => renderUserEditor(ctx.params.id));
// Programmatic navigation.
r.navigate('/users/42', { filter: 'active' }, 'settings');
```
See the [demo source](https://github.com/knadh/tinyrouter.js/blob/master/404.html) for a full working example.
### Link binding
Simply add the `data-route` attribute to links for automatic on-click naviation.
```html
View User
```
## API
| Method | Description |
|--------|-------------|
| `router.New(options)` | Creates a new router instance. See `_default_options{}` in the source code for options. |
| `r.on(path, handler)` | Registers a route handler |
| `r.group(prefix, handlers{})` | Creates a group of routes with a common prefix |
| `r.ready()` | Initializes the router |
| `r.navigate(path, query, hash, pushState)` | Navigates to a new route |
| `r.bind(parent)` | Binds navigate() onclick of all elements in the parent tagged with `data-route` |
Licensed under the MIT License.