Refine•3y ago

redirect to edit after create success

i want to redirect user to edit page with its id after create is successful

kapa.ai•9/20/23, 10:14 PM

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

kapa.ai•9/20/23, 10:15 PM

----------------------
In refine, you can use the

redirect

redirect

function from the

useForm

useForm

hook to programmatically specify the destination after a successful mutation. By default,

useForm

useForm

will redirect to the "list" page, but you can change this behavior.

Here's an example of how you can redirect to the "edit" page with the record's id after a successful creation:

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

const PostCreate: React.FC = () => {  
 const { formLoading, onFinish, redirect } = useForm({  
 redirect: false,  
 });  

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

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

const PostCreate: React.FC = () => {  
 const { formLoading, onFinish, redirect } = useForm({  
 redirect: false,  
 });  

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

In this example, we first disable the default redirection by passing

redirect: false

redirect: false

to the

useForm

useForm

hook. Then, in the

handleSubmit

handleSubmit

function, we call the

onFinish

onFinish

function with the form values. This function returns a promise that resolves with the data from the successful mutation. We then call the

redirect

redirect

function with the "edit" page and the id of the newly created record.

Please note that this is a simplified example and you might need to adjust it according to your needs.

For more information, you can refer to the useForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

kapa.ai•9/20/23, 10:15 PM

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

import { useForm } from "@refinedev/core"; const PostCreate: React.FC = () => { const { formLoading, onFinish, redirect } = useForm({ redirect: false, }); const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); const data = await onFinish(formValues); redirect("edit", data?.data?.id); }; };