All language subtitles for 019 Implementing Programmatic (Imperative) Navigation_en

[Maximilian Schwarzmuller] Now this demo application

is taking shape.

Let's now take look at this, Add a Quote form.

Now we will later at the actual logic for adding a quote

for the moment, If we open the dev tools,

if I

enter some data here,

we just see it locked to the console because

that's all we're doing upon a form submission.

But let's imagine

that this actually would be sent to a server.

What would we typically expect from an application

from a website if we submitted a form.

We typically expect either some success message,

maybe a modal overlay, which opens up,

or we expect that we navigate somewhere else.

If I add a new quote

and that request was sent to the server,

I might expect

that I'm automatically navigated away from this page,

maybe to the All Quotes page.

And that is something which

I do wanna implement here as well.

Now for that of course,

we could convert our submit button here

in the QuoteForm to a link so

that it links to the All Quote page.

But actually here we don't want the link,

we want a button which submits the form.

So using a link is not an option here.

Instead, what we need here

is something called programmatic navigation.

We wanna trigger a navigation action

and navigate the user away programmatically

in our code.

So it's not a link which the user clicks to navigate away,

but it's some action triggered by our code,

when some abreaction sending the

entered data to a server finished.

And in the end we probably wanna trigger

this navigation action from inside,

the NewQuote page component here.

Because here we do have this addQuoteHandler

where we will later send the requests to the server,

and therefore it's here where we also want to navigate away.

But how can we now navigate programmatically?

How can we tell React Router that we wanna switch pages?

Well for this React Router again has a hook,

which we can import.

So we can import from react-router-dom,

and we can import the useHistory hook.

The name might be a bit strange,

but it's named like this because it allows us

to change the browser history.

So the history of pages we visited.

We call useHistory like this,

and that gives us a history object,

which we can store in a constant.

And extend this history object,

which we can use

to

trigger certain history changing actions.

And what changes the history of pages,

well, for example if we add a new page,

if we go to a new page.

And we can navigate around

with the push method here,

which pushes a new page on the stack of pages,

so a new page on our history of pages,

or we can navigate with the replace method

that replaces the current page.

The difference is that with push,

we can go back with the back button

to the page we're coming from,

with replace we can't.

So replace is like a redirect

where we changed occurred page, push adds a new page.

And it's up to you what you want.

Do you want to allow your user to go back or not

Here I'll go for push

and I will allow the user to go back,

and then here we could go to /quotes like this.

So now we will navigate away

if we send our data here

at the moment, of course,

we're only logging it to the console.

But with that if we now save this,

if I enter some

data here,

this is a test,

and I click Add Quote,

you see it's locked to the console,

but we're also navigated away.

And that is how we can implement programmatic navigation

with React Router.