This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "HashRouter Configuration" Lesson
[00:00:00]
>> Brian Holt: One of the things that we haven't done so far but is interesting in particular to React itself, is this idea of what we call a higher order component. Or basically a component that has no display of its own. It doesn't actually show the user anything. All it does is it encapsulates behavior.
[00:00:20] So that's what HashRouter is here. It doesn't actually show you anything, all it does is it encapsulates this behavior. In this case it's a router, it can route from page to different page. And so that's what HashRouter is, that's what Match is. They are considered higher order components, or behavior oriented components.
[00:00:40] Which is kind of peculiar, but I think ends up being a really cool abstraction. So HashRouter is just saying, here is my app. And usually, your HashRouter is going to be your route component, typically. Then everything inside of HashRouter is going to be displayed. So it's going to display out this particular div.
[00:01:05] But let's say you have a navigation bar at the top and that was at the top of every single page, you can also put your nav right here as well. Nav, that can also go right there. And then that would get built out on every single page.
>> Brian Holt: Then we have this match components which are interesting.
[00:01:29] So this basically saying, this is one particular route. So anytime that the URL matches this particular pattern, the slash pattern which is the homepage. And it matches that exactly. Then display this landing component. Now, why exactly? Well if I have here, about, and I don't have exactly here.
[00:01:56] This is actually, still going to match. Wait, hold on. That's not what I meant. So, it's gonna be about, and let's say the URL is /about, /about will still match the /. Because it's going to match everything to the left. So if I have /about/me, /about will still match that, as will /.
[00:02:21] So that's why you need exactly to say, I don't you to do like this fuzzy matching business, I want you to just match. And it has to match everything in the URL. Did I sufficiently muddy up that water for you? [LAUGH]
>> Brian Holt: Cool.
>> Brian Holt: I don't know, sometimes that would be a desirable behavior for you to do this matching.
[00:02:50] Of like, match everything despite everything that comes after it.
>> Brian Holt: But almost always you want your homepage to be exactly. Cuz otherwise that's going to match literally everything.
>> Brian Holt: So let's talk about HashRouter, because this is kind of a weird thing.
>> Speaker 2: Question, going back again to the issue of using class and extend,
[00:03:27]
>> Speaker 2: Versus just the create component thing. Any comment on why Facebook has started suggesting using extend?
>> Brian Holt: We'll certainly talk more about this tomorrow, but I think the thing is that Facebook is not interested in maintaining their own version of classes. They're trying to cut down on the size of the code base and if they can get rid of create class, it's just less code that they have to include.
[00:03:56] If they get to use ES6 classes which is already built into the browser, that's probably a net win for users, not necessarily developers. Think that's the gist of why they're trying to do that.
>> Brian Holt: And if that answer doesn't make sense to you yet, I promise I will explain it tomorrow.
[00:04:18]
>> Brian Holt: So HashRouter, some of you may have seen this before and experienced the #/ phenomenon of routing in client-side apps. Why people do this is, obviously, this is ugly. No one wants to do it this way. However, your server doesn't have to care anything about what's going on on the client.
[00:04:41] And the way I mean that, let's say I have a django backend. And I have a search term, every time I add a URL to my frontend I have to go into my django server and make sure that that is routing directly to this app And not only routing there, but it needs to route to slash.
[00:05:03] Because that's where my app actually lives. In other words, you have to make your server aware of your client side routing routes. So you either have to duplicate your routes. So every time you add something on the client side, you have to duplicate it in the Python side, or Ruby side, or Java side, or whatever.
[00:05:21] Or, you have to have some sort of fancy pants like, I generated a JSON manifest that both sides consume. Both of which are less than ideal. So some people just throw up their hands and say I'm not dealing with this, I'm just going to put #/, which the url will still be routed here.
[00:05:37] So if I put #/ here.
>> Brian Holt: Django doesn't care about pounds, it doesn't do anything with anchors. That's actually what they are called. It just always routes those to / or whatever that URL is. So it basically makes it so you don't have to configure your server to care about your client side routing.
[00:05:58] That's why HashRouter exists. It's a hack, but it is a useful hack. For example at Reddit, I say this with Django, because that is literally what I was doing. This is what we had to do for a long time, because we couldn't make our server care about those URLs.
[00:06:11] Does that make sense?
>> Brian Holt: If you can, avoid using HashRouter. But I wanted to show you that exists, because some of us really just don't have the option of using browser-router, which I'm about to show you how use browser-router. It's way better if that URL is just /search/term.
[00:06:37]
>> Brian Holt: And if you're using Node, you really have no reason to, because Node can consume React Router routes.
>> Brian Holt: Which I will show you how to do with universal rendering. You look like you have a question.
>> Speaker 3: How do you comment inside JSX blocks?
>> Brian Holt: How do you comment?
[00:06:57]
>> Speaker 3: Yes, I think seems to be breaking a bunch of stuff.
>> Brian Holt: Yeah, this doesn't work, right?
>> Speaker 3: Yeah [LAUGH].
>> Brian Holt: So the way you have to do it, which is kind of hacky, but it will already make sense to you.
>> Brian Holt: You need to put a JavaScript block, and then this does work.
[00:07:23]
>> Speaker 4: The comment is more expressive.
>> Brian Holt: And the other thing is HTML comments don't work at all. That doesn't work. There might be a way to get that to work, I don't know how to do it though, cuz I don't need HTML comments. That seems kinda counterintuitive.