eastern-cyan•4mo 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•4mo 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•4mo ago

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

eastern-cyan•4mo ago

please show me full example of form to redirect to different resource after submited @kapa.ai

kapa.ai•4mo 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•4mo ago

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

robust-apricot•4mo 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.

eastern-cyan•4mo ago

thanks, i dont know that