All language subtitles for 027 Navigating Programmatically_en

To give the user some feedback that it worked,

we probably wanna navigate away from this page

once the request was sent.

And previously, we navigated through these links,

which we added to the navigation here.

Now we wanna trigger navigation programmatically.

So once we're done with a certain task,

in this case once we're done with sending a http request.

Thankfully, implementing this is also simple

with React Router.

We can simply import something from react-router-dom,

and that something is another hook. The "useHistory" hook.

So, React has some built-in hooks.

Other third-party packages also can provide their own hooks.

You can also build your own hooks,

but we're not going to do that here in this course.

But here we've now got this "useHistory" hook,

and we can call this hook here

in the NewMeetupPage component function.

Now this gives us a history object,

and that's simply a object which exposes certain

methods to us that allow us to

manipulate the browser history.

To navigate away for example.

Now here, let's say we wanna navigate away

after the data was submitted.

To achieve this, we can use the fact that

fetch returns a Promise,

which resolves as soon as this is done.

And hence, we can add a "then" block here.

And the final function, which will execute

when the Promise completed.

And it's then in this function

where we wanna execute "history",

and then some method that allows us to navigate away.

For example, the "push" method.

To "push" a new page onto the stack of pages.

In that case, we could then later

use the "back" button to go back to the previous page.

And since that doesn't make too much sense

after submitting a form,

I'll instead use the "replace" method.

That will navigate us away, but it won't allow us

to use the "back" button to go back to the previous page.

And here, I just want to navigate

to the starting page, with "/" nothing.

So in the end, we pass to replace

what we also passed to link to the "to" prompt.

Here we set up the destination,

the target destination of a link,

with the "replace" and "push" methods on history,

we also passed the target path as a argument now.

Now instead of "then", we could also use

async "await" here, by the way, if you wanted to.

Now with that, we're navigating away

once the request succeeded.

And therefore, let's now give this a try.

Let's save this.

And enter some new data.

I'll repeat using that image here, that dummy image URL.

Some other address, and some other description here.

And then I'll click on "Add Meetup".

And you see that I'm now navigated away.

And going back won't get me back to that form.

And on Firebase, we of course

now also have that second meetup added here.

And that's how we can navigate programmatically

and leave that "Add New Meetup" page once we're done.

Now, let's make sure that the meetups we show

on the "All Meetups" page

are actually the meetups stored on Firebase.

Because at the moment, that's not happening.