A simple js router designed to solve one problem outside of any other frameworks like React, Angular, or Vue
npm install --save @kevindurb/routerimport { router } from '@kevindurb/router';
const app = router();
app.add('/people', () => {
console.log('showing people!');
});
app.add('/people/:id', ({ id }) => {
console.log('load person with id: ', id);
});
app.exec('/people/256'); // load person with id: 256
app.exec('/people'); // showing people!onMatch and offMatch let you add a listener for ANY route matches. You can also
pass strings in instead of callbacks as the second argument to add that get passed into
your onMatch callback. This works great with setting the current route in a
global store like redux or setState in react.
import { router } from '@kevindurb/router';
const app = router();
app.add('/people', 'PEOPLE');
app.add('/people/:id', 'PERSON');
app.onMatch((key, params) => {
switch (key) {
case 'PERSON':
console.log('person! ', params.id);
break;
case 'PEOPLE':
console.log('people!!');
break;
}
});
app.exec('/people/256'); // person! 256
app.exec('/people'); // people!!pathFromRoute will let you dry up your code with reproducable routes
import { router, pathFromRoute } from '@kevindurb/router';
const PERSON_ROUTE = '/people/:id';
const app = router();
app.add(PERSON_ROUTE, (params) => {
console.log('person! ', params.id)
});
app.exec(pathFromRoute(PERSON_ROUTE, { id: 256 })); // person! 256npm install --save historyimport createHistory from 'history/createBrowserHistory';
import { router, historyMount } from '@kevindurb/router';
const history = createHistory();
const app = router();
app.add('/people', () => {
console.log('showing people!');
});
app.add('/people/:id', ({ id }) => {
console.log('load person with id: ', id);
});
history.listen(historyMount(app));
history.push('/people/65'); // load person with id: 65