> For the complete documentation index, see [llms.txt](https://webix.gitbook.io/webix-jet/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webix.gitbook.io/webix-jet/part-ii-webix-jet-in-details/routers.md).

# 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.

```javascript
// myapp.js
import {JetApp, HashRouter} from "webix-jet";

const 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:

```javascript
// myapp.js
import {JetApp, HashRouter} from "webix-jet";

const 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](/webix-jet/part-ii-webix-jet-in-details/app-config.md#beautifying-the-url).

## 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:

```javascript
// 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. If you use the Webpack dev server from a starter kit, this can be done in *webpack.config*:

```javascript
// 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:

```javascript
// 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:

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

[Check out the demo >>](https://github.com/webix-hub/jet-demos/blob/master/sources/routers-url.js)

### 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](/webix-jet/part-ii-webix-jet-in-details/app-config.md#beautifying-the-url).

## 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:

```javascript
// app1.js
import {JetApp, StoreRouter} from "webix-jet";

const app1 = new JetApp({
    start: "/form",
    router: StoreRouter
});
```

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

```javascript
// views/page.js
const PageView = () => ({
    rows: [app1]
});

// app2.js
import {JetApp, HashRouter} from "webix-jet";

const 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.

```javascript
// app1.js
import {JetApp, EmptyRouter} from "webix-jet";

const app1 = new JetApp({
    start: "/form",
    router: EmptyRouter
});
```

[Check out the demo >>](https://github.com/webix-hub/jet-demos/blob/b686944b383745070fc977aa9123f01a36ce2b3c/sources/viewapp.js)

## 5. Sub Router

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

```javascript
// app1.js
import {JetApp, SubRouter} from "webix-jet";

const 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.