redirect on useCreate

Iam using mutate method from useCreate hook I want to redirecxt to specific route upon success

5 Replies

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can use the useForm hook to handle form submissions and redirections. After a successful mutation, useForm will redirect to the "list" page by default. However, you can programmatically specify a different destination using the redirect function. Here's an example of how you can redirect to a "show" page after a successful mutation:

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("show", data?.data?.id);  
};

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("show", data?.data?.id);  
};

In this example, onFinish is used to handle the form submission and redirect is used to redirect to a specific page. The redirect function takes two arguments: the name of the page to redirect to and the id of the data. You can find more information about this in the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm). Please note that the useCreate hook is used to handle the creation of new data, and it doesn't directly handle redirections. You would typically use it in conjunction with useForm to handle form submissions and redirections. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

rare-sapphireOP•2y ago

@kapa.ai what if I want to redirect to a different resource?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To redirect to a different resource, you can use the redirect function from the useForm hook. The redirect function takes three arguments: the name of the resource, the name of the page to redirect to, and the id of the data. Here's an example of how you can redirect to a "show" page of a different resource after a successful mutation:

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("otherResource", "show", data?.data?.id);  
};

const { onFinish, redirect } = useForm();  
  
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("otherResource", "show", data?.data?.id);  
};

In this example, "otherResource" is the name of the resource you want to redirect to. You can find more information about this in the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

redirect on useCreate

Did you find this page helpful?