# Router
A hash based Router
[](https://www.npmjs.com/package/@jlbyte/router)
[](https://github.com/jlongyam/router/actions/workflows/ci.yml)
[](https://npmx.dev/package/@jlbyte/router)
[](https://www.jsdelivr.com/package/npm/@jlbyte/router)
## But why?
The the difference of this router with other hash router
is have ability to **parse sub slash after query**,
example
> `#page/test?asset=/path/to/file.js`
That slash after querty parsed properly.
## Features
- simple -> focuc to hash only
- small -> under 100 lines of code
- query friedly -> explained above
- typed -> ships its own type definitions, no `@types/*` needed
- ready to use -> `import router from '@jlbyte/router'`, no `new Router()`
- `router.match` -> work in node and browser
- `router.route` -> work in browser
## Usage
Design site map
Import
```js
import router from '@jlbyte/router'
```
1. **Basic** design
```js
console.dir( router.match('#index', ':page') );
```
```js
{ path: 'index', params: { page: 'index' }, query: {} }
```
2. **Complex** design
```js
console.dir( router.match('#page/test?asset=path/to/file.js', 'page/:any') );
```
```js
{
path: 'page/test',
params: { '$0': 'test' },
query: { asset: 'path/to/file.js' }
}
```
See usage detail in **usage/design.mjs**
Test design
Example:
```js
let hash = '#lib/test/src?path=./root/file.css'
let pattern = 'lib/:n/src'
let result = {
path: 'lib/test/src',
params: { n: 'test' },
query: { path: './root/file.css' }
}
console.assert( router.match( hash, pattern ), result )
```
Create route
Design:
```js
console.dir( router.match('#style/load?file=style.css', 'style/:action') )
```
Result:
```js
{
path: 'style/load',
params: { action: 'load' },
query: { file: 'style.css' }
}
```
Implementation:
```js
router.route('style/:action', ({ params, query })=> {
if(params.action === 'load') {
console.log( query.file )
}
})
```
Manage Navigation
Example:
```js
router.navigate('#style/load?file=style.css')
```
See usage detail in **usage/route.mjs**
Pretty URL
How to create pretty URL like `https://example.com/#/other/page`
1. Design first
```js
console.log( 'Design', router.match('#/other', '/:page') );
```
2. Catch route
```js
router.route('/:page', ({params})=> {
console.log('Routes: ', params);
}
```
3. Test
```js
router.navigate('#/other');
```
See `usage/pretty.html` for example
TypeScript
Type definitions are bundled, so editors and `tsc` pick them up without
installing anything extra:
```ts
import router from '@jlbyte/router'
import type { MatchResult, RouteMatch } from '@jlbyte/router'
const parsed: MatchResult | null = router.match('#page/test', 'page/:any')
```
Javascript
Two entry points:
- `import` -> `src/router.mjs`, native **ESM** shipped as source (no build). Its
single default export is the ready-made `router`.
- `
```
No wiring is needed with the script tag: `router` is already global.
Legacy
`dist/router.legacy.js` is the same router transpiled to ES5, for engines that
predate ES2015.
It is **standalone**, the few runtime APIs it needs
- `Map`,
- `Symbol.iterator`,
- `Object.entries`,
- `Array.from` and
- `String.prototype.startsWith`
are shipped as small guarded shims inside the file,
so **no polyfill file has to be loaded first**.
```html
```
If your page already provides those APIs, the shims detect them and do nothing.
Only the *syntax* is ES5; write the code that uses the router in ES5 too when
targeting those browsers.
`dist/` is generated by `pnpm build` (rollup) and is not committed.