An easy to use hash-based routing library for single-page JavaScript applications
Key Features
- Routing is handled 100% in the browser - no server configuration required!
- Enables routing within a single page of a multi-page application - perfect for GitHub pages!
- Ships with TypeScript type declarations!
- Easy to use with React!
Installation
npm install sharp-router
Create your router
The following example shows how to create a router for an npm-like package manager website
; const router = ;
Navigation
The following examples show different ways to navigate to example.com/#/package/sharp-router/v/4/1/3
// With Sharp Routerrouter;
// With vanilla JavaScriptlocationhash = '#/package/sharp-router/v/4/1/3';
<!-- With HTML -->sharp-router
Access current route, matched route pattern and extracted parameters
console; // '/package/sharp-router/v/4/1/3'console; // '/package/<packageName:string>/v/<major:int>/<minor:int>/<patch:int>'console; // { packageName: 'sharp-router', major: 4, minor: 1, patch: 3 }
Listen to route changes
const changeListener = { console; // '/package/sharp-router/v/4/1/3' console; // '/package/<packageName:string>/v/<major:int>/<minor:int>/<patch:int>' console; // { packageName: 'sharp-router', major: 4, minor: 1, patch: 3 }}; router;router;
Using Sharp Router with React
;; const router = ; const ComponentWithRouting = { const route matchedRoute params = ; return <div> <div> route: <pre>route</pre> </div> <div> matchedRoute: <pre>matchedRoute</pre> </div> <div> matchedRoute: <pre>JSON</pre> </div> </div> ;};
Publishing a new version
Check that linting, formatting, build and tests pass
npm run lintnpm run formatnpm run buildnpm test
Bump version
npm version [major | minor | patch]
Publish to NPM
npm publish