Routers

To manipulate the URL, views have Routers. Webix Jet has four predefined types of routers.

Type

Displays app URL

Stored

HashRouter

https://myshop.com/#!/my/app

Yes

UrlRouter

https://myshop.com/my/app

Yes

StoreRouter

No

Yes

EmptyRouter

No

No

1. Hash Router (default)

The app URL is displayed after a hashbang. As this router is set by default, there's no need to to define it in the config.

// myapp.js
import {JetApp, HashRouter} from "webix-jet";
var app = new JetApp({
start: "/demo/details",
router: HashRouter //optional
}).render();

Hiding the "!" in the URL

You can hide the "!" in the app URL by using the routerPrefix parameter in the app config. Have a look:

// myapp.js
import {JetApp, HashRouter} from "webix-jet";
var app = new JetApp({
start: "/demo/details",
router: HashRouter, //optional
routerPrefix:""
}).render();

If you set routerPrefix to an empty string, the app URL will look like this:

https://myshop.com/#/sales/top

Other Settings

There is one more setting that can be used to change the URL that is displayed in the address bar -- routes. For details, check the app configuration chapter.

2. URL Router

If you choose UrlRouter, the app URL is displayed without a hashbang. There is a trick with this router: your server-side code should be compatible. You need to provide redirects to avoid error 404.

You must choose UrlRouter in the app configuration:

// myapp.js
import {JetApp, UrlRouter} from "webix-jet";
webix.ready(() => {
const app = new JetApp({
router: UrlRouter,
start: "/top/start"
});
app.render();
});

Next, configure http redirects by adding a fallback. For webpack dev server from a starter kit, this can be done in webpack.config:

// webpack.config.js
devServer:{
historyApiFallback:{
index : "index.html"
}
}

In production apps, this can be done through apache/nginx configuration.

If the app is hosted in a folder, you must provide a router prefix:

// myapp.js
import {JetApp, UrlRouter} from "webix-jet";
webix.ready(() => {
const app = new JetApp({
router: UrlRouter,
routerPrefix: "/myapp", //!
start: "/top/start"
});
app.render();
});

In your index.html you should set the relative URL with the same prefix:

<!-- index.html -->
<script type="text/javascript">
if(document.location.pathname == "/index.html")
document.location.href = "/myapp";
</script>

Check out the demo >>

Other Settings

There is one more setting that can be used to change the URL that is displayed in the address bar -- routes. For details, check the app configuration chapter.

3. Store Router

With this guy, the app URL isn't displayed at all, but it is stored in the session storage. So no worries, you can still return to the previous and next views as if they are in the URL. This can be useful if you have a multilevel application (apps are subviews of other apps). The Store router is set for the enclosed apps because the address bar is already taken by the outer app. Suppose you have closed an app module with a deep level of subviews and expect to be in the same place of this app when you switch to it again. The Store router allows this.

Here's an app module with a form view:

// app1.js
import {JetApp, StoreRouter} from "webix-jet";
var app1 = new JetApp({
start: "/form",
router: StoreRouter
});

Next, the app module is included into a view and the view is included into another app:

// views/page.js
const PageView = () => ({
rows: [app1]
});
// app2.js
import {JetApp, HashRouter} from "webix-jet";
var app2 = new JetApp({
start: "/page",
router: HashRouter
}).render();

4. Empty Router

If you don't want to store the app part of the URL, there's the EmptyRouter for you. The app URL isn't displayed and isn't stored. It's also used for nested apps.

// app1.js
import {JetApp, EmptyRouter} from "webix-jet";
var app1 = new JetApp({
start: "/form",
router: EmptyRouter
});

Check out the demo >>

5. Sub Router

SubRouter is used for navigation in app modules that are included in other apps.

// app1.js
import {JetApp, SubRouter} from "webix-jet";
var app1 = new JetApp({
start: "/form",
router: SubRouter
});

Custom Routers

If these four routers aren't what you want, you can define your own.

A router must be a class with the following methods:

  • constructor(callback, config), where:

    • callback is a function called to set the correct URL,

    • config with the app configuration;

  • set(path, config), where:

    • path is the app URL,

    • config with the silent flag, if it is set, the callback is not called;

  • get() that returns the URL.