genetic-orange
genetic-orange2mo ago

How to redirect to different resource list on useModalForm

Let say i am using using useModalForm() and define resource "a" for that. But after submited i want it redirect to resource "b" list page. Help me to achieve that.
7 Replies
kapa.ai
kapa.ai2mo ago
Hi @M Farhan Zachary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the provided knowledge sources do not contain specific information about redirecting to a different resource list using useModalForm() in Refine. However, they do provide information about redirection using the useForm() hook. In useForm(), you can control the redirection behavior after form submission by using the redirect function or setting the redirect property in the hook's options. By default, it redirects to the list page, but you can programmatically specify a different destination. Here's an example:
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 a successful mutation, the form redirects to the show page. You can replace "show" with the desired destination. For more specific information about useModalForm(), I recommend checking the official Refine documentation or the source code of the useModalForm() hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@757407865391808603> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange2mo ago
please show me full example of form to redirect to different resource after submited @kapa.ai
kapa.ai
kapa.ai2mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain a full example of a form that redirects to a different resource after being submitted. However, they do provide information about redirection using the useForm() hook. Here's an example of how you can use the redirect function in useForm() to programmatically specify a different destination after a successful mutation:
import React from "react";
import { useForm } from "@refinedev/core";

export const MyForm: React.FC = () => {
const { onFinish, redirect } = useForm();

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

return (
<form onSubmit={handleSubmit}>
{/* Your form fields go here */}
<button type="submit">Submit</button>
</form>
);
};
import React from "react";
import { useForm } from "@refinedev/core";

export const MyForm: React.FC = () => {
const { onFinish, redirect } = useForm();

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

return (
<form onSubmit={handleSubmit}>
{/* Your form fields go here */}
<button type="submit">Submit</button>
</form>
);
};
In this example, after a successful mutation, the form redirects to the show page. You can replace "show" with the desired destination. For more specific information about redirecting to a different resource, I recommend checking the official Refine documentation or the source code of the useForm() hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@757407865391808603> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot
correct-apricot2mo ago
Hey @M Farhan Zachary you can use useGo hook in onMutationSuccess after setting redirect: false in your hook.
const go = useGo()
const result = useModalForm({
refineCoreProps: {
redirect: false,
onMutationSuccess: () => {
go({to: '/my-path'})
}
}
})
const go = useGo()
const result = useModalForm({
refineCoreProps: {
redirect: false,
onMutationSuccess: () => {
go({to: '/my-path'})
}
}
})
https://refine.dev/docs/routing/hooks/use-go/#usage
useGo | Refine
useGo is a hook that leverages the go method of the routerProvider to perform navigation operations.
genetic-orange
genetic-orange2mo ago
thanks, i dont know that