JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<a href="#/path1/path1FirstValue/path1SecondValue">Path 1</a>
<a href="#/path1/path1OtherValue/path1OtherOtherValue/path1EvenMoreValue">Path 1 Extended</a>
<a href="#/path3/glob/glob2/glob3">Glob path</a>
<a href="#/some1path/one">Regex Path</a>
<a href="#/some2path/two">Regex Path 2</a>
<a href="#/unknown">Unknown Path</a>

<h2>Results</h2>
<p>Path: <span id="pathElement"></span></p>
<pre id="paramsElement"></pre>

JavaScript

require(['dojo/router'], function (router) {
    
    var pathELement = document.getElementById('pathElement');
    var paramsElement = document.getElementById('paramsElement');  
    
    function logPath(pathName, params) {
        pathElement.innerHTML = pathName;
        paramsElement.innerHTML = JSON.stringify(params, null, 2);
    }
    
    router.startup();
    router.go("/path1/first/second");
    
    // string example
    router.register('/path1/*rest', function(event) {
        logPath(event.newPath, event.params);
    });
    
    router.register('/path1/:first/:second', function (event) {
      logPath(event.newPath, event.params);
    });
    
    // string glob example
    router.register('/path3/*id', function (event) {
      logPath(event.newPath, event.params);
    });
    
    // regular expression example
    router.register(/some[0-2]path(\/\w+)/, function (event) {
      logPath(event.newPath, event.params);
    });
});