Complete Introduction to React (feat. Redux and React Router) Linking between Routes

Topics:

React

This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:

The "Linking between Routes" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

The React <Link> component can be used to move between different routes. The desired destination is specified using the ‘to’ attribute. Hashtags can be omitted from the routes since React manages the updating of the URL and prefixes the hashtag internally.

Get Unlimited Access Now

Transcript from the "Linking between Routes" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: So let's go ahead and make a landing now link to search. So what we're gonna do is here in landing what we're gonna do, is we are gonna say const link. Put the curly braces around it equals require react-router.
>> Brian: And we're gonna make the browse-to link there.

[00:00:32] So instead I'm speaking of this button, change this to be a link. Both the opening and the closing tag here. Okay and then give it a to, some sort of an a traffic, give it a to. And that's it, that's all you need to do.
>> Speaker 2: That link cannot link.

[00:01:03]
>> Brian: So the nice thing about using link is that's internal to react router. And so whenever we're gonna change histories, we'll have to change anything. It just all magically works cuz otherwise what this is actually going to is actually going to pound slash, right? But, you don't have to care about that if you're using link, like link will just internally take care of all that magic for you.

[00:01:24] That's a good question. The answer is you can get this to work using anchor tags if you want. Okay, so save that, make sure nothing is breaking. Make sure your web pack is actually running.
>> Brian: Okay. So refresh this again on the landing page. So now if you hover over this.

[00:02:04] I did that wrong. You actually want this to go to slash search, right? Derp. Right, otherwise it's just linking to itself. Like, good job, Brian. [LAUGH] So now I'll save that again. Web pack ran okay. Now refresh that. Now if you look down here, you'll see that, it's really hard to see here but in the bottom left you can see the tiny URL down there.

[00:02:30] If you click on it, it will actually take you to the other page. And now you can actually go back and forth just using back and forth up here, right? So that's one of my favorite parts about react router is it actually uses real links. So if I like Cmd+Click on this, it's gonna open in a new tab and that works okay.

[00:02:49] It doesn't break the web like some other single page apps do, which is a plus in my book.
>> Brian: Okay, any questions about links or anything like that?
>> Speaker 2: Can you show me the landing GSX again?
>> Brian: Yeah of course.