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.

Notice: event.state serves also the history state.

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/

Few days later...

Now the router implementation is done and works as expected. A little tricky was the detection, that part of the URL pathname is part of the application, and which part is the hosting directory on the server. At moment I don't have dynamic paths. So I just tests each path and searched for the perfect matching and got the root directory.

It seems now, that the route is a simple adapter between React and the HTML5 History API.
The handling, what the application will do one path changes is in my eyes not resposibillity of the router. The Application contains now the decider what to do. As React like typical I add a state which will be applied on the next render cycle. The router pushes into the HTML5 History API in the moment, when the pathname was changed.
More details I add to the README.