00:05
>> Okay. So now we know how to actually render out a page on our application,
00:08
but how do we go about linking from one page to another?
00:12
Well, to get started with that within our routes file,
00:14
let's go ahead and add in another route definition.
00:16
So we already have one per register,
00:18
so let's add one now from login.
00:19
We'll do async, ctx,
00:21
and add in our route handler.
00:23
For this, we'll have this return ctx inertia render auth/login.
00:28
The props that we were passing in here within our register,
00:30
were just for demonstration purposes.
00:32
We'll be getting rid of that here momentarily.
00:33
So we'll leave that out of our login altogether here.
00:36
We can give that a save, open up our file explorer,
00:38
scroll down to where we have our pages,
00:40
go into our auth directory,
00:42
and let's right-click in there and add a new file called login.vue.
00:46
Hide our file explorer back away.
00:48
We'll add in our template element,
00:49
and let's go ahead and give this page a little header section.
00:51
So we'll do a div class flex, flex call, space, y2.
00:56
We'll add in an h1 to serve as our header,
00:58
text to xl font,
01:00
we'll do semi-bold with tracking height,
01:02
and the text for that will be login.
01:04
Then underneath that, we'll have a paragraph with a class,
01:08
text small, text muted foreground.
01:11
This is one of the utility classes that ShotCM Vue set up for us.
01:14
This is where we'll want a link pointing to
01:17
our register page saying something like need an account register.
01:22
Let's give this file here a save and a copy.
01:25
I'm going to leave the placeholder stuff that we have here,
01:27
but I'm also going to plop it into this template as well,
01:30
just so that we have it over here with
01:31
an anchor link pointing to our login page instead.
01:34
The text here would probably be have an account and then point to login,
01:39
and then the header text would instead be registered.
01:42
Give that a save as well. With our server still running,
01:44
let's go ahead and jump into our browser.
01:46
I'll do a little refresh there.
01:48
Here is our anchor link going to
01:50
our login page and then back to our register page.
01:52
So although everything looks good,
01:54
we're actually not making use of
01:55
inertia the way that we're using it currently.
01:57
If we go ahead and right-click our document and inspect,
02:00
let's dive into the console.
02:01
Let's hide our errors, hide our logs,
02:02
and hide our debug.
02:03
We're just going to leave XHR and request into our console logs here.
02:07
We'll go ahead and click our login link now,
02:09
and you'll see that we do a full get request for slash login,
02:12
and then all of our scripts come through.
02:14
If we then click on our register link,
02:16
you'll see that our page does a full get request for our register,
02:19
and then we reload all of our assets there too.
02:21
The behavior that we would expect to see is that we would just do
02:24
a get request for our new page and all of
02:26
our scripts would remain intact and be
02:28
reused for the new page that we're on.
02:31
Instead, we're reloading our full app script,
02:33
and inertia is resetting,
02:34
remounting our element, and everything.
02:36
The reason that's behaving this way is because
02:38
we're using a literal anchor element.
02:40
Now, just like with any client-side router system,
02:43
inertia too has its own router system that allows us to easily go from
02:46
one page to another using
02:48
the full benefits of inertia and our client application.
02:51
So let's hide our browser away.
02:52
For inertia, this component is called link,
02:54
and we can import it from inertia view 3 just like so.
02:57
I'm going to make this bar here a little bit more 50-50
03:00
between our login and register page,
03:02
and then we'll want to replace
03:03
our anchor element with that link component just like so.
03:07
Let's go ahead and pop over to our login page now,
03:09
and do the exact same things.
03:11
We'll add in a script,
03:12
setup lang, and set the language to TS for TypeScript,
03:16
and then we can import link from @inertia-view3.
03:20
Jump down to our template and replace our anchor with the link,
03:25
and give that a save.
03:26
Just like with anchor elements,
03:28
the link component also works with
03:29
hrefs to point to our target destination.
03:32
So we don't need to actually change
03:33
the href attribute as that is
03:35
perfectly valid for the link component here.
03:37
With that change made, let's jump back into our browser now.
03:40
Let's give the page a refresh so that we get a fresh console log.
03:42
You can see it looks the exact same as though we had
03:44
clicked our anchor element prior to this change.
03:47
We have our full register get request and
03:48
all of our scripts needed to actually render out the page.
03:51
Scroll back down to the bottom of our console there,
03:54
and now let's try clicking our new
03:55
inertia link component to see what happens.
03:58
So you can see we click that,
03:59
our page didn't do a refresh,
04:01
and furthermore, we still see the old console statements right here from
04:04
our initial request to our register page,
04:07
noting that we're now currently on our login page.
04:10
If we scroll down, we see the get request for our login page,
04:13
but this is now an XHR request rather than a just straight get request,
04:18
meaning that we're sending this out asynchronously,
04:20
getting the result back,
04:21
and then inertia is updating our page accordingly.
04:24
If we were to click back to our register page,
04:26
you see that happens once more,
04:27
we get just an XHR.
04:28
None of the scripts are reloading,
04:30
those are all just being reused because we
04:32
aren't actually reloading the page as a whole.
04:35
If we were to take a look at our XHR get requests for
04:38
the two pages that we went to,
04:39
our login and register pages,
04:41
expand that out, take a look at the response.
04:43
You'll see that this comes back with
04:44
the updated component that we should use,
04:46
the version, the props,
04:48
as well as the URL that we are now at.
04:50
For our login page,
04:51
you can see that it came with our props
04:53
that are being shared with that page.
04:54
We have shared globally and shared for middleware there as well.
04:57
Whereas if we scroll down and take a look at just a register page,
05:00
you can see that this is coming with shared globally,
05:03
shared for middleware, the same as our login page,
05:05
as these happen for each and every page that we have.
05:07
Then we also have shared from route,
05:09
which is shared directly from our route handler,
05:11
and it looks like we have one more there being truncated.
05:13
Yeah, stuff right there.
05:15
With the inertia's link component,
05:16
whenever we click on it,
05:17
it's really just going to send out a get request via
05:20
XHR to the new page that we're requesting,
05:22
and then it will return back just the information needed to
05:25
update our literal page for the request that we've made.
05:28
If you recall back to the previous lesson,
05:30
whenever we were taking a look at
05:31
the inertia page state and use page as a whole,
05:35
we jump back into our view dev tools,
05:36
take a look at the inertia page state.
05:38
You see the initial page looks exactly the same as
05:40
the information that we're getting back from those XHR requests.
05:44
Inertia is using the information from those XHR requests to
05:47
update the page information that it has to
05:49
keep that in sync and update our page render.
05:52
If we compare what we have here to what we have in our console,
05:55
you'll see that they look relatively similar.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!