Routing Q&A

[00:00:00]
>> Speaker 2: Why would you not use the constructor of the web component to pass in the ID versus creating this additional?
>> Maximiliano Firtman: So, I mean, we can, what you're talking about is that we should first get the params and then do this. No, actually, this again, no, I'm sorry.

[00:00:22]
And here pass params, right? Yep, if you like that, it's fine.
>> Speaker 3: You were suggesting as a data attribute.
>> Maximiliano Firtman: Also it can be a data attribute, yeah. So instead of this, you can use datalist. And you can say, urlParans. By the way, when you use this, urlParams, becomes data-url-params automatically.

[00:00:57]
It converts camel case into Kevav case, that's the one with the hyphen.
>> Maximiliano Firtman: So in this case, yeah, you pick the solution you want. Actually, it's not gonna be a big difference. Okay? So you can pass as an argument in the constructor, but that means that you will need to create the constructor that sometimes you don't do that in web component.

[00:01:14]
But, yeah, if you need the data, you will be forced to do that. In this case, yeah. I created just a normal argument, okay, but it's up to you. It's just the same.
>> Speaker 4: What happens if you have more than one route that has the projects.
>> Maximiliano Firtman: Well, as many router systems the order is important, so the first one that is actually matching.

[00:01:39]
Okay, actually, I didn't do this. You do a break, which means that the first one that matches you go outside of the floor, so it will use the first one. The first route that you find that matches the current URL will be the chosen one. Is that what you ask?

[00:01:55]
>> Speaker 4: I guess, if you have, for instance, right now you have movie/id. Now what if it's account/id? How can you tell the router, which route to take?
>> Maximiliano Firtman: Well, actually, you will change this. So account, it will be another one with this. That what you're saying?
>> Speaker 4: Right, something like that, account ID.

[00:02:17]
Then how does it to know where to go?
>> Maximiliano Firtman: Here, because you will change this account page. So that component is the one that the router will use based on the current route. So it will send the parameter to account page. Does it make sense? So we are creating a router that then you can use later to add more routes in different formats.

[00:02:43]
>> Speaker 4: But it's all based on the current path that you're on. So if I go from my AccountPage to movie page, it's gonna use a router based on the path that I'm going?
>> Maximiliano Firtman: I'm not sure I'm following you. So the router is reading the URL, okay? So when the URL changes, the router sees the URL.

[00:03:06]
It doesn't matter where you are. It doesn't matter where you are, it's reading the new URL and said, we need to go there, and it goes there. So there is no relationship between the previous page and the next page. Does it make sense? Sure?
>> Speaker 4: Yeah, no, so it's all based on where you're at, basically, and where you want to go.

[00:03:25]
>> Maximiliano Firtman: Where you wanna go, not where you are. It doesn't matter where you are.
>> Speaker 4: Got it.
>> Maximiliano Firtman: For this router, at least, it doesn't matter where you are. The only thing that matters is where you want to go, okay? And you express where you want to go by changing the route.

[00:03:41]
And you can change the route, you can call the route. Let me remove this, because it will give me an exception. Just calling Router.go with the location. Or maybe by changing the URL, we will see that, how we should do that, okay? If I don't have any value, I think that my router is ready.

[00:04:05]
Again, it's a little complex, not too much. I just explained how that works. It's just programming, nothing really complicated, just when you understand how that works, okay, it's actually pretty simple. You have any question on that?
>> Speaker 5: Should the break be inside of the if statement, or?
>> Maximiliano Firtman: Yeah, you're right, thank you.

[00:04:26]
So I do have about because if not, it will on the first regular expression, even if it's not matching, it will just stop there.
>> Speaker 6: I think you removed params from before.
>> Maximiliano Firtman: Maybe, yeah, you're right, yeah. So in this case, we were taking the params for match.slice (1).

[00:04:59]
>> Maximiliano Firtman: Now we will see if it's working. But anyway, before seeing if we have any any bug to solve, how to use the router. Because right now it's in the module and it's just a constant, I may wanna export maybe that constant. But anyway, how to use it from anywhere in my app?

[00:05:16]
Well, we can expose it in app.js. Up here, remember we do have a global window.app. By the way, going back to the window idea, here is just window.app. Instead of saying window.app, I can just say let app and it's just the same. It will be window app anyway.

[00:05:34]
So let app because the global variable or window app is just the same. So from here, I can just add the router like this. This is a JSON shortcut. So this is like router router. But instead of saying router router, now you can just say router and it just works.

[00:05:58]
So that means that now, just for now, to see if this is working or not, probably we have an error or something. I can say app.Router.go, and I can try to go somewhere else, to someplace and see what happens. We have an error saying cannot read properties of undefined reading go.

[00:06:18]
Okay, so, but I think the problem is that then, I'm not sure if I refresh. Check that. Well, yeah, I didn't refresh, and we have another issue. Quickly, what's going on? Quickly, quickly, quickly. I don't have the.js.
>> Speaker 7: Js.
>> Maximiliano Firtman: That's an import here, missing the.js. That's pretty common when you're doing Manila Javascript and using VS Code.

[00:06:46]
There is a property that you can change. I don't remember exactly which properties, but it's where you can say that you always want to add the Javascript.js.