Liên kết

import { Link } from '@inertiajs/vue3'

<Link href="/">Home</Link>

import { Link } from "@inertiajs/react";

<Link href="/">Home</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia>Home</a>

<Link href="/">Home</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

import { Link } from '@inertiajs/react'

<Link href="/logout" method="post" as="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

import { Link } from '@inertiajs/svelte'

<Link href="/logout" method="post" as="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button">Logout</Link>

import { Link } from "@inertiajs/react";

<Link href="/logout" method="post" as="button">
  Logout
</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<button use:inertia={{ href: '/logout', method: 'post' }} type="button">Logout</button>

<Link href="/logout" method="post">Logout</Link>

import { Link } from '@inertiajs/vue3' import { show } from
'App/Http/Controllers/UserController'

<Link :href="show(1)">John Doe</Link>

import { Link } from "@inertiajs/react";
import { show } from "App/Http/Controllers/UserController";

<Link href={show(1)}>John Doe</Link>;

import { inertia, Link } from '@inertiajs/svelte'
import { show } from 'App/Http/Controllers/UserController'

<button use:inertia={{ href: show(1) }} type="button">John Doe</button>

<Link href={show(1)}>John Doe</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link>

import { Link } from "@inertiajs/react";

<Link href="/endpoint" method="post" data={{ foo: bar }}>
  Save
</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<button use:inertia={{ href: '/endpoint', method: 'post', data: { foo: bar } }} type="button">Save</button>

<Link href="/endpoint" method="post" data={{ foo: bar }}>Save</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>

import { Link } from "@inertiajs/react";

<Link href="/endpoint" headers={{ foo: bar }}>
  Save
</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<button use:inertia={{ href: '/endpoint', headers: { foo: bar } }}>Save</button>

<Link href="/endpoint" headers={{ foo: bar }}>Save</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/" replace>Home</Link>

import { Link } from "@inertiajs/react";

<Link replace href="/">
  Home
</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia={{ replace: true }}>Home</a>

<Link href="/" replace>Home</Link>

import { Link } from '@inertiajs/vue3'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>Search</Link>

import { Link } from '@inertiajs/react'

<input onChange={this.handleChange} value={query} type="text" />

<Link href="/search" data={query} preserveState>Search</Link>

import { inertia, Link } from '@inertiajs/svelte'

<input bind:value={query} type="text" />

<button use:inertia={{ href: '/search', data: { query }, preserveState: true }}>Search</button>

<Link href="/search" data={{ query }} preserveState>Search</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/" preserve-scroll>Home</Link>

import { Link } from "@inertiajs/react";

<Link preserveScroll href="/">
  Home
</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia={{ preserveScroll: true }}>Home</a>

<Link href="/" preserveScroll>Home</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/users?active=true" :only="['users']">Show active</Link>

import { Link } from "@inertiajs/react";

<Link href="/users?active=true" only={["users"]}>
  Show active
</Link>;

import { inertia, Link } from '@inertiajs/svelte'

<a href="/users?active=true" use:inertia={{ only: ['users'] }}>Show active</a>

<Link href="/users?active=true" only={['users']}>Show active</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/another-page" view-transition>Navigate</Link>

import { Link } from "@inertiajs/react";

<Link href="/another-page" viewTransition>
  Navigate
</Link>;

import { Link } from '@inertiajs/svelte'

<Link href="/another-page" viewTransition>Navigate</Link>

import { Link } from '@inertiajs/vue3' // URL exact match...
<Link href="/users" :class="{ active: $page.url === '/users' }">Users</Link>

// Component exact match...
<Link
  href="/users"
  :class="{ active: $page.component === 'Users/Index' }"
>Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link
  href="/users"
  :class="{ active: $page.url.startsWith('/users') }"
>Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link
  href="/users"
  :class="{ active: $page.component.startsWith('Users') }"
>Users</Link>

import { usePage } from '@inertiajs/react'

const { url, component } = usePage()

// URL exact match...
<Link href="/users" className={url === '/users' ? 'active' : ''}>Users</Link>

// Component exact match...
<Link href="/users" className={component === 'Users/Index' ? 'active' : ''}>Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link href="/users" className={url.startsWith('/users') ? 'active' : ''}>Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link href="/users" className={component.startsWith('Users') ? 'active' : ''}>Users</Link>

import { inertia, Link, page } from '@inertiajs/svelte'

// URL exact match...
<a href="/users" use:inertia class:active={page.url === '/users'}>Users</a>

// Component exact match...
<a href="/users" use:inertia class:active={page.component === 'Users/Index'}>Users</a>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link href="/users" class={page.url.startsWith('/users') ? 'active' : ''}>Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link href="/users" class={page.component.startsWith('Users') ? 'active' : ''}>Users</Link>