-: In the last section, we put together
a rudimentary header of sorts.
Let's pull our diagram back up,
for our application our mock up of sorts,
and just make sure that we're on the same page
on where we're trying to go.
We've got the home resources and sign in buttons on here,
just as we have home, resources, and sign in.
So again, the purpose of this sign in button right here
is to flip our users between
a signed in and a signed out state.
So it's really just a testing development client
side button here that we're just gonna use to simulate
whether or not a user is signed in.
The home and the resources buttons, on the other hand,
are here for navigation.
So when a user clicks on home or they click on resources
we're gonna treat that as a route change.
So it's gonna be like the user trying to go
to a different page inside of our application.
So in this section, we're gonna start putting together
the reactor router side of things.
We're gonna make sure that we've got a home route
and make sure that we have a resources route as well.
Now, the first kinda run through that we're gonna do
with React router is not gonna have any sense of navigation
or excuse me, authentication or anything like that.
We're just gonna say the user can visit any route they want,
there's no such thing as authentication right now.
So in this section, we're going to work at setting up
the home route and the resources route.
And if we have enough time, we'll put together kind of
the data that's gonna represent
our protected resource as well.
So with that in mind, I'm gonna flip back over
to my code editor and to set up our router,
we're gonna do so at our most top level component,
which is gonna be inside of source index dot js.
So inside of this file right here,
we're gonna be doing our React Router setup.
The first thing we need to do is import some files
from React Router.
So I'll import router, route,
and browser history
all from, excuse me, react router.
Remember the router is the top level object.
It's what is the actual Router Insider application.
It's what's gonna watch the url.
Whenever the URL gets updated
it's gonna tell its child routes to re-render
with some different components.
Then the browser history is what is responsible
for telling the router how the router should keep track
of the current url.
So our provider call here, everything inside
of it is gonna get a little bit jumbled here.
We're going to remove the existing app tag
and we'll replace it with a router tag.
And we'll also pass in the history.
There's our router
and then we'll define our top level route
whose path is just gonna be forward slash.
And whenever a user is at that route,
we wanna show them the app component, like so.
All right, So this is pretty much all we need
to show our app right now.
I'm gonna go ahead and save this file.
Let's flip back over to the browser
and make sure everything is still working
and yep, looks good, no errors, everyone's happy.
Let's add in our second route now,
the one for the protected resources.
So inside of the forward slash route
inside of this route, we'll add another route.
And this one's path is gonna be just resources.
And whenever a user navigates to forward slash resources
we will want to show the component resources.
Now, we haven't defined that just yet.
We're gonna do that right now.
So at the top
let's get that import statement outta the way.
Even though we haven't created the file yet.
We'll import resources from components,
resources like so, and then
in our source components directory,
will make resources dot js.
All right, so in here, again
this component that we're making
it is just kind of presentational.
It's just for testing.
We're just gonna have it show some kind
of dummy text of sorts.
The component itself is gonna have no idea
of authentication.
That's the whole idea of a higher order component.
The higher order component's job is to implement this kind
of shared logic
in a reusable fashion over many different components.
So when we make resources right now,
it's gonna be essentially just dumb as heck.
It's gonna have no idea what's going on,
no idea that authentication is even present
inside of our application.
And to make that really clear and really evident,
we're gonna make
the most simple pot react component possible.
At the top, we'll import react
and then we'll export default, our component
which is gonna be a functional component.
And like I said, it's gonna be very simple.
We're gonna return a div,
and the div is gonna contain nothing
but some static text.
So that your mark up in here can be
absolutely anything you want.
I'm just gonna pretend that I'm making a recipe of sorts.
And since it's super and special
and let's say it's also secret,
we never would want a user to see this
if they're not authenticated to see it.
And the recipe is gonna be awfully ridiculous.
One cup sugar, one cup pepper, one cup salt.
I can't even imagine what that would taste like (chuckles).
All right, let's save this
and see what we have in the browser now.
So I'm gonna save everything
flip back over to the browser, refresh.
And now I should be able to click on resources.
And when I click on resources
you'll see that the route changes
and I don't get any error message here,
but our special component doesn't show up on the screen.
And the reason for that is
that we have not yet told app how to render children
if it gets handed a nested route.
So remember, this is one of the gotchas and react router.
We need to flip back over to App and say, Hey, app
if you ever get past any children,
make sure you show them.
So this line right here, the this dot props
dot children as reminder, this is part of React Router.
It means if our app component ever has any children
and the user visits a route that matches
up to those children, app needs to be responsible
for showing those children as well.
And we do that by displacing this dot props dot children.
Okay, now we got that line in place.
Let's refresh the page.
And I'm on the resources tab right here.
I'm on the resources route
and we see our very simple text based component pop up.
And if I go back to home, it goes away.
All right, So this looks pretty great.
This forms the very core of our application.
We've got all the content we need.
We have the ability to show some, you know
nonsensical kind of empty view right here,
that in theory maybe we would be
prompting the user to log in or something like that.
And then once the user clicks on the resources tab or button
at the top, we show them our in theory, secret component.
Now there's absolutely no authentication right now.
The sign in button does absolutely nothing.
So in the next section,
let's work at wiring up this sign-in button somehow.
I'll see you there.