Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video, you'll install React Router v4 and get to know the core components that keep your UI and URL in sync.
Resources
-
0:00
React router is an external library that you install with NPM, or Yarn.
-
0:04
It has separate packages available for either web, or native app development.
-
0:08
Since we're working on a react web app that uses the DOM and
-
0:12
runs in a browser, we'll need to install react router DOM.
-
0:15
Over in my terminal, I'll first stop running the app by pressing Ctrl + C,
-
0:20
then to install react router dom as a dependency,
-
0:23
let's run the command npm install --save followed
-
0:28
by react-router-dom.
-
0:33
React let's you create components with JSX
-
0:37
an extension to the JavaScript language that uses an expressive XML style syntax.
-
0:42
Most react developers write components in JSX, because it resembles writing HTML.
-
0:46
React router extends what you already know about react, and the library itself
-
0:50
is just the small set of react components, so you write your routes using JSX.
-
0:55
React router DOM provides two components to get you started.
-
0:58
BrowserRouter, the root routing component, that keeps your UI in sync with URL and
-
1:03
Route, which is responsible for
-
1:05
rendering a component in your app, when the URL matches its path.
-
1:09
In react, you build components that fit into other components.
-
1:12
For example, index.js is rendering the app components into the dom.
-
1:17
So, app is the root component of our app.
-
1:20
It's going to be responsible for
-
1:22
displaying the content rendered by the home about teachers and courses component.
-
1:26
As well as shared elements like the app's main layout container, header, and
-
1:29
navigation.
-
1:30
React-router lets you declare routes from anywhere in your component tree.
-
1:34
So, we're going to write most of our routes here
-
1:37
inside the route app component.
-
1:39
In app.js, let's first import the components browser router and
-
1:43
route from react-router by typing import.
-
1:47
Browser router and
-
1:52
route from 'react-router-dom'.
-
2:00
You begin declaring routes with react router
-
2:03
by rendering a router that wraps all your app components.
-
2:06
So, we'll wrap the BrowserRouter component around our app by placing this
-
2:11
main container div inside opening and closing BrowserRouter tags.
-
2:25
So, this renders the route router that listens to URL changes, and
-
2:29
provides other react rather component information about the current URL and,
-
2:33
which components to render, that way your UI is always in sync with the URL.
-
2:38
Normally in react, you render nested, or child components with its tag.
-
2:44
So, for example, you can render the home component with an app by including
-
2:49
the home tag inside the container div.
-
2:51
Well, in this case, we're not just loading one unchanging component into app.
-
2:57
We want our app to render a different component inside app based on the URL.
-
3:01
So, for example, the home component for
-
3:03
the route path, the about component for the /about path, and so on.
-
3:07
But with react router.
-
3:08
You render components via the route component.
-
3:12
So, lets nest a self closing route tag inside the container div.
-
3:19
And the quickest way to create a route is by specifying a path, and the component
-
3:23
you want to render for that path by using the path and component properties.
-
3:30
Path indicates the URL to match and the component prop specifies,
-
3:35
which react component to render when the URL matches the route path.
-
3:41
So, for example, to render the home component at the root path, or
-
3:45
when the app loads, I'll use a forward slash for
-
3:48
path, then set the component prop to home.
-
3:52
So, when the path in the URL is a forward slash, or
-
3:54
when it's the route path, this route will render the Home component.
-
3:59
Let's have a look.
-
4:00
I'll run the app in my terminal with npm start, And,
-
4:06
over in the browser, we get a failed to compile error.
-
4:10
It says, Home is not defined.
-
4:13
Well, we're getting this error, because we've specified home and
-
4:17
the component prop, but we haven't yet imported the home component in app.js.
-
4:22
So, let's do that now.
-
4:22
I'll just leave a comment here that says, App components.
-
4:26
And below that we'll type
-
4:30
import home from ./Home.
-
4:35
I'll give this a save, and, now, at the root path, the router renders
-
4:40
the home component inside app, and we're able to see the app's welcome content.
-
4:45
Now, the best part about working with react-router is that since you're working
-
4:49
with regular components, wherever you declare a route, the component
-
4:53
the route renders automatically becomes a nested component in your UI.
-
4:57
In other words, any route you write in the app container
-
5:02
will render a child's component when its path matches the URL.
-
5:06
Next, let's declare a route for the about component.
-
5:09
So, first, we'll import About from './About';.
-
5:18
Now, let's add a new route component, this time we'll specify
-
5:23
that when the URL path is forward ''/about'', render the about component.
-
5:37
Back in our app changing the URL to forward slash about shows that both
-
5:41
the home and about components are being rendered inside app.
-
5:45
Well, this happens, because both paths began with a forward slash.
-
5:50
So, the router considers the route forward slash route
-
5:54
the same as the forward slash about route.
-
5:56
They both match the URL.
-
5:59
So, to fix this, we'll need to add the exact prop to the home route.
-
6:07
Exact instructs the router to render the component only
-
6:12
when the path matches the URL exactly, so only when it's a forward slash.
-
6:18
So, if we take a look at it now we'll see that just the about component is rendering
-
6:21
inside app at the forward slash about path.
-
6:24
Currently, app just displays the content rendered by the home and about components.
-
6:30
But the apps header and main navigation should be present at all times.
-
6:35
Like this.
-
6:36
So, next, let's make the header and navigation available to our entire app.
-
6:40
And, we'll do that by first importing the header component, inside out.
-
6:49
And since the header needs to be present at all times,
-
6:53
we can simply nest the header component inside App, just above our routes.
-
7:04
Now, the navigation isn't working just yet, so
-
7:06
clicking a navlink isn't going to link you to a route.
-
7:10
You'll learn how to do that in a later video.
-
7:12
And, now, that you've learned to declare routes, why don't you write the routes for
-
7:15
the teachers and courses components.
-
7:18
Your routes should look like this when the path and the URL is forward slash
-
7:23
teachers, the router should render the teachers component inside app.
-
7:26
And when the path is forward slash courses,
-
7:29
it should render the courses component.
-
7:31
In the next video, you'll see how I wrote the routes, and
-
7:33
you'll also learn other ways to render components with route.
You need to sign up for Treehouse in order to download course files.
Sign up