ES6 Client-side Router
An ES6 client-side router
;let router = ;router;router;
On URL match, run the given callback.
The callback is invoked with one argument
|The ctx argument|
|ctx.params||URL parameter key/values|
|ctx.url||Instance of URL class (See MDN URL API)|
Handling routes that don't match
If a user navigates to a route that does not match a special callback will be invoked.
Developers can set this callback by:
We do not call this a "404" or "not found" on purpose.
"404" and "not found" is terminology specific to HTTP.
In our case, nomatch just means that no callback was found for the given route.
No HTTP requests were involved.
Add event listeners for
Check/run callback for given page path
Remove event listeners for
Disabling route handling on specific Links
Route handling can be disabled on a per link basis by adding the attribute
data-router-ignore to the anchor element.
Router will ignore handling this click
Note this attribute is handled as a boolean. The value set does not matter. If it's present it will be considered true.
A client-side routers primary responsbility is to:
- Intercept navigation actions
- Provide a hook to complete an alternative action
How does this library define a navigation action?
This library defines a navigation action is:
- A click on an anchor element
- Manipulation of browser history controls (Back, Forward button)
Clicks on anchor elements are filtered down by the following criteria:
- Click is not modified (Control + click)
- Click is a left click
- Anchor does not contain "target" attribute
- Anchor does not contain "download" attribute
- Anchor does not contain "data-router-ignore" attribute
- Anchor contains a "href" attribute
- Anchor HREF is not to a different domain
- Anchor HREF is not to an email address (mailto: link)
URL bar changes
URL changes in the URL bar trigger a popstate event. We catch this event and run the URL against the registered routes.
MIT (See LICENSE)