Nice work so far and all set up the reactor router, because if you take a look at the complete application,
you'll notice that we have the homepage more.
Of course, we have the search form and we display the movies.
But then in order to display that one specific movie, we set up a separate page.
So if I never get here, notice how many oil changes and I just navigate to the specific page that displays
info about that one movie.
Now, keep in mind, you can think of this page as a placeholder because the idea is exactly the same
where we have the same page here.
Every time we open by clicking on a different movie, of course, we fetch data just about this movie.
And I also promised you some time ago where I said that we can actually set up the router in the index.
Now, we're not going to set up the switch and everything.
But remember, when we work with React router, we import this browser router and then usually we come
up with some kind of alias and that is router.
And then we would want to wrap our application in that route.
And usually we did that in Algiers.
But I also mentioned that if you want if you don't want to have too many imports here in the objets,
you can also do it in the index chart.
So in this case, notice how we're importing the browser, has a router from react and on in between
the provider and app because there's still some things that I would want to access in or out or from
the app provider.
I'm going to go with my router and then I'll wrap my up component so we save it.
And then of course now would want to navigate Argyris, where I have two things.
I have imported the switch component as well as the root.
So now here when it comes to the app, of course I would want to return a switch component instead.
And then instead of the switch component, I have two routes.
I have one for home and then I have one that is going to be used as the placeholder.
So that's where I would want to display that single movie.
And every time, of course, I'm just going to display different data.
So we're going to go here without.
Then as far as the path we're going to go with portside, but remember that it is going to match if
we go to those movies, because at the moment we're pretty much matches with everything.
And that's why I have that exact problem.
So that way it only matches if we're actually going to the homepage.
I'll close my route over here online instead of the route I decide.
Well, what is going to be the component of that?
I'll just play once we navigate to the home.
And of course, I already have the home.
Come on.
And that's the one that I would want on display.
So I'm going to go here with home.
So I close it.
And then, of course, I would want to set up that route, that is for all the movies.
So once I click on the movie, I'll have that placeholder page and then I'll fetch data for that specific
movie.
And in that case, we're going to go with a world component.
Then as far as the path, again, you can go forwards and on the parameter you would want in my capacity,
but I'll also add movies that is just my preference where I go with forward slash movies.
So that tells me, well, what is the page about in this case of is going to be about the movies and
then I go with my Europe or Summer.
Remember, you can name this whatever you want.
This can be shake and bake or Uncle Bobby Marquez.
I'm just going to go with Colen.
And then I'd remember in that specific page, we'll just be able to access the value.
The value is the one that we're looking for, how we call the key.
It doesn't really matter online as far as what we would want to display in this case.
We need to go with children.
So that is according to react router documentation where we have children, Propp and then we just want
to pass the component we would want to display in this case.
Notice how I'm importing the single movie component and I just named it movie.
So since it is default export, I went with a movie name here and once I'm done, I just need to close
the Iraq component.
And I should be in good shape where I have the homepage, but then if I navigate two movies online,
some kind of whatever it is, because we're not putting anything, we should see the single movie.
And yes, I need to say that I just skip the error page in this project.
I didn't see the point.
We have already covered it and it just seemed redundant, repeating something that we already have done
before.
If you want your error page.
Please do so.
Remember, we have covered that in the previous project and with our REACT router in place, I think
we can start watching our movies.