Site

Rotas

A URL continua sendo uma rota PHP. O handler decide se a resposta é uma view .mucrm.php ou uma página React.

ℹ️Em poucas palavras

uri::get aponta para o handler. O handler retorna $this->inertia('Welcome', $props). O nome Welcome é o arquivo da página, não a URL.


Registrar a rota

O mesmo contrato de Rotas. Exemplo real da prova em routes/web.php:

use MUCRM\http\web\handlers\inertia_handler;

uri::get('/inertia', [inertia_handler::class, 'index'])->name('inertia.welcome');
uri::post('/inertia/ping', [inertia_handler::class, 'ping'])->name('inertia.ping');

O mesmo nome chega no React. A entrada da Engine publica route(), então a página chama route('inertia.ping') sem importar. Imagem, banner e logo ficam em src() e theme_src(), importados de @mucrm/asset. A página de Assets mostra os dois imports juntos. O controller não precisa repassar a URL. Parâmetros preenchem o placeholder: route('profile.show', { type: 'char', name: 'Ana' }). O que sobrar vira query string.

O mapa não vai nas props do Inertia. A Engine grava storage/framework/cache/inertia/routes-{hash}.js a partir das rotas já registradas, inclusive plugins e admin, e o HTML pede esse arquivo uma vez, antes do React. O mesmo arquivo leva as bases de src(), theme_src() e plugin_src(). O layout escolhe qual arquivo usar. Navegar pela SPA não baixa o arquivo de novo. Criar, alterar ou remover uma rota, ou mudar a base do site ou o tema, muda o hash no próximo HTML, sem npm run build.


Handler

public function index()
{
    $this->title('Inertia');

    return $this->inertia('Welcome', [
        'server' => [
            'name' => (string) config('app.server.name', 'MUCRM'),
            'version' => (string) config('app.server.version', ''),
        ],
    ]);
}

$this->title() define o <title> do primeiro HTML. O menu da página é um layout React, não o .mucrm.php. inertia() encerra a view PHP dessa resposta: o layout .mucrm.php não envolve a página React.

Fora de um handler, o helper global é inertia('Welcome', $props). O terceiro argumento é o layout, quando a rota não está num controller.


Navegação SPA

import { Link } from '@inertiajs/react'

export default function Home() {
    return <Link href={route('inertia.welcome')}>Abrir</Link>
}

Link e useForm pedem a próxima rota com X-Inertia. A barra de endereço muda e o componente troca, sem recarregar o PHP layout.


POST, validação e flash

public function ping()
{
    $data = request()->check([
        'name' => 'required',
    ]);

    request()->message('Protocolo ok, ' . $data['name'] . '.');
    request()->redirect('inertia.welcome');
}
import { useForm, usePage } from '@inertiajs/react'

export default function Welcome() {
    const { errors, flash, old } = usePage().props
    const form = useForm({
        name: typeof old?.name === 'string' ? old.name : '',
    })

    function submit(event) {
        event.preventDefault()
        form.post(route('inertia.ping'))
    }

    return (
        <form onSubmit={submit}>
            <input value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
            <button disabled={form.processing}>Enviar</button>
            {errors?.name ? <p>{errors.name}</p> : null}
            {flash?.message ? <p>{flash.message}</p> : null}
        </form>
    )
}
  • request()->check() em falha redireciona de volta. Os erros chegam em props.errors.
  • request()->message() vira props.flash na visita seguinte: type e message.
  • O cookie XSRF-TOKEN cobre o POST. O cliente Inertia envia X-XSRF-TOKEN. Não precisa do input csrf() nessa página.
  • Redirect para outro host, numa visita Inertia, responde 409 com X-Inertia-Location.
  • PUT, PATCH e DELETE redirecionam com 303, para o follow-up ser GET.
⚠️Rota e página são coisas diferentes

A rota /inertia é a URL. O componente Welcome é o arquivo pages/Welcome.jsx. Várias rotas podem renderizar a mesma página, com props diferentes.