Now with all that done
there's one last thing I wanna implement
one last feature and that is that I can click
on one of these posts here and if I do that
it simply opens as an overlay.
Just as new post but with the details
of that post which I clicked.
To make that happen we must add a new route first of all.
And that should be a route nested into this post route
since I want to have that same overlay effect
as I do for a create post.
So I'll add a new route definition here.
And now the question is what should be the path
and the path in the end should be slash
and then the idea of the post
for which I wanna load the details.
And that's really important.
I need to have that idea included in the path
so that once the route becomes active
I can take a look at the path,
get the idea off the post for which I
wanna load the details from there
and then load those details from the backend
and display them on the screen.
Therefore we actually have different
values for this path here.
For one post it could be this ID
and for another post it would be this ID.
Of course we can't register all these routes here
because we don't know in advance how many IDs
we'll have and what the concrete values will be.
Instead we add a placeholder by adding a colon here.
And then any name of our choice like ID or Post ID
that's up to you.
I'll pick just ID.
We can also add a slash here to make this an absolute path
or omit the slash to make it a relative path
simply appended after the path of the parent route
we could have done the same thing for create post.
That's up to you.
Here I'll stick to absolute paths but that's not required.
So that's how we set up a dynamic route
as it's called with a dynamic path parameter.
Now we also need a new component that should be
rendered when this route becomes active.
And for that attached you find the post details component
with its JSX file and its module CSS file.
Now this component here renders simply some
details about the post which was loaded
here included in a model and also with some fallback content
if no post was found for the ID that was provided.
And I'm using use loader data to get hold of the post.
So I'm expecting to use a loader for loading the post
for that route here when it becomes active.
So we'll add that loader function in just a second.
As a first step I instead wanna simply import this post
details component from routes post details
and then assign it here as an element
post details like this.
With that it's this component the post details component
that will be rendered on the screen
if we visit slash and then any post ID.
However as mentioned of course here
we need some loader data because I'm expecting
to get my post data with help of a loader
and they offer all export an async function
called loader here in this newly
added post details component.
And back in main JSX we can also import
this loader and assign an alias
and that is why we use aliases by the way.
Otherwise we would have two loader functions here
and that would be a name clash that is not allowed.
So therefore here I also assign in alias
and name us post details loader for example
and assign this to the loader property
of this route definition down there.
So with that we also got a loader here.
And now in that loader of the post details component.
I wanna send a request to this backend route here
where I also have such a placeholder
but that is express JS has nothing to do with React router
it's just a common way of solving
such dynamic path segments.
But in the end we need to send a request
to our backend domain slash posts
and then slash the idea of the post which we want to fetch.
And therefore here I'll again use the fetch function
sent my request to HTTP local host 80 80 slash posts
and then slash plus the ID
of the post for which this route was activated.
Now of course that will be different IDs
so we need a way of getting the actual ID that was loaded
for this exact time where this route was activated.
And we can get that from a data object
that's passed to loader.
Just as action receives an object which
for example includes a request property
with details about that request object
that was generated by a React router.
The loader also receives an object
which also it would've a request object
but which more importantly has a Params object.
This by the way also exists for action functions.
And this Params object simply allows us
to access the ID for this route here.
And here I'm using dot ID because I chose ID
as a placeholder here in the route definition.
If you chose something different here
like Post ID you would have to use that same identifier
here like Post ID.
This will give you the actual post ID that's
included in the URL when this route is visited.
And the will send such a request to the backend
to fetch fetched details for that post.
Now here we can await that to get our response.
We can then get our response data
by awaiting response dot Json.
As we're doing it for fetching all the posts
it's essentially the same code.
And then here I simply wanna return rest data dot post
dot post because my backend sends back an object
with the post key that contains the post that was fetched.
Or under find if no post was found
but I handled that use case here in my component.
So therefore now we're returning the single post here
we're getting access to it here
with use loader data in post details
and we have registered this loader for this details route.
Now with that all added
we also must make sure that we can reach this route.
And to achieve this I'll go back to my posts list component
where I render my posts and therefore to the post component
where I have the actual post.
And here I wanna wrap that with a link.
So I'll import the link component again
from react-router-dom
add it here and wrap the content here with that link.
And then set the to path here
to the ID to which I wanna navigate.
Now this again should be dynamic because
different posts have different ideas.
Hence I expect to get the idea of
my different posts as prop values here
just as author and body are different for different posts.
And then I set this to value here
to a dynamic value which is near my ID
generating a relative path to that ID.
So it's simply appended after the currently active path.
That should give us a link that leads to
a post with a specific ID
and to make sure it's styled properly
I'll go to post module CSS and add a
short new style here maybe below the post
exact position doesn't matter where I'll target
the anchor tech that's rendered by the link component
and set text decoration to none.
With that we just have to make sure that the
value for the ID is passed to post.
So in posts list where I render my posts
I'm now also setting the ID prop
and I set it to post dot ID because my posts now have IDs
since they're coming from the backend
and there an ID is added.
We could also use that ID for the keynote by the way
since it's a better unique identification criteria
than the body.
But we have to set the ID prop here on post
so that there it can be used for the link.
And with all that these items are now clickable
and if we do click them we view the details about a post
and we can click the backdrop to close this.
So that's working as it should.