So how can we make sure
that clicking new post opens this new post modal?
Well, we need to create a link between these two
different routes in the end, and for that,
we can go to the MainHeader component,
which is where I have this button,
and we now must edit this component a little bit.
We must replace this button with a link
to this /create-post route.
That's in the end what we want to do.
So for that, we could replace button with an anchor element,
which is the right element for creating a link,
and get rid of the on click handler
and get rid of that prop, which we don't support anymore,
and instead, add the ref attribute here
and point at create-post.
If we do that and save this, the styling's a bit off,
we get this underline effect, but we can ignore that.
If I click this, it seems to work,
but I say it seems to work because actually,
if you watch this refresh icon, if I click new post,
you see it briefly change to a cross,
which means that technically a brand new request was sent
to the server serving this React app
and we technically downloaded the entire React app again
and started it as a new instance of that app, you could say,
so it's just as if I manually pressed this refresh button.
This works, but it means that we leave the single page
application just to load it again,
which means any global state would be lost,
and we, of course, also unnecessarily download
and execute all the JavaScript code again,
which is not great for performance.
For that reason, we want to stay in that single application
world and just make sure that the URL changes
and a new component gets loaded
without sending a new request to the server
serving the React app.
And this is, of course, a common use case, and therefore,
we can import the link component from react-router-dom.
We should use this link component
instead of the anchor element.
Under the hood, this renders an anchor element,
but it prevents the browser's default of sending a request.
This link component doesn't take the ref attribute,
but instead the to property, but we can and should
then still target create-post.
I'll also now briefly go to my main header module CSS file,
and they are on button.
I'll simply set text decoration to non
to get rid of the underlining.
But the more important part is the usage of link.
With that, if we save this and we go back to /nothing
and I click new post, you now see it did not reload
the page, and you can also tell that it didn't do that
by the fact that if I load this, you have this list of posts
and if I click here, you see in the background,
it's not re-fetched again.
Instead, we're still on the same single page application,
and that's, of course, the user experience we want to offer.
It's way better than the other experience we had before.
Of course, we now also want to make sure
that we close this modal if we click the backdrop
or if we click the cancel button.
Also if we submit it, but submitting this
and handing submission is something we'll handle later.
Now, to also navigate when we click the backdrop
of the modal, we can go to the modal component
and there we can get rid of that onClose prop
because we can actually handle clicks inside
of that modal component now, assuming that we always use
this modal to wrap a page with it,
so, to use it as a wrapper inside of a route,
and that we always want to go back to another route
if we click on the backdrop.
But if that is our assumption, we can add a function here,
the closeHandler, which will be assigned to this onClick
event listener on this backdrop diff.
And in there, I now also want to navigate,
but now we have to navigate programmatically here,
because this is now not a link, but instead an action
that's executed when we click a diff.
We could replace the diff with a link,
but here I'll stick to a diff also to show you
how programmatic navigation works,
because sometimes you must initiate navigation actions
from inside code and this is how you can do it.
You can import another feature, another function,
from react-router-dom for that, and that function
is actually a hook, the useNavigate hook,
a hook provided by react-router-dom.
In React, you don't just have the hooks
that are built into React.
Instead, you can also create your own hooks,
and you learn how to do that in my course as well,
and therefore third party packages like react-router-dom
also can create and share hooks.
Now, useNavigate can be executed to get hold
of a navigate function, which I store in a constant here,
but this one yet holds a function.
Therefore, we can execute it as a function
here in closeHandler, and then we pass the path to it
to which we want to navigate when it's executed.
And we could navigate to /nothing to make sure
that if I click on the backdrop,
I navigate back to the starting page.
We could also make this more flexible and use
a relative path and use two dots here,
which works in the same way as two dots work
in the terminal when using the CD command.
You go up one level.
It's the same here for routing.
You can use this special relative path here to go up
to the parent route, so to the route above this route
that's currently active.
This would make the modal a bit more dynamic.
It's up to you what you want.
Here I'll use this approach, and therefore,
if this is loaded as part of the /create-post route,
we would go up to the parent route,
which is this slash route here.
So therefore, now with that, if I save this all,
we can still open and close the modal.
We can also make sure that the cancel button
closes the modal.
for this, we can go to the NewPost component again,
which is where we have this cancel button,
and we could now also initiate programmatic
navigation here again, but here in the end,
it makes more sense to render a link again.
Therefore, we can again import the link component
from react-router-dom and then replace this button
down there with this link, get rid of the onClick
event listener now, and therefore also actually get rid of
the onCancel prop up here, because we're not using
that prop anymore.
And now we can go back to this link,
add the to prop, and tell react-router where to navigate
to when this is clicked, and here we could again
use two dots to simply go up to the parent route,
which is the same as adding a slash here
as an absolute path, in this case.
It's up to you what you want to do, both works.
So now with that, styling is a bit off,
but if I click cancel we now also close it.
Now, to fix the styling, you find an updated
NewPost module CSS file attached,
and you can simply grab the content off that
and replace your NewPost module CSS content with it.
If you do that, you will see that now
styling looks better again.
So that's how we can navigate between our different routes,
and now we got almost the same behavior as before,
but now with the advantage of having shareable URLs
and with the routing being used for linking
these different parts, and that's actually a big improvement
over what we had before, because it means that we can now
share links to the different pages that make up this app,
and of course, the more complex your React apps are,
the more likely it is that you need such shareable links
and that you want to use routing
for loading different parts of the website.