Challenge 13: Basic Hash Router

[00:00:00]
>> Evan You: So, routing. How many of you have used the devue router? Okay, how many of used the router of sorting another framework? Okay, great. So, I guess, most of us know what single page application routing is all about. You have URLs, you wanna map them to components, that's the gist of it.

[00:00:22]
So, the goal of these exercises is really about going from the ground up and see how it can be done in the view context. So, let's go into the first exercise in routing
>> Evan You: And it's,
>> Evan You: Let's put a very extremely simple hash-based routing solution. It's not even a router, it's just routing using direct browser API's.

[00:00:53]
So, we all know that in the browser there are two ways to do routing you can use a hash or you can use the HTML5 History API. HTML5 History API is better in the sense, it supports pop state and you get better looking URLs but it requires some sort of server configuration, so that when you directly visit a deep link, the server still renders the same static HTML page for your client-side router to pick up.

[00:01:28]
So, for the sake of exercise where just also the history API is a bit more complex than a hash API to work with. So, for the sake of the exercise, we're just gonna stick to hash routers. Because aside from the browser API differences, the [INAUDIBLE] Implementation is really the more similar and more important part.

[00:01:50]
Our goal is build a small app that when hash is foo, it should display foo. When hash is bar, it should display bar, simple as that. The two APIs you can use is, if you wanna access the current hash in the URL, use window.location.hash. If you wanna listen to hash changes, you can add a hashchange listener to your window, to listen for changes.

[00:02:19]
And the template is already written out for you. You need to figure out what to fill in here. This is where our main view will be rendered. We provide two link already, and the rest is up to you.