Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 985 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

React Router: Router, Route, and Link

2:54 React lesson by

In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.

Avatar
Anda

Which snippets library do you use in atom?

In reply to egghead.io
Avatar
Itai

Joe, why didn't you have to use parenthesis around the Links function?

Avatar
Joseph

"return" is not required in ES6 arrow functions, but rather inferred after the fat arrow. If I had been using an implicit return statement I would have used parens.

const Links = () => "Links" // returns "Links"
const Links = () => {
    return "Links" // implicit return returns "Links"
}
const Links = () => {
    return (
         "Links" // implicit return returns "Links"
    )
}
In reply to Itai
Avatar
prabhuignoto

i am having trouble running the examples with react router v4

To get started with React Router, we're going to import React, and we're also going to import the React Router library.

From React Router, we're going to bring in Router, Route, Link, and HashHistory. We're going to go and create a handful of components here that represent the pages within a route application. This one's going to be home, going to return a div with an H1 that says home. The next one will be about and the last one will be contact.

We're going to go and set up our outer component here. We're just going to call that app. It's going to return our router component, which we set up with a router component tag. It takes in a history. This could be HashHistory or browser history, and we'll talk more about that later. For right now, we're going to be using the HashHistory.

We can set up our individual routes with a route component. A route component takes in a path, and it also takes in the component that should be presented at that path. This will be our route path that renders a home component. Set up another one of these at the about path, and present the about component. Finally, we'll have /contact that presents the contact component.

Let's go and export that by default, save it, and on the right you can see we're at our route path. This path right here is represented by the HashHistory path. We can go ahead and change that HashHistory path to contact, and we'll be at our contact component. We could change it to about, and now we're at our about component.

We're not actually outputting anything that we can click on and navigate with, and that's where the link component comes into play. We're going to go ahead and create a new component here called links. Here, we're going to return a simple nav component, and a handful of link components.

The link component operates exactly like an anchor tag, except instead of an href, you're going to get a to prop. Here, we're going to say to/ and then we're going to have a text or innerHTML there of home. This one will say "about" and "about." We'll do one more that'll be /contact and we'll say "contact" inside of that.

What we're going to do is render our links component inside of each one of these page components. So links, close that, save it. We've got our actual link. If we click on home, we get home, about, we get about, and contact, we get contact.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?