redirect successful delete operation back to list action?

K

kapa.ai•11/13/24, 5:48 PM

Hi @flankieflew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•11/13/24, 5:48 PM

----------------------
To redirect after a successful delete operation back to the list action, you have a few options in refine:

By default, the delete button will redirect to the list page after a successful deletion. This is the standard behavior if you don't specify otherwise.
If you want to explicitly set the redirect, you can use the
```
redirect
```
redirect
```
redirect
```
redirect
prop on the
```
<DeleteButton>
```
<DeleteButton>
```
<DeleteButton>
```
<DeleteButton>
component:

<DeleteButton
  resource="posts"
  recordItemId="123"
  redirect="list"
/>

<DeleteButton
  resource="posts"
  recordItemId="123"
  redirect="list"
/>

<DeleteButton
  resource="posts"
  recordItemId="123"
  redirect="list"
/>

<DeleteButton
  resource="posts"
  recordItemId="123"
  redirect="list"
/>

This will ensure redirection to the list page after deletion API Reference (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/delete-button/#api-reference).

If you need more control, you can use the
```
onSuccess
```
```
onSuccess
```
callback to handle the redirection programmatically:

import { useNavigation } from "@refinedev/core";

const { list } = useNavigation();

<DeleteButton
  resource="posts"
  recordItemId="123"
  onSuccess={() => {
    list("posts");
  }}
/>

import { useNavigation } from "@refinedev/core";

const { list } = useNavigation();

<DeleteButton
  resource="posts"
  recordItemId="123"
  onSuccess={() => {
    list("posts");
  }}
/>

import { useNavigation } from "@refinedev/core";

const { list } = useNavigation();

<DeleteButton
  resource="posts"
  recordItemId="123"
  onSuccess={() => {
    list("posts");
  }}
/>

import { useNavigation } from "@refinedev/core";

const { list } = useNavigation();

<DeleteButton
  resource="posts"
  recordItemId="123"
  onSuccess={() => {
    list("posts");
  }}
/>

This approach gives you flexibility to add custom logic before redirecting Properties (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/delete-button/#properties).

If you're using the
```
useForm
```
```
useForm
```
hook, you can set the
```
redirect
```
redirect
```
redirect
```
redirect
option:

const { ... } = useForm({
  redirect: "list"
});

const { ... } = useForm({
  redirect: "list"
});

const { ... } = useForm({
  redirect: "list"
});

const { ... } = useForm({
  redirect: "list"
});

This will redirect to the list page after form submission, which includes delete operations redirect (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#redirect).

Remember that the exact implementation might vary slightly depending on which UI framework you're using with refine (Ant Design, Material UI, etc.), but the core concepts remain the same.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•11/13/24, 5:48 PM

@343691288442306561 Kapa.ai is still learning and improving, please let me know how I did by reacting below.