Okay, so now we want to add a private root component for routes or pages that we don't want regular
users that aren't registered to go to.
For instance, the shipping page.
I'm not logged in right now, but if I go to shipping, I'm able to see it and I don't want that.
So what we're going to do is go to components and create a new component called private root.
Dot JS.
And then let's create a component.
And there's not a whole lot that's going to go into this.
I just want to bring in a couple things from React Router Dom.
I want to bring in outlet and I want to bring in the navigate component.
So outlet is basically what we want to return if we're logged in, if there's a user because it just
will, it will put out whatever page or screen we're trying to load.
If we're not logged in, then we're going to use the navigate component to basically just redirect us.
Now the other thing I want to bring in is use selector, because that's how we can get the state to
find out if there's user, if there's a user info piece of the state.
So let's say use selector from React Redux.
And then right inside the component above the return, we're going to say const and we're going to get
the user info.
Remember that's part of the auth state.
So we'll say use selector and we're going to pass in a function with state and then specify that we
want to use the auth state.
That's where this user info is.
And then in the return here, we can get rid of this and we're going to say if user info, then output
the outlet.
If not, then navigate to login.
And then we're just going to also add in replace here just to replace any past history.
All right.
And that's it.
So pretty simple component.
Now to use this, we're going to go into our index.js.
So we have all of our routes we're going to bring in.
The private root component.
And then what we do is we go inside of this.
This is always going to be the the parent, right?
Because this is the app element.
And anything you want public will go right in here as a direct child.
But if you want private routes, then you're going to set up another route and we can just set the path.
The path can be just to nothing and set the element to private route.
And I know the syntax is a little weird.
It's a little different than past React Routers versions, but now anything we want to be private will
go in here and I want the shipping to be private, so I'll just move that down into there.
And now you can see that I think I was just on the shipping page and I got redirected because I'm not
logged in.
So if I go to slash shipping, I can't access it.
It just brings me right to login.
Which is exactly what I want.
And then if I were to log in.
So let's say John at Email.com.
And let's log in.
Let's go to slash shipping.
And there it is.
So now I'm able to access this page.
All right.
So any profile, anything like that is going to go in here.
And later on when we get to admin functionality, we'll have an admin root component as well that will
only let users in if they're admins.
So in the next video, let's see, what are we going to do next?
I want to start to implement the checkout steps because we're going through these different steps like
the cart, the shipping, the payment method.
I want to have a little component up here that lets us know where in the process we're at.
So we're going to create that next.