html5-history-router

Pure JavaScript HTML5 router

Lightweight and fast router based on HTML5 history.

Why native history instead of location.hash

• 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

Installation

npm i html5-history-router

Changelog

Examples

Configure route map

    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)
        })...

Route params parser

...
 
router.on('/product/:productId', ({ params }) => {
   console.log(params.productId); // '23'
});
 
router.pushState('/product/23');

Route regexp match

...
 
router.on(/\/product\/[0-9]/, ({ path }) => {
   console.log(path); // '/product/23'
});
 
router.pushState('/product/23');

Other callbacks

...
 
router.always(() => {
    // always called on any route change
    }).on(/\/product\/[0-9]/, ({ path }) => {
     console.log(path); // '/product/23'
    });
 
router.pushState('/product/23');

Routes change

...
 
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

Promise resolve

...
 
router
    // Resolve route only when authorized
    .resolve(() => auth.isAuthorized())
    .on(/\/product\/[0-9]/, ({ path, state }) => {
});
 

Custom State

interface CustomState = { orderId: number, productType: string };
const router = new Rounter<CustomState>();
const state = { orderId: 12, productType: 'candy' };
router.pushState('/product/23', state);

---

License

MIT