Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Router v6 Basics

Well done!

You have completed React Router v6 Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Installing React Router and Declaring Routes

8:53 with Laura Coronel

In this video, you'll install React Router v6 and get to know the core components that keep your UI and URL in sync.

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:06
Since we're working on a React web app that uses the DOM and 0:13
runs in a browser, we'll need to install React Router DOM. 0:17
In my terminal, I'll stop running the app by pressing Ctrl+C. 0:22
To install React Router DOM as a dependency, 0:28
run the command npm i react-router-dom. 0:32
React lets you create components with JSX, an extension to 0:40
the JavaScript language that uses an expressive XML style syntax. 0:45
Most React developers write components in JSX because it resembles writing HTML. 0:52
React Router extends what you already know about React. 0:58
The library itself is just a small set of React components, 1:02
so you write your route using JSX. 1:07
React Router DOM provides three components to get you started. 1:10
BrowserRouter, the route routing component that keeps your UI in sync with the URL. 1:16
Route, which is responsible for 1:22
rendering a component in your app when the URL matches its path. 1:25
And Routes, which manages all the route tags and 1:30
selects which of its child route paths best match the URL. 1:35
In React you build components that fit into other components, 1:42
for example, index.js is rendering the App component into the DOM. 1:47
So App is the root component of our app. 1:53
It's going to be responsible for displaying the content rendered by 1:57
the Home, About, Teachers, and Courses components as well as the shared elements, 2:02
like the app's main layout container, header, and navigation. 2:08
React Router lets you declare routes from anywhere in your component tree. 2:13
We're going to write most of our routes inside the root app component. 2:18
You begin declaring routes with React Router by 2:23
rendering a router that wraps all your app components. 2:26
Because our app will run on the web browser, 2:31
we'll use the router BrowserRouter to wrap around our main app component. 2:34
In the file index.js, let's first import 2:40
the BrowserRouter component from react-router-dom. 2:44
We'll wrap the BrowserRouter component around our App component 2:51
by placing App component inside opening and closing BrowserRouter tags. 2:56
To quickly fix the formatting in Visual Studio Code, 3:03
use the shortcut Option+Shift+F or right-click and select Format Document. 3:07
This renders the route router that listens to the URL changes and 3:15
provides other React Router component's information about 3:20
the current URL, and which component to render. 3:25
That way your UI is always in sync with the URL. 3:30
Normally in React you render a nested or child component with its tags. 3:35
For example, you can render the home component within App by 3:42
including the Home tag inside the container div. 3:46
In this case, we're not just loading one unchanging component into App. 3:51
We want our app to render a different component inside App based on the URL. 3:57
For example, the Home component for the root path, 4:03
the About component for the about path, and so on. 4:07
With React Router you render components via the route component. 4:12
Let's first import routes, and route component from react-router-dom. 4:17
Let's nest the Routes tag inside the container div. 4:24
And nest a self closing Route tag inside the Routes tag. 4:30
The quickest way to create a route is by specifying a path and the component 4:36
you want to render for that path using the path and element properties. 4:41
Path indicates the URL to match. 4:49
And the element prop specifies which React component to render when 4:52
the URL matches the route path. 4:57
For example, to render the Home component at the root path, or when the app loads, 5:00
I'll use a forward slash for path, then set the element prop to Home. 5:06
So when the path in the URL is a forward slash or 5:15
the root path, this route will render the Home component. 5:18
Let's take a look. 5:23
I'll run the app in my terminal with npm start. 5:24
Over in the browser, we get a compiled with problems error. 5:30
Home is not defined. 5:35
We're getting this error because we specified Home in the element prop, 5:38
but we haven't yet imported the Home component in App.js. 5:44
Let's do that now. 5:48
I'll add a comment here saying App components. 5:51
And below that will type import Home from "./components/Home". 5:55
And in Visual Studio code, you can use the down arrows to get to Home. 6:04
Let's save. 6:08
And now in the root path, the router renders the Home component inside App, 6:09
and we're able to see the app's welcome content. 6:14
The best part about working with React Router is that since you're working 6:19
with regular components, wherever you declare a route, the component 6:23
that route renders automatically becomes a nested component in your UI. 6:28
In other words, any route you write in the App container 6:35
will render a child component when its path matches the URL. 6:39
Next, let's declare a route for the About component. 6:44
So first, we'll import About from "./components/About". 6:48
Now let's add a new Route component. 6:57
This time we'll specify that when the URL path is About, 7:01
render the About component. Alright, let's save our changes. 7:06
Back in our app, changing the URL to /about 7:16
shows the About component being rendered inside App. 7:20
Currently, App just displays the content rendered by the Home and About components. 7:25
But the app's header and main navigation should be present at all times like this. 7:32
So next, let's make the header and navigation available to our entire app. 7:39
We'll do that by first importing the header component inside App 7:47
with import Header from "./components/Header". 7:53
Since the header needs to be present at all times, 7:59
we can simply nest the Header component inside App just above our Routes. 8:03
The navigation isn't working just yet, so 8:11
clicking a nav link isn't going to link you to a route. 8:14
You'll learn how to do that in a later video. 8:19
Now that you've learned to declare routes, 8:22
why don't you write the routes for the Teachers and Courses components? 8:24
Your route should look like this. 8:30
When the path in the URL is /teachers, 8:33
the route renders the Teachers component inside App. 8:36
And when the path is /courses, it will render the Courses component. 8:41
In the next video you will see how I wrote the routes. 8:47