⏳ Chapters
- POST, PUT, PATCH, and DELETE Actions
- Preserving Scroll Position
- Specifying the Link Element
- Programmatic Linking with Inertia's Router
- Cleaning Up
In this lesson, we'll explore Inertia's Link component and its props. We'll then examine how to link between pages programmatically using Inertia's router.
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
00:00 - Replace History State
01:15 - POST, PUT, PATCH, and DELETE Actions
03:00 - Preserving Scroll Position
04:08 - Specifying the Link Element
04:42 - Programmatic Linking with Inertia's Router
07:17 - Cleaning Up
So the link component provided by Inertia
is actually really powerful.
So let's take some time to actually understand
what all of its capabilities are.
We've already seen that it allows us
to link from page to page
in a manner where we don't need to refresh
all of the scripts needed to mount
and actually render out our application,
but rather just makes a XHR request for the new information
and updates it accordingly.
If we were to jump back into our browser,
this is the same browser session
we were working with in the last lesson.
If I hit back, we go back to our register,
back again, back to our login,
so on and so forth for each of those requests
that we made in the last lesson.
If you want, however, a link click
to not add to the page history,
rather than pushing to the state,
which is the default behavior of the link,
we can also replace that state
whenever we click a link as well
by just adding a simple flag attribute called replace.
So if we add that to our links on both pages,
clicking the links between these pages
should now never push to our state
and never update our back button inside of the browser.
So if we open up a new browser,
private session, localhost, 3333,
go to our login page,
we click back, we just go back to the welcome page.
If we go forward, we go back to our application,
click register, and now if we click back,
there we are, we're back to the welcome page.
Awesome, so we are now replacing the state
rather than pushing to it as expected.
Go ahead and close that out, we're done with it.
These link components can also be used
as post put patch and delete request submitters as well.
So if we jump back into our routes file over here,
let's add in a post.
So router.post to,
and we'll leave our register on the right hand side,
so we'll post to register over here.
Do ctx and add in our route handler there.
What we'll do for this is just return ctx response,
redirect back.
So we'll just redirect right on back to our register page
whenever we submit this.
So let's give this link here a copy
and we'll paste it underneath our paragraph.
Let's point this to our slash register endpoint
with the goal of submitting to our post request here.
So if we want this to send out as a post
rather than a get,
we can just add in a method attribute
and specify it as post.
And now Inertia will now send this request out
as a literal post request rather than a get request.
So we can update the text here as well
to post to slash register,
as that's literally what it is doing.
Open our browser back up,
we need to go to our register page
and here is our post to register.
I'm gonna go ahead and right click,
open up our inspect panel and dive into the console.
We can give our post there a click
and you'll see that it does a post request
out to our register page
and then a get because we're redirecting
back to our register page.
And we can verify that it is actually redirecting
via the 302 found right over there.
Now, if we were to click on this post request
and take a look at the request data,
currently it's not sending anything up,
but let's say that maybe we wanted
to send some data along with it.
On our link, we can add data via the data attribute.
And let's say maybe we want to send up an email
and a password with it.
Give that a save, jump back into our browser,
clear out our terminal
and let's try giving that one more click.
Let's check out the post request now
and we can see that with our request,
we've now sent up an email and a password
matching the data that we've provided
into the data attribute.
Next, let's say that this link that we're clicking
to post to register is further down the page.
So let's add some space above all of this.
So we'll just add in a div with a style
and a height of maybe 100 VH,
just to push it way down.
Give that a save, jump back into our browser.
Okay, so now we need to actually scroll down.
You can see that right over here
to see the contents of our page.
Clear out our terminal one more time
and give our post to register another click.
And you'll see that we're right back
to having no content or so it appears.
We've really just been scrolled back up.
So if I scroll back down there,
there's our content again, give it a click.
It just scrolls back up.
What if we wanted to preserve our scroll position
whenever we do make that click
so that we won't have to scroll back down
and have a bunch of jumps as we click our actionable links?
Well, we can hide our browser back away
and on our link,
let me go ahead and break that
just so that it's a little bit more readable.
There we go.
We'll get rid of our data too.
We're done with that.
We can tell this to preserve our scroll position
by adding in a Boolean attribute, preserve scroll.
Now, whenever we click this link,
it will save the current position of our scroll bar
and plop us right back where we were.
So if we were to clear out our terminal,
we still have that giant scroll going on.
Let's click our link and we remain right where we are.
We're no longer scrolled to the top of the page.
Now, if we take a look at the actual element
that's being used for this,
you'll see that it's an anchor,
but really we're using this as a button.
If we want it to be semantic with it,
we can specify what element to use for this link component
by specifying an as attribute,
and we can plop in whatever element we want to there.
Since we're using this as more of a button,
we'll do as button there,
give that a save, jump back into our browser.
And now you can see that this is an actual button
rather than an anchor element.
And it looks like the default positioning there
wanted to center it up, but it's still there.
And whenever we click on it,
so you can see if I jump into the console
and click on it here, we remain at our scroll position.
Now, if for any reason you needed this behavior
programmatically accessible,
so if you didn't have access to whatever it is
you needed to do inside of your template,
maybe it's inside of an event handler,
you can make use of all of the same behavior
that we've shown here with the link
using Inertia's router as well.
So if we now import router,
we have access to all of the same behavior.
So I'll add in a function, say onClick,
and let's add in a button underneath our link component.
We'll use one of our ShotZn components there for our button.
And we can do @click = onClick, click me.
All right, within our onClick now,
we can make use of our router.
And let's say we wanted to traverse from our registry page
over to our login page.
Well, we can do router.visit
to change pages relatively easily.
And you'll see that we have a bunch of options
throughout here.
We can specify the href as a simple option,
but we also have method, data, replace,
preserve scroll, preserve state,
only accept headers, error bags,
force form data, so on and so forth,
and it just goes on and on.
You can see the full argument set that you can accept there
on the Inertia documentation.
Just go to manual visits and it'll be there.
For us, we just want to point to our login page.
So we can just add /login there,
give that a save, jump back into our browser,
scroll down a little bit more,
and here's our click me button.
If I give it a click, we jump over now to our login page,
jump back to our register, scroll back down,
and you'll see the behavior is the exact same
down here in our console as the link component for that.
In addition to making get requests,
we can also do post, put, patch, delete, reload, replace,
all of that fun stuff here as well.
So if we wanted to send out a post request
to /register, just as we're doing here
with our link component,
and if we wanted to send data, that would be here,
so stuff there, and if we had some additional options,
that's the third argument,
where if we wanted to preserve our scroll,
we could specify that just like so,
and now we have the exact same behavior
as we saw with our link component
inside of an event handler right here.
Jump back into our browser, let's give it a quick test.
So let's click me, and there we go.
We can see we preserved our scroll position.
We didn't get scrolled up.
We send out our post request to /register,
which redirected us back to our registered page,
and if we take a look at the get request,
just like with normal visits,
that redirection just comes back
with the page information needed
for Inertia to update our rendered page.
Again, if you would like to see the full option suite
that you have for both the link
and the router within InertiaJS,
just head to inertiajs.com, scroll down,
you have the link right here at links.
It goes over everything that you have,
as well as manual visits,
which goes over everything that you have available
via the router, and you can see
that you get event callbacks there at your disposal as well.
All right, before we round this lesson out,
let's clean up our work a little bit
because a lot of the stuff we are done with.
Let's get rid of this H1 as a whole,
as well as the div pushing all of our contents down,
get rid of our click handler, get rid of our page.
Let's get rid of all of the props
that we have here so far too.
Get rid of everything inside of that script.
We'll leave the script as we'll eventually need it.
We can get rid of our links,
taking us back to just having the H1 in the paragraph,
linking between our login and register pages.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!