Mengatur Route di Laravel 12 Livewire

Sebelum kita bisa melihat tampilan dari komponen Index, Create, atau Edit yang sudah kita buat sebelumnya, kita harus terlebih dahulu mendaftarkan rutenya di Laravel.

1. Buka File web.php

Silakan buka file rute utama di Laravel:

routes/web.php

File ini digunakan untuk mendefinisikan semua URL yang dapat diakses oleh user, dan menentukan ke mana masing-masing URL tersebut diarahkan.

2. Tambahkan Rute Komponen Livewire

Tambahkan kode berikut ke dalam file web.php:

use App\Livewire\Catatan\Index;

Route::get('catatans', Index::class)
    ->middleware(['auth', 'verified'])
    ->name('catatans');

Mari kita bahas baris per baris:

use App\Livewire\Catatan\Index;

Di sini kita import komponen Index agar bisa digunakan sebagai handler route.

Route::get('catatans', Index::class)

Baris ini artinya:

Ketika user mengakses URL /catatans, Laravel akan menjalankan komponen Livewire Index.

Jadi, kita tidak perlu bikin controller seperti biasanya. Langsung arahkan ke komponen Livewire.

->middleware(['auth', 'verified'])

Ini memberi batasan bahwa hanya user yang sudah login dan verifikasi email yang boleh mengakses halaman ini. Kalau belum login, otomatis akan diarahkan ke halaman login.

->name('catatans')

Kita beri nama rute ini catatans, supaya nanti kalau kita mau redirect, tinggal pakai route('catatans') — lebih rapi dan maintainable.

Route Keseluruhan

Sehingga route kita saat ini akan terlihat seperti berikut ini:

<?php

use App\Livewire\Catatan\Index;
use App\Livewire\Settings\Appearance;
use App\Livewire\Settings\Password;
use App\Livewire\Settings\Profile;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
})->name('home');
Route::view('dashboard', 'dashboard')
    ->middleware(['auth', 'verified'])
    ->name('dashboard');


Route::get('catatans', Index::class)
    ->middleware(['auth', 'verified'])
    ->name('catatans');

Route::middleware(['auth'])->group(function () {
    Route::redirect('settings', 'settings/profile');

    Route::get('settings/profile', Profile::class)->name('settings.profile');
    Route::get('settings/password', Password::class)->name('settings.password');
    Route::get('settings/appearance', Appearance::class)->name('settings.appearance');
});

require __DIR__.'/auth.php';

Kesimpulan

Dengan menambahkan route ini:

• Kita menghubungkan URL /catatans ke komponen Index
• Kita pastikan hanya user yang sah (login dan verified) yang bisa mengaksesnya
• Dan kita sudah siap untuk menampilkan daftar catatan yang tadi sudah kita siapkan di komponen Livewire