Laravel – POST http://127.0.0.1:8000/admin/sparepart 404 (Not Found) when i try to Inertia.post('/admin/sparepart', formData)

I use Laravel, Inertia and Vue.

When I submitted the form, the page returned a 404 not found window and the console said
POST http://127.0.0.1:8000/admin/sparepart 404 (Not Found)

I don’t know if it’s because of an error in the route or if the form wasn’t sent correctly to the backend.

This is from the network header tabs:

Request URL:
http://127.0.0.1:8000/admin/sparepart
Request Method:
POST
Status Code:
404 Not Found
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin

In the payload, it seems the formData does exist:

nama_sparepart: as
harga: 2
stok: 2
kategori_id: 1
image: (binary)

I’m using Route::resource
Route::resource('/admin/sparepart', SparepartController::class);
and yeah it does exist when I use route::list

GET|HEAD admin/sparepart ………………………………… sparepart.index › SparepartController@index
POST admin/sparepart ………………………………… sparepart.store › SparepartController@store

controller:

public function store(Request $request){
        $request->validate([
            'nama_sparepart' => 'required|string|max: 25',
            'harga' => 'required|number',
            'stok' => 'required|number',
            'image' => 'required|image',
            'kategori_id' => 'required',
        ]);

        $image = $request->file('image');
        $image->storeAs('public/spareparts', $image->hashname());

        $sparepart = Sparepart::create([
            'nama_sparepart' => $request->nama_sparepart,
            'harga' => $request->harga,
            'stok' => $request->stok,
            'image' => $image->hashName(),
            'kategori_id' => $request->kategori_id,
        ]);

        if($sparepart){
            return Redirect::route('sparepart.index')->with('message', 'success');
        }

Vue scripts

<script setup>
    import { reactive } from 'vue'
    import { Inertia } from '@inertiajs/inertia'

        //props
        defineProps({
            errors: Object,
            kategori: Array
        })

            //state posts
            const sparepart = reactive({
                nama_sparepart  : '',
                harga           : '',
                stok            : '',
                image           : null,
                kategori_id     : ''
            })

            function handleImageUpload(event) {
                const file = event.target.files[0]
                 console.log("File yang dipilih:", file);
                if (file) {
                    sparepart.image = file // Simpan file ke state
                }
            }

         //function storePost
function storePost() {
    console.log("State sebelum dikirim:", sparepart);
    const formData = new FormData()
    formData.append('nama_sparepart', sparepart.nama_sparepart)
    formData.append('harga', sparepart.harga)
    formData.append('stok', sparepart.stok)
    formData.append('kategori_id', sparepart.kategori_id)
    if (sparepart.image) {
        formData.append('image', sparepart.image) // Sertakan file gambar
    }


    // Debugging FormData
    for (let [key, value] of formData.entries()) {
        console.log(key + ': ' + value);
    }

    // Kirim data dengan FormData
    Inertia.post('/admin/sparepart', formData)

}
</script>

Vue page:

<template>
     <div>
        <div class="card border-0 rounded shadow">
            <div class="card-body">
                <h4>TAMBAH POST</h4>
                <hr>
                <form @submit.prevent="storePost" enctype="multipart/form-data">

                    <div>
                        <label for="image">Gambar</label>
                        <input type="file" id="image" @change="handleImageUpload" accept="image/*" />
                        <span v-if="errors.image">{{ errors.image }}</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Nama Sparepart</label>
                        <input type="text" class="form-control" v-model="sparepart.nama_sparepart" placeholder="Masukkan Title Post">
                        <div v-if="errors.nama_sparepart" class="mt-2 alert alert-danger">
                            {{ errors.nama_sparepart }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Harga</label>
                        <input type="number" class="form-control" v-model="sparepart.harga" placeholder="Masukkan Title Post">
                        <div v-if="errors.harga" class="mt-2 alert alert-danger">
                            {{ errors.harga }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Stok</label>
                        <input type="number" class="form-control" v-model="sparepart.stok" placeholder="Masukkan Title Post">
                        <div v-if="errors.stok" class="mt-2 alert alert-danger">
                            {{ errors.stok }}
                        </div>
                    </div>

                    <div>
                        <label for="kategori_id">Kategori</label>
                        <select v-model="sparepart.kategori_id" id="kategori_id">
                            <option value="">Pilih Kategori</option>
                            <option v-for="k in kategori" :key="k.id" :value="k.id">{{ k.nama_kategori }}</option>
                        </select>
                        <span v-if="errors.kategori_id">{{ errors.kategori_id }}</span>
                    </div>

                    <!-- Tombol Submit -->
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>

</template>

I tried to do a manual route(like Route::post(‘url’,[controller class])), but I still get a 404.