@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')
    }
  }
]