Como apagar registro do banco de dados com Laravel 11 e React


Neste tutorial, será apresentado como apagar um registro do banco de dados com Laravel 11 e React. 

Primeiramente, será demonstrado como exibir o alerta para confirmar a exclusão. 

Em seguida, será explicado como apagar o usuário no banco de dados com Laravel. 

Por fim, será mostrado como exibir o alerta após a exclusão do registro no banco de dados.

Download do código fonte desenvolvido na aula: Download

PlayList sobre Laravel 11 + Breeze + React 11: Acessar

Receber as aulas gratuitas do curso de Laravel: Acessar


Para começar, é utilizado como base o projeto da aula "Como criar formulário editar com Laravel 11 e React".

Criada a rota no arquivo "routes/web.php".

Route::delete('/destroy-user/{user}', [UserController::class, 'destroy'])->name('users.destroy');

Criado o método "destroy" na controller "app/Http/Controllers/UserController.php".

O método é responsável por apagar o registro no banco de dados e redirecionar para a rota de listagem..

public function destroy(User $user)
{
    
    // Excluir o registro do banco de dados
    $user->delete();

    return Redirect::route('users.index')->with('success', 'Usuário apagado com sucesso!');

}

Criado o componente para o usuário confirmar a exclusão em "resources/js/Components/Delete/ConfirmDeleteButton.js".

import { useForm } from "@inertiajs/react";
import React from "react";
import DangerButton from "../Button/DangerButton";

function ConfirmDeleteButton({ id, routeName }) {

    const { delete: destroy } = useForm();

    const handleDelete = () => {
        if(window.confirm("Tem certeza que deseja deletar este registro!")){
            destroy(route(routeName, id));
        }        
    }

    return (
        <DangerButton className="ms-1 text-sm" onClick={handleDelete}>
            Apagar
        </DangerButton>
    );

}

export default ConfirmDeleteButton;

O componente criado acima é utilizado na página que contém a funcionalidade de listagem de registros: "resources/js/Pages/Users/UserIndex.js".

<ConfirmDeleteButton id={user.id} routeName="users.destroy" />

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido útil!