Navigation

Standard navigation

To navigate in pages/views that are not controlled by Inertia, use the standard <a>. Not surprisingly, it works really well. 😉

Inertia navigation

To navigate in pages, use the Inertia <Link> component. The <Link> component is a light wrapper around a standard anchor <a> tag that intercepts click events and prevent full page reloads.

INFO

Learn more about how Inertia provide an SPA experience in the Inertia docs.

Creating links

To create an Inertia link, use the Inertia <Link> component. Any attributes you provide to this component will be proxied to the underlying HTML tag.

Vue

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template><Link href="/">Home</Link> // [!code focus]</template>

React

import { Link } from '@inertiajs/react'

function Nav() {
  return <Link href="/">Home</Link> 
}

Svelte

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

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

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