This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Debugging & Reach Router Link" Lesson
[00:00:00]
>> Brian: Now, what's cool here, if I go into details, I'm gonna show you just kinda a fun trick here. So we're gonna take in the props here. And I wanna see what's actually coming in from the props. One, probably just use the dev tools, cuz that's the easiest way to do it.
[00:00:15] But I'm gonna show you another kind of fun trick that I did actually learn from Ryan Florence. So, I'm gonna say JSON.stringify(prop, snull, 4)
>> Brian: So, I used pre and code. So, pre as in preformatted and code and this is going to be code, right? And I put JSON stringify, so this is gonna take props and put it into like a nice pretty printed kinda way.
[00:00:49] So now if I go in here and I go to /details/ something like that, right? Now this might be a little hard for you to see but I can see everything that's coming in from the routers. The routers actually giving a pretty substantial amount of information to you, right?
[00:01:06] So, it's giving you the path, the ID, right? Notice the ID matches this ID up here, as in if I change it here, notice it will change down here as well. The URI and then a bunch of stuff location like but the port is the hash ,the state that's all coming in from the history package, if you're curious.
[00:01:25] So, if you do this, the pre formatted in code with JSON string if I would with obviously any object in here, this will give you a nice pretty printed view of the props. And this is also useful for doing with state as well, if you wanna see how state and props are changing over time.
[00:01:42] It's just a nice little debugging technique to dump something out to the dom. Largely I could also just go, if I just did Inspect element and looked at the React devtools here. I could see the exact same information. So here in Details, that same information is available on the right of my screen.
[00:02:02] You don't need to read it, but just know that it's there. Also, look how many components reach their outputs in there, it's quite a lot. You'll see this a lot with libraries because they have to have multiple different layers to capture different parts of it, and that's pretty typical.
[00:02:22] I don't write code like this where you separate it out into various different behaviors, like this one has like a location, location provider, right or implementation, focus handler, focus handled implementation. There's a lot going on here.
>> Brian: But you'll see that a lot in libraries, which is when this search functionality becomes useful.
[00:02:44] So I can just search for details and I can find it.
>> Brian: Good, any questions?
>> Brian: All right
>> Brian: So, let's make it so that when you click this Adopt Me that it will take you back to the home page, cuz most people expect that rise, so I want to show you how to use a link.
[00:03:10] So we'll leave this like this for now and we'll fix it in just a second. We're gonna go back to app.js and we're going to wrap this h1 in a link. So I'm going to put link, and again I'm going to use the auto import here. Notice that imported that up here at reach router on line 3.
[00:03:35] And I'll just close that. And I'm gonna say Link to =/, and then inside of that link, I'm gonna put this h1.
>> Brian: And actually let's go ahead and do it this way. Let's just,
>> Brian: Get rid of all the step around link, I'm gonna actually put this inside of the header.
[00:04:16]
>> Brian: Like that.
>> Brian: So all I did here is I deleted the h1 totally, and then I put header, and then inside of that I put a link. This link is ultimately gonna end up being an A tag, but the nice thing about using a link instead of A is that, reach-router will handle all of the various different routing mechanisms for you automatically.
[00:04:41] I'm sorry. So just line 11 through 13, there.
>> Brian: Okay? So let's go take a look at this, so now you can see here that if I click on it, it'll take me back to the homepage, right?
>> Brian: All right, this is mostly what I wanted to show you about reach-router.
[00:05:13] There's a couple other things that we'll kinda sprinkle in here for the rest of the course, but this is like the crux of it. The routers in and of itself doesn't have to be very complicated
>> Brian: So there's a commit point here. The commit that you wanna roll up to if you wanna get to this point is, github btholt complete v5, Commits.
[00:05:41] We are at Add reach router, right? So we just did that one,