correct-apricot•2y ago

useForm redirect custom resource

how do i redirect to a custom page after useForm subimit using redirect prop

4 Replies

Hi @royercross. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, the useForm hook provides a redirect function that you can use to programmatically specify the destination to redirect to after a successful mutation. By default, useForm will redirect to the "list" page. Here is an example of how you can use the redirect function to redirect to a custom page:

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, after the form is submitted and the mutation is successful, the user is redirected to the "show" page. The redirect function accepts two parameters: the first is the name of the route to redirect to, and the second is the id of the record if needed in the specified route. You can also set the redirect property in the hook's options to specify a default redirect page:

useForm({  
 redirect: "show",  
});

useForm({  
 redirect: "show",  
});

In this case, the form will redirect to the "show" page by default after a successful mutation. Please note that the redirect property can be set to "show", "edit", "list", "create", or false to prevent the page from redirecting after the form is submitted. For more information, you can check the Refine documentation (https://refine.dev/docs/data/hooks/use-form/#redirect). Please replace "show" with your custom page route. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

correct-apricotOP•2y ago

@kapa.ai i wanna redirect to something like "messages/general"

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can redirect to a custom route like "messages/general" using the redirect function from the useForm hook. Here's how you can do it:

const { onFinish, redirect } = useForm();  

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("messages/general");  
};

const { onFinish, redirect } = useForm();  

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
 e.preventDefault();  
 const data = await onFinish(formValues);  
 redirect("messages/general");  
};

In this example, after the form is submitted and the mutation is successful, the user is redirected to the "messages/general" page. For more information, you can check the Refine documentation (https://refine.dev/docs/data/hooks/use-form/#redirect). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

useForm redirect custom resource

Did you find this page helpful?