What is the use of Backbone.js router ?

Last Updated : 22 Jan, 2024

Backbone.js is a compact library used to organize JavaScript code. It is additionally regarded as an MVC/MV* framework. MVC is essentially an architecture paradigm for designing user interfaces, in case you are unfamiliar. It allows you to develop front-end applications in a much easier way by implementing JavaScript functions. BackboneJS provides many building components for putting together client-side web applications, including models, views, events, routers, and collections.

Why use Router from Backbone.js?

The Router is one of the really helpful components provided by Backbone. The URL representation of the application’s object is defined by the router, which is used to route client-side applications. When online applications offer linkable and shareable URLs for crucial spots in the program, a router is necessary. We can employ functions to perform or views to show up when the said keyword is used inside the URL. It is employed in the creation of single-page apps. A web application that just requires one page is known as a single-page application. providing a rich user experience that is comparable to desktop programs. A single-page application has a smooth UI and a relatively faster performance in the application.

In Backbone.js, several methods are available for manipulating the router. Here’s a brief description of each method:

extend:
- Used to extend Backbone’s router class, allowing the creation of custom router classes with additional functionality.
routes:
- Enables the definition of the URL representation of the application’s objects. It maps URLs to specific functions, defining how the application should respond to different routes.
initialize:
- Creates a new constructor for the router, allowing customization and setup when the router is instantiated. This method is called automatically during router creation.
route:
- Creates a route for the router, associating a URL pattern with a callback function. When the specified URL is navigated, the associated callback is executed.
navigate:
- Updates the URL in the application without triggering a page reload. It’s commonly used for navigating within the application and updating the URL accordingly.
execute:
- Used when a route matches its corresponding callback. This method allows custom logic to be executed before or after the route’s callback function, providing flexibility in handling route transitions.

How to use Router in Backbone.js?

We need to extend the Router class using the below-given syntax:

let VariableName = Backbone.Router
    .extend({properties, classProperties},);

Then we need to add the keywords that will be added to the URL and we need to define the functions that will be called when these keywords are added.

routes: {  
    'keyword_1': 'exampleFunc_1',  
    'keyword_2': 'exampleFunc_2'  
    ...
},

Then we need to define the functions which will be triggered and declared corresponding to the keywords.

exampleFunc_1: function(){  
    ... 
},  
exampleFunc_2: function(){  
    ...  
}, 
...

At last, we need to create an object of the Router class and we need to add the history.start method which makes the Router manipulate the History.

let ObjectName=new Router;     
Backbone.history.start();

Example: The Example below demonstrates how we can use the Router in Backbone.js.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>What is the use of Backbone.js router?</title>
    <script src=
"https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>What is the use of Backbone.js router?</h3>
 
    <script type="text/javascript">
 
        let Router = Backbone.Router.extend({
            routes: {
                'first_link': 'first_route',
                'second_link': 'second_route'
            },
            first_route: function () {
                document.write(
                    "First Route has been called.");
            },
 
            second_route: function () {
                document.write(
                    "Second Route has been called.");
            },
        });
        let router = new Router;
 
        Backbone.history.start();
    </script>
</body>
 
</html>