sidiousvic/phantom

Add example to demonstrate a client routing pattern

Opened this issue · 0 comments

This is a simple, declarative implementation of a routing mechanism that may or may not work well with phantom:

⚠ Precludes that the index page is served by default to all routes.

function phantomComponent() {
  const route = window.location.pathname;
  switch (route) {
    case "/view1":
      return `${View1()}`;
    case "/view2":
      return `${View1()}`;
  }
}

function View1() {
  return `<div id="view-1">{...}</div>`;
}

function View2() {
  return `<div id="view-2">{...}</div>`;
}

Implement an example that demonstrates a pattern like such as the above.

Useful resources:
Create a Modern Vanilla Javascript Router on HACKDOOR
How to Build a Router With Vanilla JavaScript
Implementing Simple SPA Routing Using Vanilla JavaScript