All right, and once we can successfully register our user now, let's take a look at how we can programmatically
navigate the user from the register to a dashboard and we'll do what we'll need to look for.
You use fact, which, by the way, should be already in Rochester.
I'm just making sure that you definitely have it that is coming from React.
And then we have this use navigate hook from react rather than run inside of the register component.
I want to get the user from my state and also I want to invoke the use navigate hook, which is going
to return me a navigate van.
In the user fact, I want to check what a user.
And if the user is present, basically, if it's not, no, then I'm going to navigate to my home page,
which is what which is my dashboard.
Now you're probably wondering, Well, why do we have this attachment?
Well, because I do set up the alert.
And I showcase that to work here.
Remember, the redirecting one is just my preference to showcase that.
Do you have to do that?
Absolutely not.
Like I previously mentioned with had a lot that is optional.
The same as this one.
If you want to right away, navigate away.
That's totally up to you.
And then in the use effect in the dependency, I want to pass in the user.
So every time we'll invoke this, whether or not it is going to be initial render or when the user changes,
which is going to be case when we register or log in the user and then it's going to complain that it's
also looking for navigation and therefore we'll add that one as well.
So let's go to a register.
Like I said, I already have the use of fact.
So that should do it.
And then I want to look for import use and navigate.
That's the hook coming from the React router down.
And then once I have this in place, I want to scroll down and where I'm looking for is loading and
Charlotte, I also want to check for my years here in the state because remember, we have our actions
in reducer.
This is what we're changing and I have this comment right now.
I'm going to remove and let you set up navigate.
Navigate is equal to use and navigate, and let's invoke it.
And I'm just going to set it up on top.
So I clearly see that these are my local values.
These are my global values coming from the app context.
And this is my Navigant van.
Let's keep on scrolling.
And then right after the on segment, let's go with our user fact.
I'll say use effect and that in here, let's pass in that callback function, which is going to be invoked.
And now it's set up right away our dependency.
And here I want to pass in the user as well as navigate.
Just to reiterate, this means that we will invoke this one on initial render and every time the user
or navigate changes.
And then let's set up the condition where I'm going to say if user's true.
So if user exists, now let's navigate to a dashboard and again, you can simply go and navigate and
then you'll need to pass into your arrow.
Now where is the dashboard?
Well, that is their homepage, correct?
That's how we set up everything, but it is my preference to showcase for a little bit of that alert.
That's it.
Therefore, I'm going to go with set and then timeout.
And then in there, we want to pass in the callback function, which is going to be invoked.
And then in how long?
And therefore, since I know that my alert is for 30 seconds, I also do it over here.
Do you have to do that now for the last time?
You don't have to.
This is really optional.
So let's pass in the navigate in the function body, let's say.
And this is going to be the case where I'm going to stop removing the John from the database and I'll
simply go with beer.
Pretty much a different member.
And then in the process, I'll also show you how we're displaying alert.
So let's go here with name then Peter.
Peter, Malcolm, or you're not just with Jim.
Just so we're consistent.
And then let's also set up our dummy password.
And voila, we have user created.
I have all this data and console.
And then eventually we navigate to the dashboard page.
Now, in my case, since I don't want to overpopulate the console, I will swing back to the app context
and I'll come on this one out just so it stays here for our friends.
And the same is going to be over here.
So let's say both of them.
And now we successfully have added the functionality in place where once we register to user or log
in, the user eventually then will navigate away from the register page to a dashboard page, which
is our homepage.
And the way we do that, we use, use, navigate hook coming from reactor number down.
We get back, navigate and then we just invoke it and pass in the URL where basically we want to navigate.
And so it's in-market.
Market Sport is our home page.
That's why we just passed in the forward.