inertia skill

---
name: inertia
description: How to work effectively with Inertia, always use when developing frontend features
---

# Inertia

## Instructions

## Inertia + React

- Use `router.visit()` or `<Link>` for navigation instead of traditional links.

<code-snippet name="Inertia Client Navigation" lang="react">

import { Link } from '@inertiajs/react'

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

</code-snippet>

## Inertia + React Forms

<code-snippet name="`<Form>` Component Example" lang="react">

import { Form } from '@inertiajs/react'

export default () => (

<Form action="/users" method="post">
{({
errors,
hasErrors,
processing,
wasSuccessful,
recentlySuccessful,
clearErrors,
resetAndClearErrors,
defaults
}) => (
<>
<input type="text" name="name" />

        {errors.name && <div>{errors.name}</div>}

        <button type="submit" disabled={processing}>
            {processing ? 'Creating...' : 'Create User'}
        </button>

        {wasSuccessful && <div>User created successfully!</div>}
        </>
    )}
    </Form>

)

</code-snippet>