Sign In Sign Up

Sign In Sign Up

Building with AdonisJS & Inertia

Playing Next Lesson In

seconds

Building with AdonisJS & Inertia

Building with AdonisJS & Inertia #2.3

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.

Created by: @tomgobich
Published: 1 year ago

⏳ Chapters

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

Join the Discussion 2 comments

5 months ago

How can I make use of route identifiers ? Especially for programmatic linking.

1

Responding to jean-louis

5 months ago

Hi Jean!

You can achieve that by using Tuyua! From it's documentation, once installed & configured it'll allow template & programmatic linking using route identifiers like the below:

<script setup lang="ts">
import { Link, useRouter } from '@tuyau/inertia/vue'

const router = useRouter()

function visit() {
  router.visit('users.posts.show', { id: 1, postId: 2 })
}
</script>

<template>
  <div>
    <Link route="users.posts.show" :params="{ id: 1, postId: 2 }">Go to post</Link>
    <button type="button" @click="visit">Go to posts</button>
  </div>
</template>
  
    
      Copied!
      
        
      
    
  
  
inertia
pages
Home.vue

1

Transcript

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. And it looks like we didn't do anything with the login, so we're A-okay there.
Let's also expand our file explorer back out, scroll up, jump into our inertia configuration. We don't need this shared globally anymore, collapse our config back down,
and we also don't need this share example middleware anymore either, so we can delete that altogether. And whenever you're deleting router level or global level middleware, we also need to jump down to our start kernel
and delete it out of here too. Get rid of that right hand side there. We're deleting right there out of our router.use. Let's jump back into our browser and make sure everything's still working A-okay.
And whoops, I got rid of the link import. So that whole link right there went away. Let's jump back into and give it a copy from here and then jump into our register page
and paste that back inside of our script, just like so. All right, now we should be good. Let's jump back into our browser and make sure, give it a refresh, jump between our pages. Okay, cool, everything's working A-okay.
And we're back to having a clean slate.

Building with AdonisJS & Inertia

91 Lessons

14h 5m

Getting Started

1

The Basics

2

Working with Forms

3

Database & Project Scaffolding

4

Authentication & Onboarding

5

The User's Organizations

6

Difficulties, Statuses, & Access Levels

7

Courses

8

Modules & Lessons

9

Settings

10

Organization Members

11

Authorization

12

InertiaJS 2

13

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.

Sign up Sign in