title: How to create a vanilla JS routing for SPA?
body: <p>I'm creating a web app with no frameworks/tools/libraries, all Vanilla JS. I'm doing it in more of a 'React' style.</p>
  <p>I'd like to call a view that is in my views/pages/dashboard.js, display that view and change the URL when the user clicks the dashboard nav link. This is the navbar: <a href="https://codepen.io/Aurelian/pen/EGJvZW" rel="nofollow noreferrer">https://codepen.io/Aurelian/pen/EGJvZW</a>.</p>
  <p>Perhaps it'd be nice to integrate the sub-nav items into the routing. What if the user is in the GitHub folder on profile, how would I display that in the URL as well?</p>
  <p>How can I create a routing for this?</p>
  <p>The GitHub repo is <a href="https://github.com/AurelianSpodarec/JS_GitHub_Replica/tree/master/src/js" rel="nofollow noreferrer">https://github.com/AurelianSpodarec/JS_GitHub_Replica/tree/master/src/js</a></p>
  <p>This is what I've tried:</p>
  <pre><code>document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
      var Router = function (name, routes) {
          return {
              name: name,
              routes: routes
          }
      };
      var view = document.getElementsByClassName('main-container');
      var myRouter = new Router('myRouter', [
          {
              path: '/',
              name: &quot;Dahsboard&quot;
          },
          {
              path: '/todo',
              name: &quot;To-Do&quot;
          },
          {
              path: '/calendar',
              name: &quot;Calendar&quot;
          }
      ]);
      var currentPath = window.location.pathname;
      if (currentPath === '/') {
          view.innerHTML = &quot;You are on the Dashboard&quot;;
          console.log(view);
      } else {
          view.innerHTML = &quot;you are not&quot;;
      }
  });
  </code></pre>