All right, and once we have the basic nested pages structure in place before we start working on our
nested pages, so they look more like this line, whatever we have right now.
I also want to set up the dashboard, so my home proved to be a protected rod.
Now what does that mean?
Well, that means that eventually life and logging functionality.
So once the user logs out, we actually kick it back to the main page.
And also, if the user tries to access the dashboard without signing, it will do the same thing.
We'll get back to the landing page.
Similarly, how we have and registered page once the user logs in or registers, we programmatically
navigate it to the dashboard.
We'll kick it back to the landing.
If there is no user in our state.
And if you're familiar with the previous set ups in reactor water in Reactor six, it's pretty similar
where effectively we want to set up protected root just in the pages.
Of course, we need to set up all the imports and exports.
Now, technically, you can make an argument that you can make it in the dashboard one.
But there also might be some pages that is using particular drought as a general prejudice.
So at least in my case, I'm going to set it up here in the pages.
But yes, I mean, we will use this for the shared layout.
So again, technically, you can make an argument that it belongs only in the dashboard, but that is
really an integrity that is really your preference when we want to import that in the abstract.
And then we want to wrap the shared layout where we have the element.
So instead of just rendering shared layout, I want to wrap my shared layout.
In particular, Rob and I was assigned a same case is going to be for any other page which you want
to restrict.
Essentially, you just want to wrap it in that protected draft.
And in there, we'll get to things we'll get navigate as well as our use and context.
Why?
Because I want to have access to the user.
And if the user does not exist, I can use the navigate component from React router down.
So we return this one instead.
And here we just need to provide a new problem.
So where we want to send the user and in this case, we're trying to send it well back to the landing,
correct?
Now, if the user exists, then of course we bypass this condition and want to redo where it turned
children.
And what is the children in this case?
It is our shared land.
Hopefully this makes sense.
So let's start cracking.
I think I want to go first to the pages and go with my protector route for the time being, let's just
set up a component.
Let's not worry about those imports.
So I'll just go over here and let's say that this is going to be a component.
And for the time being, I just want to render the children.
So let's set it up here, children.
And not as far as the return, it's not going to be there.
I was going to say children, and once I have this in place, then I want to navigate to the next one.
I want to look for my protected one.
So protect the drought.
And let me add it to my exports as well.
So I'm going to add here a comma.
I'm going to move this sucker down, and I'm in good shape when we want to navigate to chess.
We're looking for protected around over here from the pages again.
I already explained my reasoning behind that and where I have the shared layout.
What do I want to do?
Well, I want to wrap it.
I want to say that instead of just rendering shared layout, I'm going to go here with protected and
wrote.
And then let's place the shared layout inside of it.
And if everything is correct, our setup is going to look exactly the same.
So let me go here with me refresh just to double check and notice how everything works.
Now, if I'm going to go back here and instead of children, I'm going to return something else.
For example, I'm just going to say return and there and I say there is no use or again, whatever gibberish
text you want or hear.
So there is no user.
And then let's remove this sucker over here.
You'll notice that now I have this, there is no user.
So essentially, this is going to be our approach.
If there is a user we return wanting, if there is no user, then we return something else.
So if there's user, we return children.
If there is no user, then we actually return a navigate component which will programmatically navigate
that user away.
And again, you can wrap any more out you want in this component.
The idea is going to be exactly the same.
And what are we looking for here?
Well, like I said, navigate as well as the user.
So in this case, we may set up the user first, I guess, and go with use and then have context.
So that gets me right.
Then I want to look for my user from there, of course, and I'll invoke it.
And I also want to get that navigate component.
So import and then navigate from and again gives me a React router should be React router down.
So once I have my user now, I just want to check if the user exists.
Beautiful.
That will render the children.
If the user doesn't exist, then will navigate away.
So there's no user, then let's go with our turn and this is extremely important that you place this
return.
Otherwise, JavaScript is just going to keep on reading the code, so make sure you have this return
then where you want to go with and navigate and it is a component.
And here we have a little prop and basically where we want to navigate.
So I'm going to go here with a landing one.
So let's service and let's try it out right now and notice how there is no user.
We right away navigate landing.
So now I can try all day long accessing the dashboard, but I won't be successful.
Why?
Well, because there is no user in my state.
Correct.
So only once we go here and then once we log in, I believe we still have the John, so I should be
successful.
Only then we can get to the dashboard, so we navigate here and look it up.
We have the dashboard.
However, if I am going to go to my local storage again, remove it and then refresh.
Why do you know I'm back in the landing?
And essentially, that's going to be the same functionality that will have poured a logger.
There's going to be some functionality where we remove the user from the local storage.
We already have that function.
There's going to be functionality to remove the user from the state basically set it back to now.
And once that happens, we could get back to the landing one.
Hopefully this is clear and now we can start working on our nested pages.