Instructor: In the last section we added
React Router to our index dot js file.
We're now gonna flip over to our app dot js component,
inside of our components directory
and add in a couple of routes to this thing as well.
Normally, when we put together a React router application
we will designate all the different routes
that a user can visit inside of
the topmost index dot js file.
But this time around,
just to save ourselves a little bit of refactoring,
we're just gonna define our routes directly
inside the app component instead.
This is actually gonna make life a little bit easier
later on as well, when we start to introduce authentication.
So at the top of the file I'm going to import
the route component from React router dom,
and then I will replace both my comment box right here,
and my comment list with route components instead.
Remember that we only want to show
the comment box component, if a user is looking at
the route of slash post right here.
And if the user is at the root route of just slash,
then we want to show the comment list.
So to accommodate for both those I'll add in a route
with a path of slash post
and whenever a user goes to that route,
I'll show the comment box component.
And then I'll define my second route underneath that
and I'll say anytime someone is at the root route.
So just slash by itself,
I'll show the component comment list instead.
Now, before I flip back over to the browser
to test this out, one quick thing that I'm going to do
is flip on over to my comment list component
and inside the div right here,
I'm gonna add on a h4
that says comment list.
The reason I'm doing this is that our component comment list
doesn't actually show anything on the screen,
unless we have some comments inside of our application.
So just to get a better sense
of when this component is appearing on the screen
without having to add in comments,
I'm just gonna add that h4 in.
Okay, so that's pretty much it.
I'll now flip back over to my browser
and we'll test out those changes.
So now when we go back over to local host 3000,
the page reloads, and we should see comment list
by itself appear on the screen.
And if we go to local host 3000 slash post,
we should see just the comment box up here instead.
Now, when this loads up, here's the comment box,
but you'll also notice we see
the comment list down here as well.
So the comment list is showing up
when we don't really want it to.
The reason for that is the path
that we added to the comment list.
We have a path right here of forward slash,
just forward slash by itself
and technically any route that we visit
will match that forward slash.
So even though we're at slash post right now,
that still matches against this path designation.
So to tell this route component
to only show itself if we are at exactly
the root route, we can add on the exact prop, like so.
So now whenever React router decides whether or not
to show this route, it's gonna say,
is the route exactly forward slash?
If it is, show the comment list.
Otherwise do not show it.
So now if I flip back over and go to slash post.
I only see my comment box.
And if I go back to just slash by itself
or local host by itself,
I should see my comment list appear instead.
Very good.
Okay, so good progress.
Let's take a quick pause
and continue developing this in the next section.