bj-router

About

bj-router is a lightweight client-side router made with javascript with a delicious vanilla flavor.

Features include:
Standard or hash routing
Routing with route parameters
Query parameter detection
Named routes
Customizable 404 error

Redux compatible

Install

npm i @buyerjourney/router

Options

bj-router has two options

hashSensitive defaults to false

caseInsensitive defaults to true

Routing

JAVASCRIPT

                    
import { bjRouter } from "@buyerjourney/router";
const App = new bjRouter();
App.on('/', (req, router)=>{console.log(req)});
App.run();


import { bjRouter } from "@buyerjourney/router";
const App = new bjRouter();
App.on('/', (req, router)=>{console.log(req)});
App.run();

Routing with hash

JAVASCRIPT

                    
import { bjRouter } from "@buyerjourney/router";

const App = new bjRouter({ hashSensitive:true});
App.on('/', (req, router)=>{console.log(req)});
App.on('/#products', (req, router)=>{console.log(req)});
App.run();


import { bjRouter } from "@buyerjourney/router";

const App = new bjRouter({ hashSensitive:true});
App.on('/', (req, router)=>{console.log(req)});
App.on('/#products', (req, router)=>{console.log(req)});
App.run();

Routing whit path parameters

JAVASCRIPT

                    
import { bjRouter } from "@buyerjourney/router";

export const App = new bjRouter({ hashSensitive:true});
App.on('/', (req, router)=>{console.log(req)});
App.on('/blog/{article}', (req, router)=>{console.log(req)});
App.on('/store/{product}/{model}', (req, router)=>{console.log(req)})
App.run();


import { bjRouter } from "@buyerjourney/router";

export const App = new bjRouter({ hashSensitive:true});
App.on('/', (req, router)=>{console.log(req)});
App.on('/blog/{article}', (req, router)=>{console.log(req)});
App.on('/store/{product}/{model}', (req, router)=>{console.log(req)})
App.run();

Object req

The req object is passed by bj-router to the callback function. It contains the route parameters, the query parameters, the URL requested by the client and the referrer (the URI of the page that linked to the current page).

With the bj-router configuration above we make the following request: http://localhost:8000/store/headphones/JVC-0HAFX29BTW?utm_source=facebook&utm_medium=landingpage&utm_campaign=christmas&utm_content=op-23

JSON

                    
{
    "uri": "/store/headphones/JVC-0HAFX29BTW",
    "referrer": "",
    "query": {
        "utm_source": "facebook",
        "utm_medium": "landingpage",
        "utm_campaign": "christmas",
        "utm_content": "op-23"
    },
    "params": {
        "product": "headphones",
        "model": "JVC-0HAFX29BTW"
    }
}


{
    "uri": "/store/headphones/JVC-0HAFX29BTW",
    "referrer": "",
    "query": {
        "utm_source": "facebook",
        "utm_medium": "landingpage",
        "utm_campaign": "christmas",
        "utm_content": "op-23"
    },
    "params": {
        "product": "headphones",
        "model": "JVC-0HAFX29BTW"
    }
}

Named routes

JAVASCRIPT

                    
import { bjRouter } from "@buyerjourney/router";
import { home, thanks } from "./app/pages";

export const App = new bjRouter({ hashSensitive:true});
App.on('/', home);
App.on('/#thanks', thanks).setName("bye");
App.run();


import { bjRouter } from "@buyerjourney/router";
import { home, thanks } from "./app/pages";

export const App = new bjRouter({ hashSensitive:true});
App.on('/', home);
App.on('/#thanks', thanks).setName("bye");
App.run();

The router object passed to the callback function has the pathFor(name) function to retrieve the url associated with the name.

JAVASCRIPT

                    
window.location.href = router.pathFor("bye");


window.location.href = router.pathFor("bye");

Routing BJ style

In the app.js file. The callback functions are located inside the pages folder within the app folder. We have one for home, one for thanks and notFound to style the 404 error. bj-router responds to the 404 error, but can optionally be customized.

JAVASCRIPT

                    
import { bjRouter } from "@buyerjourney/router";
import { home, thanks, notFound) } from "./app/pages";

export const App = new bjRouter({ hashSensitive:true});
App.on('/', home);
App.on('/#thanks', thanks).setName("bye");
App.onNotFound(notFound);


import { bjRouter } from "@buyerjourney/router";
import { home, thanks, notFound) } from "./app/pages";

export const App = new bjRouter({ hashSensitive:true});
App.on('/', home);
App.on('/#thanks', thanks).setName("bye");
App.onNotFound(notFound);

In the index.js file using redux persistent state and the loading function to enable Bulma's Page-loader extension for styling :)

JAVASCRIPT

                    
import { store, persistor } from './app/store/store';
import { loading } from  "@buyerjourney/bj-core";
import '@buyerjourney/bj-core/src/bj.css';
import { App } from './App';

loading({color:"is-dark", direction:"is-right-to-left"});

persistor.subscribe(()=>{
    const rehydratedState = store.getState();  
    App.run();
})


import { store, persistor } from './app/store/store';
import { loading } from  "@buyerjourney/bj-core";
import '@buyerjourney/bj-core/src/bj.css';
import { App } from './App';

loading({color:"is-dark", direction:"is-right-to-left"});

persistor.subscribe(()=>{
    const rehydratedState = store.getState();  
    App.run();
})

Repository

To propose features, report bugs or collaborate: https://github.com/antoniofregoso/bj-router