⏳ Chapters
- Replace History State
- POST, PUT, PATCH, and DELETE Actions
- Preserving Scroll Position
- Specifying the Link Element
- Programmatic Linking with Inertia's Router
- Cleaning Up
The Link Component and Programmatic Linking
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.
- Author
- Tom Gobich
- Published
- Aug 27
- Duration
- 8m 32s
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
Transcript
The Link Component and Programmatic Linking
-
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!