Native javascript router based on html5 history API
npm install html5-history-router


!gzip bundle size
Lightweight and fast router based on HTML5 history.
- html5 history API is more powerful (local state, previous state)
- Forward - backward statefull navigation out of the box
- The history API is a robust system that is actually designed to do that job (hash it is anchor to id actually)
- No server-side hacks for remove # (hash) from URL
- Easy and clean code
bash
npm i html5-history-router
`Changelog
Examples
$3
`js
import { Router } from 'html5-history-router'; // Init
router = new Router();
// Add route change callback to router instance
router.on('/foo', () => {
// do something...
});
// Add callbacks chain to router
router.on('/foo', () => {
// first callback
}).on('/foo/bar', () => {
// second callback (if first does not match)
})...
`
$3
`js
...router.on('/product/:productId', ({ params }) => {
console.log(params.productId); // '23'
});
router.pushState('/product/23');
`$3
`js
...router.on(/\/product\/[0-9]/, ({ path }) => {
console.log(path); // '/product/23'
});
router.pushState('/product/23');
`$3
`js
...router.always(() => {
// always called on any route change
}).on(/\/product\/[0-9]/, ({ path }) => {
console.log(path); // '/product/23'
});
router.pushState('/product/23');
`$3
`js
...router.on(/\/product\/[0-9]/, ({ path, state }) => {
console.log(path); // '/product/23'
console.log(extractIdFromPath(path)); // 23
console.log(state.productId); // 23
});
router.pushState('/product/23');
router.popState(); // go back
// change route with state
router.pushState('/product/32', { productId: 32, allowPreview: true });
// after external route change you need call applyState
// history.pushState(state, title, url);
// router.applyState();
// then router will try match current location to defined routes
`$3
`js
...router
// Resolve route only when authorized
.resolve(() => auth.isAuthorized())
.on(/\/product\/[0-9]/, ({ path, state }) => {
});
`$3
`ts
interface CustomState = { orderId: number, productType: string };
const router = new Rounter();
const state = { orderId: 12, productType: 'candy' };
router.pushState('/product/23', state);
``---
License
----
MIT