Routing Exercise

[00:00:00]
>> Your mission is to take the photo gallery and the to-do viewer component that's currently just being displayed as two different, side by side. We're gonna make them routes, so it should be /display/to-dos/display/photos. And then if you want, go ahead and update the NAV bar as well to reflect that so people can jump between the two.

[00:00:19]
And the other thing is I still want you to leave the display page intact in terms of let's just check to make your life a little bit easier, let's just delete all this Display So basically if someone goes to slash display, it should still show a page. And then when they go to the specific routes, then they'll see the individual apps separately, that is the plan.

[00:00:46]
So I'm gonna push this up so that no one's confused. Simplify Display page.
>> And just to confirm, the URLs should be, whack display, whack photos, whack todos.
>> Yeah, so actually, what I'm gonna do just to help you out too, Let me just, in here, I'll just put this as a todo.

[00:01:07]
So, the result we're looking for, is we wanna have two new routes, we have /display/todos, and we have /display/photos, just like that. These are the NAV paths you're looking for. We're now at the point we're starting to nest folders, right? So let's talk about what most likely went through the approach, is that you probably thought, okay, I'm gonna create a folder, call a display or let's say display.

[00:01:42]
Then I'm gonna create a file called todos.view. And I'll create a file called photos.view. And again, for the sake of simplicity, right now we're not gonna worry about functionality, we're just literally gonna show the page. So we just need to have an h1 here, this will be for photos and then I'll copy all that.

[00:02:02]
I dropped out here, this will be todos. Okay, this this feels pretty good, let's see what happens. So I'm gonna come over here and we're gonna refresh, it looks like the home is still working, display is still working, okay, pretty good. Anyway, okay, let's actually add the navigation items because that's how we can actually test if this is actually working.

[00:02:24]
So we can go here, let's go to the navbar that we have over here. And let's just drop this down to the two that we care about. And then let's go ahead and wrap these two in the NextLink component. Go to the end, also NextLink. Then we'll go ahead and just say this, so this is alphabetic order.

[00:02:43]
Let's do Photos, so in those two todos. Finally, we'll just go ahead and do the to attribute /display/ what? That will be /photo/todos, okay, so far I think it seems pretty standard, right? Great, so we'll come in here. It looks like it's already anticipated it. He said we're clicking on it and nothing is happening, weird.

[00:03:09]
Why is that happening? Well, the reason this is happening is actually expected, this is not a bug. It's because when you define a top layer page like this, that's display. Remember, if we think about traditional HTML routing, what is displayed normally expect? An index.html page. So in other words you've kind of like the routing is, it kinda stops at this point, where it's like there's this display.view, so I don't need to look any further.

[00:03:34]
But one way to approach this is we could say let's remove display.view inside of the display directory, and make this index.view. This is one way to approach it, so just to verify that this works, let's go ahead, and update this. We go to home, display, there it is, photos, todos, easy enough.

[00:03:57]
But believe it or not there actually is another way to do this. So one of the things that got a lot of press recently I think within the React community is around the idea of nested view. But nested views has actually existed inside of view for a long time.

[00:04:12]
And what it essentially means is that remember one of the things that client side routing tries to do for you, is that it tries not to make you reload the entire resources of the pages. One of the benefits of towels. And so if you think of it one way is that, well, if you know that your app.view is what you share.

[00:04:27]
And then it stands to reason that when you have children routes of a parent route you might actually want to just render on part of the parent and not refresh the entire page. Because right now the way we're doing it we are we are getting basically a whole new page every time, right?

[00:04:41]
Index.html, todo.html, photos.html. And there's some optimization there but roughly let's say conceptually that's what's happening. What if for instance we actually wanted it to be a sub part? So let me go ahead and rename this back to display.view. And we put it back under pages. And this time, once again, let's say we have a section down here and we're gonna call this thing display app for now, placeholder.

[00:05:11]
And then ideally what we wanna say right, is there's some sort of slot that accepts the children. That's what we wanna ideally be able to do because everything else needs to say the same, we just need the section to change. Well, we talked about this earlier. All we need is the next page component, just like we had before at the app level, when it's used, basically it knows that like from this point on any children of this page of display will be dropped inside of this slot basically.

[00:05:42]
So to show how that works, we go back. Whoops, that's too far. There we go, I forgot boma is linked up there. We didn't actually replace [LAUGH] that yet that's why that's doing that. All right, home, display, hold up, display index view. I think I crashed the server, hang on.

[00:06:09]
So when you're playing around with routing like this, where I'm intentionally messing with it, occasionally you'll need to reboot your server. Just know that that's a thing that sometimes happens. Okay, there we go. Now, we have to display at placeholder, photos, todos. Did you see that? The display and display app placeholder stay put and then everything else changes.

[00:06:30]
And so now that we have this working, now let's go ahead and actually just finish this as far as placing that in. Just to make things easy for now let's just inside it todos, we're just gonna render out our TodoViewer, just here. And then for our photos we will just render out our photoGallery.

[00:06:50]
And again, no imports needed now you'll see yes there's all my data I go to my photos. Weird what just happened here? Todos, now todo is broken too, what's going on? So if I refresh that seems to be fine, if we go to display, refresh, that's fine. Photos, that's good, when I switched from photos to todos, once again something's breaking, what's going on?

[00:07:14]
Anyone have a guess? Once you've done this long enough, you start to realize whenever you notice something's not loading correctly. Most likely, there's some weird caching thing going on. And it's because a lot of these frameworks try to optimize for like what they think you wanna do. And so the thing about things like slots and next page is that it's trying to cache the result, when in fact you want it to basically every time it switches you do want it to change.

[00:07:38]
So in other words, what you really need to do is need to assign a basically a dynamic key. And the key on any sort of virtual DOM thing is what's critical to basically letting the V DOM know, hey, this thing needs to be changed. Basically, you're forcing a refresh on this specific section, not anywhere else just on this key.

[00:07:55]
And so you'll see this with basically looped things V for, basically any of that anytime you see some weird glitch with that stuff. Most likely, there's something wrong with your key. It does something to keep in mind as going forward. We don't have the tools quite yet to fix this, but we'll get there.

[00:08:11]
So as you can see, the two approaches result in, basically, there are actually two different results. They're not the same solution for the, sorry, these two approaches solve different problems, and that's what's important. This is not even a preference thing anymore. I like index.view or I don't like index.view.

[00:08:32]
There's clearly something regarding nested child routes and all these things that are going on. So just know that that's the difference. For the most part, we're let's go ahead and just move it back so that we're back to the sort of regular file structure directory. Because again, nested views is something that you you have something very specific in mind that you're trying to optimize for.

[00:08:55]
And I find that most of the time for most people's routes third loop, really, they just want the page, they're not trying to do anything fancy just yet. And so, now that there's a difference with that.