# htmx, redirect after request

> Two ways to redirect after an htmx request: a client-side redirect on the htmx:afterRequest event, or the cleaner HX-Redirect response header.

Author: Flavio Copes | Published: 2023-12-12 | Canonical: https://flaviocopes.com/htmx-redirect-after-request/

On a site using htmx I had the need of redirecting to the homepage (`/`) after I did a network `DELETE` request to the server.

A first implementation I did involved client-side redirect by listening to the `htmx:afterRequest` event.

The event happened after clicking a button with id `button-delete-project`, so I used this code:

```javascript
<script>
  document.addEventListener('htmx:afterRequest', 
    function (event) {
    if ((event as CustomEvent).detail.target.id === 
      'button-delete-project') {
       window.location.href = '/'
    }
  })
</script>
```

An alternative approach, the one I decided to go for, involved setting a custom htmx header in the server response.

After deleting an item, I set the `HX-Redirect` HTTP header to `/`.

Using an [Astro](https://flaviocopes.com/astro-introduction/) route, I used this code:

```javascript
if (Astro.request.method === 'DELETE') {
  await deleteProject(id)

  return new Response(null, {
    status: 204,
    statusText: 'No Content',
    headers: {
      'HX-Redirect': '/',
    },
  })
}
```

After doing the HTTP request, htmx automatically redirects to that URL, client-side.

You can set a wide variety of [custom headers in the response](https://htmx.org/reference/#response_headers), to do many interesting things like this one, for which you might think you’d have to write custom code, but it’s all built-in for you.