Another new addition in version 5 is the use of routers in our application. Routing can be used to track an application's state through the use of the browser history stack. It also allows deep linking into the application, which allows a direct link to a specific part of your application. As an example, open the Kitchen Sink example (Sencha's own examples), as shown here:

The #basic-panels part of the URL is called the hash or fragment identifier. The browser fires an event, called hashchange, that is recognized by our application, and we can use it and react according to the value (or values) assigned to it.

So, in this URL example, if you copy the URL, close the browser, reopen it, and paste the URL, the application will open with the last module (view) you were in. In this case, it is the basic-panels example.

To implement this in our application, let's make some slight changes to the app.js file. At the end of the file (code), insert the following code:

...