redirect on delete

How can I make sure the show page redirects back to where it came from when the resource is deleted?

2 Replies

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that the show page redirects back to where it came from when a resource is deleted, you can use the onSuccess property of the <DeleteButton> component. This property allows you to define a callback function that will be executed after a successful delete operation. You can use this callback to handle the redirection. Here is an example using the @refinedev/antd package:

import { DeleteButton } from "@refinedev/antd";
import { useNavigate } from "react-router-dom";

const MyDeleteComponent = () => {
  const navigate = useNavigate();

  return (
    <DeleteButton
      resourceNameOrRouteName="posts"
      recordItemId="1"
      onSuccess={() => {
        navigate(-1); // Redirects to the previous page
      }}
    />
  );
};

import { DeleteButton } from "@refinedev/antd";
import { useNavigate } from "react-router-dom";

const MyDeleteComponent = () => {
  const navigate = useNavigate();

  return (
    <DeleteButton
      resourceNameOrRouteName="posts"
      recordItemId="1"
      onSuccess={() => {
        navigate(-1); // Redirects to the previous page
      }}
    />
  );
};

In this example, the navigate(-1) function from react-router-dom is used to go back to the previous page after the delete operation is successful. For more information, you can refer to the DeleteButton documentation for Ant Design (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/delete-button/#onsuccess). If you are using a different UI framework like Mantine or Chakra UI, the approach is similar. Just ensure you import the correct DeleteButton component from the respective package and use the onSuccess property to handle the redirection. For Mantine:

import { DeleteButton } from "@refinedev/mantine";
import { useNavigate } from "react-router-dom";

const MyDeleteComponent = () => {
  const navigate = useNavigate();

  return (
    <DeleteButton
      resource="posts"
      recordItemId="1"
      onSuccess={() => {
        navigate(-1); // Redirects to the previous page
      }}
    />
  );
};

import { DeleteButton } from "@refinedev/mantine";
import { useNavigate } from "react-router-dom";

const MyDeleteComponent = () => {
  const navigate = useNavigate();

  return (
    <DeleteButton
      resource="posts"
      recordItemId="1"
      onSuccess={() => {
        navigate(-1); // Redirects to the previous page
      }}
    />
  );
};

For more details, refer to the DeleteButton documentation for Mantine (https://refine.dev/docs/ui-integrations/mantine/components/buttons/delete-button/#onsuccess). By using the onSuccess property, you can customize the behavior after a delete operation to fit your application's needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below