Instructor: In this section,
we're gonna get started on this new application right away
by adding in React Router.
So that we have two separate pages
to navigate to inside of our application.
'Cause remember,
on this route route right here I wanna see the Comment List
and then if a user goes to slash post
I wanna see the comment box instead.
So I'll first get started by opening up my terminal
still inside of my testing directory.
And I'll install React Router Dom
by running NPM install dash dash save
react-router-dom, like so.
And then while that's running,
I'm gonna flip over to my code editor.
We're gonna get started inside of our index.js file
inside the SRC directory.
We're going to import the browser router
and the route component from React Router Dom
and then we'll wire it up to our app component right here.
So at the top of the file,
I will import BrowserRouter
and Route from react-router-dom.
I'll then take this browser router
and wrap my app component with it.
So this tells React Router
that it's going to be in charge of deciding
what content to show on the screen
based on the URL that the user is currently looking at.
I'm then going to replace the app component right here
with a route tag instead.
So I'll put the route down
and I'll say that anytime someone goes to the path
of forward slash,
I want to show the component app, like so.
Okay, so good start.
I'm gonna flip back over to my terminal
and it looks like my installation
is still running over here.
So we'll take a quick break,
come back in the next section,
and continue with our refactor.