Challenge 14: Solution

[00:00:00]
>> Evan You: As mentioned, if you're using REDUX functions, we don't really need all of that. We need to implement it ourselves. And the url handling part is largely the same as last time. Window.location.hash slice1, and we'll just copy this, and update our app.url when everything's changed. And the [SOUND] midi part here is how to figure out which component to use.

[00:00:38]
So lets write the router table so we can obviously just do this, [SOUND] pretty straightforward. So just so that it looks more like a router table let's make the key strings and, what to do here is we still need a root level div if we want to render those links as well.

[00:01:04]
Inside the div the first thing we want to return is the component, essentially the router view that we want to render for the current route. And we have the current URL. And we have the route table. So let's just check if the route table contains a component that's matching what we want here.

[00:01:30]
And if there's nothing there, we can simply fall back to the not found component. So this completes the task of finding the corresponding component out of the route table and falling back to the NotFound if there is nothing matched. And we also need to have the two a links, I believe.

[00:01:54]
[SOUND] Foo.
>> Evan You: And copy it with it bar.
>> Evan You: So one thing you may notice, if we run this,
>> Evan You: But notice that there's no space between foo and bar, unlike if you use templates. This is because when you use HTML templates, it retains the white space between your elements if there are new lines.

[00:02:41]
This is the same behavior as if you're writing normal HTML, but when you're using Reno functions, there's no white space node between the foo and bar. So they're just close to each; there's no white space in between. So a lot of people are not used to this when they switch to reno functions.

[00:03:03]
And you can either deal with this with CSS, or if you want to, you could just add an empty space in between manually.
>> Evan You: So this should make it look better.
>> Evan You: And it switches and more importantly. Let's go to some random URL and it will show not found.