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