Challenge 13: Solution

[00:00:00]
>> Evan You: So the very obvious, well, not really obvious but we need to keep the URL as a piece of reactive state inside our app, in order for our app to react to the changes. So our root and probably, should have data property called url to hold the current url.

[00:00:24]
And where do we get the url? We get it by retrieving window.location.hash, and we can slice off the leading hash, just so things look a bit cleaner. But the important thing is, you want to initialize your app URL with that hash, when the app boots. This is important for passing the test because, if you directly visit your page with hash foo.

[00:00:58]
And you don't initialize, you're always something like null or something, right? Then, no components will be matched, and your page will just be blank when people visit an existing, directly visit a hashed drl. Which is not good. So initializing your f state to width with the hash on start up, it's important to enable deep linking.

[00:01:26]
And then, inside the hashchange listener, we just update the URL. So this is enough to trigger reactive updates, causing you to update your app. And next is, in this case, I'm using two components here. But if you are lazy or you just want to get it working, you can in fact just do something like url.

[00:01:55]
[LAUGH] That's pretty much it. But in most cases, when you do routing, you are switching between pages, virtual pages, right? And in the context of view or most of today's frameworks, pages are just components, right? It just boxes all the way down. So we use components, top level components to represent the pages.

[00:02:19]
And really when you talk about switching pages in a single page application app, you're switched between components. So which is why the component is syntax is, well suited for this use case. Alternatively, you can get rid of all this and get renofunctions, remembering renofunctions, we were able to, we'll actually talk about that later.

[00:02:47]
Now, our components are standardly registered under fluent bar, and we use component is url to match that. This should give us the desired result in the browser. Really, all you need to do is make sure the URL is reactive and that there is a way to translate URL into a component that's rendered in your template