2017.10.12 Routing

Simple Routing

Slowly I came to my first page. The #1 Option Page. So to be really Progressive, we need now a routing.
But taking a look into React Router, seem for my little app strongly to much. I don't need a complicated routing with subpages, URL-parameters or something like.

In the searching for alternatives I found the Medium Block from David Ford: React-router alternative: switch
Here I found my start of the solution. That's all what I need. A small reactor and pusher of the HTML5 History API.

The first experiments

> window.addEventListener('popstate', event => console.log(event));
< undefined
> history.pushState({foo:"bar1"}, "page 1", "/bar1.html");
< undefined

Yeah, the url changed, but nothing happens. Nice.
But what is that object in the first parameter? A small look into the HTML5 History API and it going clear:

> console.log(history.state);
< {foo: "bar1"}

Wow, we can transport data!Let experiment with a second page:

> history.pushState({foo:"bar2"}, "page 2", "/bar2.html");
< undefined
> console.log(history.state);
< {foo: "bar2"}

Seems clear, and now let's click the browser back button:

< PopStateEvent {isTrusted: true, state: {…}, type: "popstate", target: Window, currentTarget: Window, …}
> console.log(history.state);
< {foo: "bar1"}

Thats all.

At least, a look on the PWA Checklist tells us, that we shouldn't use fragment identifiers.
See demo to get the effect: https://client-dot-indexable-pwa.appspot.com/