This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "BrowserRouter" Lesson
[00:00:00]
>> Brian Holt: I'm getting really sick of this hash routing going on. So let's actually go make that work. Go back to client app. Change hash router in all three places here to, come on. Change that to BrowserRouter.
>> Brian Holt: So import BrowserRouter, and then the opening and closing tag, change that to BrowserRouter.
[00:00:36]
>> Brian Holt: Okay? Now go to your web pack config.
>> Brian Holt: And inside of the devServer, just have one more thing that says, historyAPIFallBack is true. This is basically telling you that devServer that if you don't recognize something just send it down to the client or in another words the client who worry about the routing, I will not.
[00:01:11] So I just add a line 13 here.
>> Speaker 2: And that allows browser router to work.
>> Brian Holt: Yep. If you don't put that then your gonna get a 404 as soon as you go to search, right? Cuz it doesn't know to send it down to index.html.
>> Brian Holt: Now you got to restart your server because you modifies the.
[00:01:39]
>> Brian Holt: And there you go. 404s will fallback to /index.html.
>> Brian Holt: The question I'm often asked here is well If 404's fall back to the index.html, what happens when they actually have a 404? And the answer to that question is your browser route will have to take care of it as well.
[00:02:04]
>> Brian Holt: So In fact I think we can just do that super quick. Not this isn't in my notes, so programming on the fly. So you can const FourOhFour equals <h1>404, and then you can just do down here last thing, route, and you just say component, without a path, basically it says, if nothing else matches, then render this.
[00:02:51]
>> Brian Holt: I'll go back in just a second, but let me. When I'm coding on the fly it's probably best to, then you need to do switch right? All right, well we're getting crazy now.
>> Brian Holt: So we're gonna put a component in there called switch and I think this should work now.
[00:03:29]
>> Brian Holt: Good.
>> Brian Holt: Okay, so let's talk about what we did here. Okay, so a couple things happened.
>> Brian Holt: The first thing we did is we switched to browser router, right? So if you look here our URLs are now much better, they look like we would expect. When you go to /search it takes you to this page is suppose to have no stupid hash in there.
[00:03:56] This is also way more SEO friendly, like 10 billion times more SEO friendly, I believe that's an actual number. This second thing we did here, is we told Webpack that it whenever does not recognize the URL right cuz it doesn't have a slash search file to serve, it doesn't know about anything like that.
[00:04:18] It's just that if you don't recognize something just send it index.html, that's what this history API fallback is. This is probably not what you're gonna do in production, definitely not what you're gonna do in production. Well actually, you're not going to run desk server in production. So you're not going to do that in production.
[00:04:37] So this is the death trick, okay. And then you're gonna go back to ClientApp. I wanted to show you what a 404 looks like. So, we made this 404 component and we told it to render basically anytime that nothing else has matched. However, if we did not put the switch component in.
[00:05:03] What the switch component does is it says render exactly one component.
>> Brian Holt: And never render two. So then it's gonna go in order and notice on landing, it matches this one first, right. So then it doesn't even look at the other ones. If I don't have that switch component in there, it's gonna render both of them, right, cuz they both technically match.
[00:05:25] This one right here, 404 matches everything. All right so you need to switch component to say, only render this when nothing else matches and make sure it's the last one. Any questions about router?
>> Brian Holt: There's some more advanced and weird cases you can use with the router. But to be honest with you, this is most of it.
[00:05:50] I'm gonna show you the other two hard things to do with router, which is making server-side router work because, if you don't do it correctly, you end up writing your routes twice, right? Once on the server and once on the client. And as everyone knows who writes any amount of code, if you ever try to keep two files in sync, they inevitably fall out of sync.
[00:06:10] Right? So it's really nice if we can make the server side of the router here work on both the client and the server. Which, you can. It is possible. We;ll do that later and then, we'll also do code splitting, so you can split on routes as well. So, you can asynchronously load those chunks.
[00:06:29] Yeah?
>> Speaker 3: How do you comment out a section of html in jsx?
>> Brian Holt: Yeah, so he's astutely pointing out that that does not work. So, if you remember, anything between the curly braces is a JavaScript expression, right? So if I wanted to comment out this route right here, I'd do.
[00:06:56]
>> Brian Holt: Right?
>> Brian Holt: That's how you do block comments in JavaScript is /* */ to end it. And then we just put that in curly braces, and anything between those two things will be commented out.
>> Brian Holt: Makes sense?
>> Brian Holt: The other thing you can do, which is pretty easy is you can just move it out and then just comment it.
[00:07:36]
>> Speaker 3: One note on that. Because I used my command/editor comment and it did that. Did exactly what you said but then the linter underlined it. And now that you said that is correct I looked at what the linter was telling me a space is required after the asterisk.
[00:07:55]
>> Brian Holt: Yep. Like that?
>> Speaker 3: Yes.
>> Brian Holt: Yep. That airbnb config is super strict. But it will save you bugs I promise.
>> Brian Holt: Other questions?
>> Brian Holt: How do we feel so far? Is the brain melting a little bit, is it just a little mushy? It's a lot of content in a short amount of time.
[00:08:24]
>> Speaker 4: I do have one question.
>> Brian Holt: Yeah, please.
>> Speaker 4: Would you be able to do like dynamic routing?
>> Brian Holt: In what sense?
>> Speaker 4: So let's say that were going to do translations or something like that, and then in the URL have like English or Spanish, like /en or /es or something like that.
[00:08:46]
>> Brian Holt: You do it like that.
>> Speaker 4: You can do it like that?
>> Brian Holt: So if you prefix it with a colon, it's saying this is a variable and it'll actually be doing this later when we add our next route, which is details. And now, so basically anything can match on this, right?
[00:09:00] You can give it regular expressions. I think they only match on certain things. There's some fancyness to go on there.
>> Speaker 4: Okay.
>> Brian Holt: It will then pass it as a paramenter to search. Right? And then instead of search you can switch on and do whatever you want.
>> Speaker 5: People are just asking here, get plugin for sublime that's adding the little green and red dots.
[00:09:21]
>> Brian Holt: Right here on the side?
>> Speaker 5: Yep.
>> Brian Holt: It's called Git cutter.
>> Speaker 5: Git cutter.
>> Brian Holt: It's one of my favorites. So if you look, it's probably super hard for you guys to see. If you see that little plus red right there, my theme is all sorts of messed up right now.
[00:09:40] It's a lot bigger typically on my computer. But that's a line that I have modified, I think. No, I deleted lines between that since I last committed. Or if I add, like, so you see what the white means I've added new lines. And then if I do, like.
[00:10:04]
>> Brian Holt: You'll see, that's red because it's not real.
>> Brian Holt: If you look down here where it says the yellow square, I've modified it, so that actually might be useful for you to kind of follow along, cuz you can see things I've changed since I last committed.
>> Speaker 5: And then they're also saying in the terminal as well.
[00:10:24] You've got something forget, like my zsh, get plugin, or something like that.
>> Brian Holt: The my bash prompt, this thing?
>> Brian Holt: They might be talking about that. Brew list.
>> Brian Holt: This bash-git-prompt, that's what it is.
>> Brian Holt: So I'm using bash, this isn't zsh. I was using fish before this, but if I used fish, no one would understand what the hell I was doing.
[00:10:58] So we're just sticking to bash today, yeah.
>> Speaker 5: Is there any known disadvantages to using the hash router?
>> Brian Holt: It's like, really SEO unfriendly in particular. So that's part of it. Just it's easier to set up server side. But once you set it up on the server side to work with the client typically it's not a lot more work to keep it going.
[00:11:25] So it's just a little bit more front work, and it just makes for better looking URLs which it's just a better thing.
>> Brian Holt: Yeah it makes deep linking better, it's just a better thing, you should do it cuz I said so. Just kidding, I don't know.
>> Speaker 6: I was gonna ask the exact same question.
[00:11:48]
>> Brian Holt: Yeah. Better looking URLs, right? I mean, one of the tests that I ran at a former company was we found that if you have better URLs, people can remember them. And so they'll share them. They'll tweet them all those sorts of things.
>> Brian Holt: And if people see hashes in it, they don't know what they mean.