Menu

Router

The router determines which view to render for the current page.

What is the Router?

The router is part of the compiled Adaptive.js transformation file. Before compilation, the router is a single file that you can edit for functionality.

The function of the router is to determine which view to render for the current page. Because the Mobify tag is the same on every page of your site, you need to specify the correct behaviour for each page. Using matching functions, you define a set of routes.

There are three important things to remember about the router:

  1. Only one route is matched when resolving a page
  2. Routes are checked in the order in which they were added to the router object
  3. The first route to match is returned

Find the app/global/router.js router JavaScript file in your project directory.


A. Matching Functions

The router uses matching functions to decide which view to render. These are the types of matching functions available:

  1. Router.selectorMatch
  2. Router.urlMatch
  3. Router.pathMatch
  4. JavaScript Function Match

Router API Read the Router function entries in our Adaptive.js API.

These matching functions are described in detail in the following sections.


1. Router.selectorMatch

This matching function uses a jQuery-style selector to check for the existence of an HTML element to determine whether to match on this route.

Example:

// If the “body.home” selector is in the desktop HTML,
// render the Home view.
router.add(Router.selectorMatch('body.home'), Home)

This is our recommended method. It allows you to account for changes in URL structure or different variations of a template.


2. Router.urlMatch

This matching function allows you to check the current page’s URL to determine whether to match on this route.

Example:

// Router.urlMatch checks if a particular URL fragment
// is in the current page’s URL.
// The URL fragment here contains a regular expression.
//
// If the URL match returns true, render the Product view.
router.add(Router.urlMatch('/product/\d+/'), Product)

3. Router.pathMatch

This matching function allows you to check the current page's URL, excluding the query string and hash, to determine whether to match on this route.

Example:

// Router.pathMatch checks if a particular path fragment
// is in the current page’s URL, excluding query string and hash.
// The path fragment here contains a regular expression.
// For example, imagine that the URL of the page is:
// http://www.example.com/testpage.html?query=string#hash
// Router.pathMatch will ignore `?query=string#hash`
//
// If the path match returns true, render the Product view.
router.add(Router.pathMatch('/product/\d+/'), Product)

4. JavaScript Function Match

This matching function allows you to write a JavaScript function that returns true or false, depending on whether to match on this route.

Example:

// If there are both a Navigation and an About section
// on this page, the function will return true.
//
// The router then renders the About view.
router.add(function() {

  // Check if there is at least one page element with the class
  // name "about" and if there is at least one page element with
  // the class name "navigation".
  return $('.about').length > 0 && $('.navigation').length > 0;
}, About)

B. Adding A New Route

1. Add a reference to the new view in the dependencies array of the router.

// Add 'views/newView' to the array
define([
    '$',
    'global/router',
    'pages/home/view',
    'pages/home/newView'
    ], ...

2. Refer to the new view in the function arguments.

...
// Add 'NewView' to the function arguments
function($, Router, Home, NewView)
...</code></pre>
3. Add a route using a matching function.<pre><code class="language-javascript">...
// Add a new route
.add(Router.selectorMatch('#element'), NewView)
...

That's it! The final router.js file looks like this:

define([
    '$',
    'global/router',
    'pages/home/view',
    'pages/home/newView' // add 'view/newView' to array
    ],
// add 'NewView' to function arguments
function($, Router, Home, NewView) {
    var router = new Router();

    router
        .add(Router.selectorMatch('body.home'), Home)
        // add new route
        .add(Router.selectorMatch('#element'), NewView);

    return router;
});

C. Ignore a Page

The Router.Ignore constant allows you to ignore or blacklist a page, in conjunction with a JavaScript Function Match. This is useful when there is a certain page that is out of scope, or if it has a responsive layout that does not require further adaptation.

Example:

// Skip this page from the Mobify adaptation if there is an
// element on the page with class “blog-header”.
router.add(function() {
  return $('.blog-header').length > 0;
}, Router.Ignore)

To ensure that these routes behave properly, add these to the router first.

Edit in GitHub