JSFiddle - React, Tailwind, and code Playground

by ismusidhu

HTML

<script src="https://raw.github.com/OpenGamma/RouteMap/master/routemap.js"></script>
<a href="#abc">ABC</a><br />
<a href="#/pqr">PQR</a><br />
<a href="#/xyz/id=5">XYZ</a><br />
<div id="abc">ABC - Div</div>
<div id="pqr">PQR - Div</div>
<div id="xyz">XYZ - Div</div>

JavaScript

RouteMap.prefix('#');
      var routes = window.RouteMap, rules, rule;
      // set up window listener and initial fire
      $(window).bind('hashchange', routes.handler);
      $(routes.handler); // in addition to binding hash change events to window, also fire it onload
      // add some rules
      rules = {
        load_main: { route: 'abc', method: 'abc' },
        load_foo_main: { route: 'pqr', method: 'pqr' },
        load_foo: { route: 'xyz/:id', method: 'xyz' }
      };
      for (rule in rules) {
        if (rules.hasOwnProperty(rule)) {
          routes.add(rules[rule]);
        }
      }
    window.abc = function() {
        alert("abc");
      $("div").hide();
      $("#abc").show();
    }

    window.pqr = function() {
      $("div").hide();
       alert("pqr");
      $("#pqr").show();
    }

    window.xyz = function(id) {
      alert("xyz" + id);
      $("div").hide();
      $("#xyz").show();
    }