In the last section we played around with re-act router a little bit and got more familiar with the
browser router and route components.
Remember the route components provide some amount of configuration to react router.
They tie a component that we create to a particular route or path that a user might visit inside of
our application in our particular case.
We created the path hello and said whenever a user goes there I want to show the hello component on
the screen and then we do the exact same thing for a path of goodbye and the goodbye component as well.
One thing that I want to point out to you as one mentioned this to be 100 percent clear the name of
the path that we create does not have to match the component name as well.
So we don't have to take the component name and just make it lower case and use it as a path right here.
We could have just as easily said one two three four five four Hello route or ab cd absolutely anything
we could possibly imagine.
So there's really no tie whatsoever between the component name and the pathname that we choose.
Now that we have it it had a chance to play around with the rock component a little bit.
Let's figure out how we're going to use re-act router inside of our particular application.
So I want to think about the different routes that our application might need.
Take a look at a diagram.
It's going to help us figure out what we're going to do here.
OK.
So here's the first page the page where a user is going to see a list of all their different blog posts
appear on the screen.
So we had said that this was going to be the route route or the home route of our application.
So presumably if a user goes to say my blog dot com this would be the page that they first see appear
on the screen.
So do notice that when you go to my blog dot com that's really interpreted as a route that has only
the character slash inside of it.
And so when we previously had on here just slash by itself that's really meant to indicate this is the
home route or the route route of our application.
Now we can easily imagine that to make a component like this that shows a list of posts we might make
a component called something like post index or post list or something like that.
Right that's I can imagine making a reactor component like that there would be in charge of showing
the list of posts on the screen to the user.
So if we imagine we have a component called like posts index or post list and we want to match that
or show that to the user when ever the user goes to the route just slash we might end up with a route
component that looks a little something like this.
So we might place a component that has a path of just slash by itself and then a component called something
like post index.
And that will be responsible for fetching a list of posts and showing them all to the user.
So I think that this will very likely be one route that we at inside of our application maybe the first
route or the first route that we showed to the user when they visit our page.
Let's now check out the other two pages and think about the different route components that will create
for those in this grill and over a little bit.
OK.
So next is the route that or the component I should say that we show to a user when they're attempting
to look at details about a very particular post.
So for this one we had said that we might have a U or L or a path or something like post slash 5 where
five was the ID of the post that the user was attempting to look at.
Now this one is a little bit more challenging because we are clearly saying that there's kind of a wild
card inside this router right here.
Right we don't want to have to create like 10000 different route components inside of our application
and say make one route for post slash 1 and post slash 2 and post slash 3 post-blast 4 and so on.
Really we want to just put together one single post definition or route definition and say that this
part of the UL you are l right here is really a variable or kind of a wildcard.
So if we ever see the user trying to access a route that looks something like post slash anything anything
at all then I want to show this component on the screen.
And so of course re-act router does have support for this.
So this kind of thing about what type of route configuration we might set up.
Maybe you look something like this we might make a route component that has a path of post slash and
then we added in a little wild card right here.
So the wildcard is Colin ID by putting in Colan ID or specifically just the colon that tells re-act
router to be kind of a fuzzy match or kind of a wildcard.
So if the user tries to go to post slash one or post-blast two three four whatever it might be reactor
order is going consider that Slash one or slashed two to be a wild card and it's going to try to greedily
match that route against this component right here.
So if a user ever goes out like that we'll show them a component that we're going to call something
like post show.
I think that makes sense.
POSSO is a component to be responsible for fetching a very particular component and showing me a very
particular post and showing it on the screen.
Now think about the very last route that we have.
So the last route is all about showing or showing a component to the user that they can use to create
a brand new post.
And so for this we had previously said that we might have a route of something like post slash new.
And so this is another somewhat easy one you can kind of think of a route that looks a little something
like this.
So we'll make our route component and we'll say whatever the user attempts to visit the path PPO's slash
new.
Let's show this post new component to the user on the screen.
OK.
So in this section we talk and we've spoken about the three different routes that I think that we're
going to need inside of our application.
We're going to have a route for post slash new route for post slash wild card and then just slash by
itself which is serving the route route of our application.
Now we've got a better idea of the general architecture and structure of our router inside of our application.
Let's dive back into the implementation in the next section.