Rudimentary Routing in a Client-side Web Application: Why? What? How?

[nelsonic]

Routing in Web Application is surprisingly simple. There are only a couple of functions we need to write but we want to achieve the following goals:

Acceptance Criteria

• [x] URL (hash) should change to reflect navigation in the app
• [x] History of navigation should be preserved and
  • [x] Browser "back button" should work.
• [x] Pasting or Book-marking a URL should display the desired content when the "page" is loaded

For: #44 "Elmish" Todo List Example

[nelsonic]

setTimeout(function () { // delay for 1 second then run:
  console.log('window.location.href:', window.location.href);
  var base = window.location.href.split('#')[0];
  var active = '#/active';
  console.log('Setting the window.location.href to:', base + active);
  window.location.href = base + active;
  console.log('window.location.href:', window.location.href, 'updated!');
  console.log('window.history.length:', window.history.length);
  window.history.pushState(null, 'Active', active);
  console.log('window.history.length:', window.history.length);
}, 1000)