00:00 I am really excited about routing. Routing is one of the coolest parts of the web. While other native platforms don't typically have any concept of a URL and they kind of have to come up with their own thing, the web has always had this URL that people can bookmark, they can send to each other, they can share on social media,

00:19 they can, without any special like attention as far as the developer is concerned, you just, there it is, they can share that URL. You can email them the URL and have them go exactly where you want them to go. This is a really special part of the web that I really like. So I want you to read this document about what a URL even is.

00:39 It's linked in the instructions. It's a pretty useful explanation of the different segments of the URL. So we've got the scheme, the authority. One thing this leaves off is that you have the option of a username and password as well, which you don't typically use on this. But then we also have the path and then parameters.

00:58 Parameters are kind of interesting because we actually overload this term, right? You've got function parameters that like contextual clues will help you know the difference here. But we also have route params that we'll talk about as well. But yeah, so we've got these parameters that are on the query string and then the anchor.

01:17 Now, the interesting thing about the anchor is it's really just for the client side. The anchor never actually goes to any backend request. So the backend will never get access to what the anchor is. But it can be really useful to help the user anchor themselves to a particular part of the document, which can be quite useful.

01:35 So you can continue to look through all of these URLs. It's pretty interesting what we have at our disposal. So the web, the way you navigate around is with this anchor tag. And don't ask me why it's called an anchor tag. It should be called a link tag and the link tag should be called a resource tag.

01:54 But what do you do? So we have the anchor tag and that will take you to a specific URL. You also have the ability to navigate using a form. And so with this form input, we can say, hey, I want to take whatever the value of this query or this this queue named input is

02:13 and stick it as part of the query string when you make a get request or send the user over to this slash users slash search. So the browser knows how to do this from the very beginning. But forms are navigations just like link clicks.

02:29 The only difference is that forms allow the user to provide some sort of input before sending the user off over to that spot. What's interesting is this form right here is equivalent sort of to this link. So when the user submits this, they're going to end up going to the action.

02:46 You'll notice I left off the method and that's because the method get is the default. The method post is the other option there. I can't do anything else other than those two. But yeah, so this is sort of the equivalent.

03:00 But don't do don't do things this way normally, because the nice thing about using regular anchor tags is that, you know, command click will open up in a different tab and stuff like that. So use anchor tags like links when they're links. But just thought it was kind of interesting to show you that forms are also navigations.

03:19 So also, I want to talk about params, route params. So most of the time we've got dynamism in our URLs. And so here I've got epic web dev. That's a username. And then I've got full stack foundation. That's my repo. So we very often in URLs will have dynamic pieces to this.

03:37 And so we're going to be talking about dynamic pieces to the URL as part of this exercise as well. And then to really help with things in the remix context, we actually have a convention for where you place files so that you don't have to create manually create your route configuration.

03:55 So you just put files in the right place and those will be treated as routes. And then you have special exports for those. So anytime that you're wondering, OK, what are my routes look like right now? You can run NPX remix routes and it will give you kind of a JSX like looking output that will show you what those routes look like.

04:14 Now, there's something really interesting about the way remix does routes and that is nested routing. So here, if I scroll down, we'll look at we've got our root route. So this is where our domain is at. And that is responsible for everything on the page.

04:29 We've already worked in the root route with our styling stuff. And then you've got a nested route. So a child route. And this is the sales route. And then below that. And that's responsible for this part of the page. So if I clicked on accounts, then that would take me to an accounts page and update this part of the page.

04:45 And the root route is going to be responsible for saying, hey, I'm going to render this left nav. And then if I have any children, I'm going to render it over here. So we're going to talk about how to have this parent child relationship. And then sales can also be a parent. So it has these tabs and whichever one of these is selected is what's going to get rendered down here.

05:04 And then further down, we've got a list and detail sort of UI. And so whatever is selected over here will get rendered over here. So nested routes, matching URL segments are it's awesome. Not always do you have this. Like, for example, on my blog, I have slash blog and that's a listing of all my blogs.

05:21 But when I click on one, it is slash blog slash title of the blog. And it just shows the blog. It doesn't show any of the parent UI. So you have this idea of nested routing and nested layout, but also nested URL without the nested layout.

05:37 And we'll do both of those in these exercises. So you can visualize that with the NPX remix routes command. And so here we have our routes. Then we have our root route. And then here, this is called a splat route. We'll learn about that at the very end of the workshop. So we're not going to get into the splat route quite yet.

05:53 But then here we have our auth route and there's a child right here. We've got a bunch of sibling routes right here. All of these are siblings. So they're not going to share any of the layout, even if some of them actually share some of the URL. And then here we've got a parent child relationship.

06:09 We've got some more siblings. And then here in under settings profile, we've got child routes of that. So all of this hierarchy, as far as the layout is concerned, can be visualized using that NPX remix routes, which would be really helpful because we're going to be following a special convention.

06:27 Now, I'll show you that convention, but we can actually, the reason that we have the convention we do is because remix allows you to customize your convention. And so here in the remix config, you can specify your routes option and that gets a define routes function.

06:44 You can do whatever async work you need to do and then return a call to the routes, define routes thing, which will get a route function. And then you can create all these routes. Now, this is a pretty low level API. I don't actually recommend using this directly,

06:58 but this API is what makes remix flat routes possible, which is the convention that we are going to use because it's great. So you're going to maybe struggle a little bit with this convention because it's a new thing and it's got funny characters

07:13 and all that stuff like you can see this in here. We've got routes users plus slash like this is a path, a file path name. So like what the heck is this plus thing? What's this dollar thing? Why is there an underscore there? And then there's a plus again. There's a dot here and a dollar again and another underscore.

07:30 Like there's a bunch of special characters going on in here. And so we're going to be learning all about those things. But I would recommend not worrying so much about memorizing the convention because you always have NPX remix routes to run, to double check that things look the way that you want them to.

07:47 And over time, you will get used to the convention. So it's just something that you will learn just naturally. However, I do recommend that you have this open and you scroll down to the conventions piece that will explain what each one of these different pieces actually mean. In particular,

08:05 the hybrid routes is the reason that we're actually using remix flat routes. And hybrid routes are just fantastic because sometimes your routes can get super duper long. And so this allows you to group things into folders.

08:21 And so that's what you're going to be learning about as part of this exercise. So anyway, I'm stoked. I think that this is going to be a really good time. I've got like boundaries around here to make it easier for you to visualize what are the different pieces to this.

08:36 So you're going to have a good time and we'll see you in the first step of this exercise. Have fun.