00:02
So the link component provided by Inertia
00:07
is actually really powerful.
00:08
So let's take some time to actually understand
00:09
what all of its capabilities are.
00:11
We've already seen that it allows us
00:12
to link from page to page
00:14
in a manner where we don't need to refresh
00:16
all of the scripts needed to mount
00:17
and actually render out our application,
00:19
but rather just makes a XHR request for the new information
00:22
and updates it accordingly.
00:23
If we were to jump back into our browser,
00:25
this is the same browser session
00:26
we were working with in the last lesson.
00:27
If I hit back, we go back to our register,
00:29
back again, back to our login,
00:31
so on and so forth for each of those requests
00:33
that we made in the last lesson.
00:34
If you want, however, a link click
00:36
to not add to the page history,
00:38
rather than pushing to the state,
00:40
which is the default behavior of the link,
00:41
we can also replace that state
00:43
whenever we click a link as well
00:44
by just adding a simple flag attribute called replace.
00:47
So if we add that to our links on both pages,
00:50
clicking the links between these pages
00:51
should now never push to our state
00:53
and never update our back button inside of the browser.
00:56
So if we open up a new browser,
00:57
private session, localhost, 3333,
01:00
go to our login page,
01:01
we click back, we just go back to the welcome page.
01:03
If we go forward, we go back to our application,
01:05
click register, and now if we click back,
01:08
there we are, we're back to the welcome page.
01:09
Awesome, so we are now replacing the state
01:11
rather than pushing to it as expected.
01:14
Go ahead and close that out, we're done with it.
01:15
These link components can also be used
01:17
as post put patch and delete request submitters as well.
01:21
So if we jump back into our routes file over here,
01:23
let's add in a post.
01:25
So router.post to,
01:27
and we'll leave our register on the right hand side,
01:28
so we'll post to register over here.
01:30
Do ctx and add in our route handler there.
01:33
What we'll do for this is just return ctx response,
01:37
redirect back.
01:38
So we'll just redirect right on back to our register page
01:41
whenever we submit this.
01:42
So let's give this link here a copy
01:44
and we'll paste it underneath our paragraph.
01:46
Let's point this to our slash register endpoint
01:49
with the goal of submitting to our post request here.
01:52
So if we want this to send out as a post
01:55
rather than a get,
01:56
we can just add in a method attribute
01:58
and specify it as post.
02:00
And now Inertia will now send this request out
02:02
as a literal post request rather than a get request.
02:05
So we can update the text here as well
02:07
to post to slash register,
02:09
as that's literally what it is doing.
02:11
Open our browser back up,
02:12
we need to go to our register page
02:14
and here is our post to register.
02:16
I'm gonna go ahead and right click,
02:17
open up our inspect panel and dive into the console.
02:19
We can give our post there a click
02:21
and you'll see that it does a post request
02:23
out to our register page
02:24
and then a get because we're redirecting
02:26
back to our register page.
02:28
And we can verify that it is actually redirecting
02:30
via the 302 found right over there.
02:32
Now, if we were to click on this post request
02:34
and take a look at the request data,
02:35
currently it's not sending anything up,
02:37
but let's say that maybe we wanted
02:38
to send some data along with it.
02:40
On our link, we can add data via the data attribute.
02:43
And let's say maybe we want to send up an email
02:45
and a password with it.
02:46
Give that a save, jump back into our browser,
02:48
clear out our terminal
02:49
and let's try giving that one more click.
02:51
Let's check out the post request now
02:52
and we can see that with our request,
02:54
we've now sent up an email and a password
02:56
matching the data that we've provided
02:58
into the data attribute.
02:59
Next, let's say that this link that we're clicking
03:01
to post to register is further down the page.
03:03
So let's add some space above all of this.
03:06
So we'll just add in a div with a style
03:08
and a height of maybe 100 VH,
03:11
just to push it way down.
03:12
Give that a save, jump back into our browser.
03:14
Okay, so now we need to actually scroll down.
03:16
You can see that right over here
03:17
to see the contents of our page.
03:19
Clear out our terminal one more time
03:21
and give our post to register another click.
03:23
And you'll see that we're right back
03:24
to having no content or so it appears.
03:26
We've really just been scrolled back up.
03:28
So if I scroll back down there,
03:29
there's our content again, give it a click.
03:31
It just scrolls back up.
03:32
What if we wanted to preserve our scroll position
03:35
whenever we do make that click
03:36
so that we won't have to scroll back down
03:38
and have a bunch of jumps as we click our actionable links?
03:41
Well, we can hide our browser back away
03:42
and on our link,
03:43
let me go ahead and break that
03:44
just so that it's a little bit more readable.
03:46
There we go.
03:47
We'll get rid of our data too.
03:48
We're done with that.
03:49
We can tell this to preserve our scroll position
03:51
by adding in a Boolean attribute, preserve scroll.
03:53
Now, whenever we click this link,
03:55
it will save the current position of our scroll bar
03:57
and plop us right back where we were.
03:59
So if we were to clear out our terminal,
04:01
we still have that giant scroll going on.
04:03
Let's click our link and we remain right where we are.
04:06
We're no longer scrolled to the top of the page.
04:08
Now, if we take a look at the actual element
04:10
that's being used for this,
04:11
you'll see that it's an anchor,
04:12
but really we're using this as a button.
04:14
If we want it to be semantic with it,
04:16
we can specify what element to use for this link component
04:19
by specifying an as attribute,
04:21
and we can plop in whatever element we want to there.
04:24
Since we're using this as more of a button,
04:26
we'll do as button there,
04:28
give that a save, jump back into our browser.
04:29
And now you can see that this is an actual button
04:32
rather than an anchor element.
04:33
And it looks like the default positioning there
04:35
wanted to center it up, but it's still there.
04:37
And whenever we click on it,
04:38
so you can see if I jump into the console
04:39
and click on it here, we remain at our scroll position.
04:42
Now, if for any reason you needed this behavior
04:44
programmatically accessible,
04:46
so if you didn't have access to whatever it is
04:48
you needed to do inside of your template,
04:49
maybe it's inside of an event handler,
04:51
you can make use of all of the same behavior
04:53
that we've shown here with the link
04:54
using Inertia's router as well.
04:56
So if we now import router,
04:59
we have access to all of the same behavior.
05:01
So I'll add in a function, say onClick,
05:03
and let's add in a button underneath our link component.
05:06
We'll use one of our ShotZn components there for our button.
05:09
And we can do @click = onClick, click me.
05:12
All right, within our onClick now,
05:14
we can make use of our router.
05:15
And let's say we wanted to traverse from our registry page
05:19
over to our login page.
05:20
Well, we can do router.visit
05:22
to change pages relatively easily.
05:24
And you'll see that we have a bunch of options
05:26
throughout here.
05:26
We can specify the href as a simple option,
05:29
but we also have method, data, replace,
05:31
preserve scroll, preserve state,
05:32
only accept headers, error bags,
05:35
force form data, so on and so forth,
05:36
and it just goes on and on.
05:37
You can see the full argument set that you can accept there
05:40
on the Inertia documentation.
05:42
Just go to manual visits and it'll be there.
05:44
For us, we just want to point to our login page.
05:47
So we can just add /login there,
05:48
give that a save, jump back into our browser,
05:50
scroll down a little bit more,
05:51
and here's our click me button.
05:53
If I give it a click, we jump over now to our login page,
05:56
jump back to our register, scroll back down,
05:58
and you'll see the behavior is the exact same
06:00
down here in our console as the link component for that.
06:04
In addition to making get requests,
06:06
we can also do post, put, patch, delete, reload, replace,
06:10
all of that fun stuff here as well.
06:12
So if we wanted to send out a post request
06:14
to /register, just as we're doing here
06:17
with our link component,
06:18
and if we wanted to send data, that would be here,
06:20
so stuff there, and if we had some additional options,
06:23
that's the third argument,
06:24
where if we wanted to preserve our scroll,
06:27
we could specify that just like so,
06:28
and now we have the exact same behavior
06:31
as we saw with our link component
06:33
inside of an event handler right here.
06:35
Jump back into our browser, let's give it a quick test.
06:37
So let's click me, and there we go.
06:38
We can see we preserved our scroll position.
06:40
We didn't get scrolled up.
06:42
We send out our post request to /register,
06:44
which redirected us back to our registered page,
06:47
and if we take a look at the get request,
06:48
just like with normal visits,
06:50
that redirection just comes back
06:52
with the page information needed
06:53
for Inertia to update our rendered page.
06:56
Again, if you would like to see the full option suite
06:57
that you have for both the link
06:59
and the router within InertiaJS,
07:01
just head to inertiajs.com, scroll down,
07:04
you have the link right here at links.
07:06
It goes over everything that you have,
07:08
as well as manual visits,
07:10
which goes over everything that you have available
07:12
via the router, and you can see
07:13
that you get event callbacks there at your disposal as well.
07:17
All right, before we round this lesson out,
07:18
let's clean up our work a little bit
07:20
because a lot of the stuff we are done with.
07:22
Let's get rid of this H1 as a whole,
07:24
as well as the div pushing all of our contents down,
07:27
get rid of our click handler, get rid of our page.
07:30
Let's get rid of all of the props
07:31
that we have here so far too.
07:33
Get rid of everything inside of that script.
07:34
We'll leave the script as we'll eventually need it.
07:36
We can get rid of our links,
07:37
taking us back to just having the H1 in the paragraph,
07:40
linking between our login and register pages.
07:43
And it looks like we didn't do anything with the login,
07:44
so we're A-okay there.
07:45
Let's also expand our file explorer back out,
07:48
scroll up, jump into our inertia configuration.
07:51
We don't need this shared globally anymore,
07:53
collapse our config back down,
07:55
and we also don't need this share example middleware
07:57
anymore either, so we can delete that altogether.
07:59
And whenever you're deleting router level
08:01
or global level middleware,
08:02
we also need to jump down to our start kernel
08:05
and delete it out of here too.
08:06
Get rid of that right hand side there.
08:08
We're deleting right there out of our router.use.
08:10
Let's jump back into our browser
08:11
and make sure everything's still working A-okay.
08:13
And whoops, I got rid of the link import.
08:15
So that whole link right there went away.
08:17
Let's jump back into and give it a copy from here
08:19
and then jump into our register page
08:21
and paste that back inside of our script, just like so.
08:23
All right, now we should be good.
08:25
Let's jump back into our browser and make sure,
08:26
give it a refresh, jump between our pages.
08:28
Okay, cool, everything's working A-okay.
08:30
And we're back to having a clean slate.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!