Beautiful and I would want to start this project by setting up our pages.
Of course, we react router and what I'm looking for are the home page than the about page, where we'll
just have some dummy text.
Also, we would need to have a cocktail page where will display info about that specific cocktail.
And then eventually also I would want to have the error page where if the user navigate to the page,
that doesn't exist in this case.
Hello.
Because we have some kind of text where we say, oops, it's a dead end and then we can navigate back
to the homepage.
And of course, we're going to do that.
We react router, as always, you should install it.
But of course, I already installed for us.
So for this project and the package just on your right away fine react Rotterdam version 5.0.
But then in your own project you need to run, npm, install and then react.
Hyphen router, hyphen down and then once you're installed we can start using it and we have few options.
We can either wrap our whole road component, which in our case is going to be app or if you want to.
You can also do it in the index.
Yes, so this is where you'd want to get the router and then usually you would place it in between the
provider and the app because, of course, you would want to access whatever is coming from the provider
and the router as well as far as the pages and all that.
But in my case, I'm going to go with Apple, essentially.
I'll wrap my whole component right there.
Just keep in mind you have multiple options.
And maybe in one of the project, essentially, we will set up a router in the next.
Yes, OK, just keep in mind that we're just talking about the browser router.
We're not talking about the the switches or nothing like that.
We're just talking about the router, because that's the one that wraps our whole up.
In our case, of course, that is going to be the objets.
So here I have imported already everything from the reactor down.
We have browser router.
We have router, which has the alias of rather than we have a single aroud as well as the switch component.
And then of course, we have the pages, we have all the pages coming from the pages directory.
And then eventually we also have one component.
And of course that is going to be our number in here.
I would like to replace my having two with a router course, which is coming from reactor down and inside
of it.
I'll place the number first.
Because remember, I did not want to place in my bar and and switch, now I'm going to go with my switch
component and inside of the switch component, I will set up my roots.
I'll start with a homeworld, so I'll have a world component.
And I'm going to right away add exact Propp because I don't want to go to the home page.
If the user is going to forget about or a cocktail that we need to add a path which of course points
to our domain, which is just going to be a force and then which component we would want to render because
I'm going with a home, then we have one route for about one for cocktail.
But in there we'll set up our you are our parameters and then we have one for the error.
So let me just copy and paste this thing one, two and three times.
And I don't need the exact amount, so I'm just going to say about path that is going to be my YORO.
And then of course, in here we go with about component, then we have one for that single cocktail
and this is where we would want to use those YORO parameters.
So we go with some kind of YORO, which in my case is going to be forward slash cocktail and Gulfport's.
And this is where I would want to set up that program and I'm just going to name my one ID.
So we have a colon and then Heidi, and then of course, once we click on that cocktail will pass in
that idea and then we'll handle that in our single cocktail page.
And of course, this is our single cocktail page.
So we go with a single cocktail component.
And lastly, I also want to have the error page.
So we go around and then I remember it needed to have a path and we're going to add a star and then
which component we would want to display.
We're going to go with error page.
So the error component and not once I have everything in place, I should see the Navar as of course
my bar is above the switch command that is by design.
And then once we navigate to Yarrabah and we start typing about this, now we're navigating to about
page that as far as a single cocktail, we're going for cocktail and then some kind of value can.
At the moment it doesn't really matter which value because we just have a single cocktail page.
And then course, we also want to go with error page.
My guess is going to be hello.
And now I have the page.
So with our structure in place now, we can start putting some meat on the bones, whether that is not
bar or rest of the pages.