@rayzors/router v0.1.0
KMRouter
Quick start
Server configuration
Before using this router, the server must be configured. The server must redirect all the requests to index.html
Apache
You can do it in a .htaccess
file at the root of your folder
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
Nginx
location / {
try_files $uri /index.html;
}
Package Installation
NPM
npm i @rayzors/router
import { KMRouter } from '@rayzors/router';
YARN
yarn add @rayzors/router
import { KMRouter } from '@rayzors/router';
Routes definition
Routes are an array of object where each object is a route. A route have several keys :
- path :
String
. The path of your route. - action :
Function
. The main route action. - before (optional) :
Function
. Function executed before the action. - leave (optional) :
Function
. Function executed on leaving route. - redirect (optional) :
String
. The route where you want to be redirected.
const routes = [
{
path: '/',
action: function(request) {
document.body.innerHTML = 'Home';
},
leave: function(request, next) {
console.log('leave route');
next();
},
before: function(request, next) {
console.log('before route');
next();
},
// redirect: '/hello'
}
]
Router initialization
The Router class takes as argument the routes list
const router = new KMRouter(routes)
Additional
Route params
Params can be set to your route by sepecifing a key placed between {}
. The url params can be used in the action by the params
propriety of the request
argument.
const routes = [
{
path: '/{name}',
action: function(request) {
document.body.innerHTML = `Hello ${request.params.name}`;
}
}
]
Route params format
Params format can be specified by using regular expression.
⚠️ Regular expression need to be escaped
const routes = [
{
path: '/{name:(\\w+)}',
action: function(request) {
document.body.innerHTML = `Hello ${request.params.name}`;
}
}
]
Hooks
2 hooks are available :
- before : executed before the action function. Can be use as a middleware.
- leave : executed on route leaving.
Global hooks
const router = new KMRouter(routes)
router.hooks.before = function(request, next) {
// your code
next()
};
router.hooks.leave = function(request, next) {
// your code
next()
};
Route hooks
const routes = [
{
path: '/',
action: function(request) {
document.body.innerHTML = `<h1>404 not found</h1>`
},
before: function(request, next) {
// your code
next()
},
leave: function(request, next) {
// your code
next()
}
}
];
const router = new KMRouter(routes);
404 not found
To set a 404 page, a *
path exist. This path allow you to have a default redirection when url does not match with one of your routes.
const routes = [
{
path: '*',
action: function() {
document.body.innerHTML = `<h1>404 not found</h1>`
}
}
]
Router link
A specific data attribute data-router-link
must be added to your links to render without refreshing the page. The href
attribute must be the route where you want to go.
<a href="/path/to" data-router-link>label</a>
Redirection
Your can set redirection directly in your route configuration or in your controller.
In route configuration
const routes = [
{
path: '/',
redirect: '/path/to',
action: function(){
document.body.innerHTML = 'Hello world';
}
}
]
Or in an action method
const routes = [
{
path: '/',
action: function(request){
request.redirect('/path/to')
}
}
]
5 years ago