Instructor: In the last section,
we created our header component
and added it to the app component.
But then we very quickly got this air message on the screen.
So the issue right now is just that we used a link tag
outside of the context of a router component.
Not a big issue.
All we have to do is add a router in.
So back inside my code editor,
I'll open up my index.js file,
which is where we're going to define our router component.
To get started, at the top,
I will import browser router from react-router-dom, like so.
And then I'll place this browser router
to wrap the app component.
So I'll give myself a little bit of space,
and here's my, oops, BrowserRouter,
and I'll close the tag off as well.
Now if I save this and then flip back over the browser,
we should see that air message go away.
So after the reload kicks in,
we got all of our links up here at the top.
Now the links look awfully ugly right now.
They're all sandwiched up against each other.
We'll do a little bit of styling
in just a moment to take care of that.
But for right now,
let's continue working on our application.
So the next thing I want to work on
is how we're gonna show different components
in the body of the app right here.
Let's set ourselves a very short-term goal
and say that we just want to try to get this
sort of welcome component onto the screen
in the body of that app,
or essentially, underneath the existing header.
So let's first make a sort of welcome component
to serve this purpose.
Back inside of my editor, I'll make a new file
inside of my components directory called simply Welcome.js.
This will be a extremely simple
and straightforward component.
It's just gonna display a welcome message to our user.
So we'll say import React from react,
and then I will export default
just a tiny little, how about a h3 tag?
I think that's fine.
And we'll just say, Welcome!
Sign up or sign in!
So now that we've got the welcome component put together,
we'll import it into the index.js file that we just created
and create a new route for it.
So inside of index.js, underneath the app import,
I will add on another import for the welcome component.
And then we will create a route
inside of our routing definition right here.
We'll first import the route component
from reactor Router DOM,
and then we need to figure out
exactly where inside of here we want to place that route.
Now, everything that we've seen so far has shown
that we always wanna have the header component on here.
And we already put that header component together
inside of our app.
So what we really want to do is inside of our app component,
we really want to swap out what goes right here.
That's what we really want to change out.
So there's two different ways we could take care of this.
We could either add all of our route configuration
to like literally right here,
or we could instead,
expand the app component right here, like so,
and then add all of our route configurations
inside of this app tag.
Let's try that out really quickly
and let me show you what the effect will be.
So inside this new app tag that I've expanded,
I'll place a route with a path of forward slash,
we'll show the component welcome anytime someone goes here,
and then to make sure
that we only show the welcome component
when someone is on exactly the route forward slash,
I'll add on the prop of exact, like so.
So now whenever the app component is rendered,
this route will be passed
to the app as a prop called children.
If you recall, we actually made use
of the children prop way earlier inside this course
back when we were working on the comment box application.
So if we now open up our app component,
we can receive a prop of children
that will be passed to this component.
That's the only prop we're probably gonna care about.
So I will destructure it out of the props object.
And then rather than showing the text "Hi"
on the app right here,
we will replace it with a reference to that children prop.
So now we can put all of our route configuration
into our index.js file, which kind of centralizes
all of our very core setup logic for our application.
And the app component
doesn't have to have any navigation stuff
directly defined inside of here.
So the app component can stay very simple
and very straightforward.
All right, so I'm gonna save all these files,
and then I'll flip back over the browser
and I'll make sure that I have the ability
to see the welcome component up here on the screen.
So if I go back over, the reload is kicked in,
and I can easily see, "Welcome! Sign up or sign in!"
Perfect. So this looks pretty good.
Let's continue in the next section
and we'll start thinking about adding in
some of the other components to our app as well.