`redirect` useForm(@refinedev/antd) with nextjs-router doesn't work

Refine:

<Refine
                              routerProvider={routerProvider}
                              dataProvider={{
                                default: dataProvider(PIM_MS),
                                [PIM_MS]: dataProvider(PIM_MS),
                            }}

                             resources={[
                                {
                                    name: "Category",
                                    list: PRODUCT_CATEGORIES_PATH,
                                    create: PRODUCT_CATEGORIES_PATH + "/create",
                                    edit: PRODUCT_CATEGORIES_PATH + "/edit/:id",
                                    show: PRODUCT_CATEGORIES_PATH + "/show/:id",
                                    meta: {
                                        canDelete: true,
                                    },
                                },
                            ]}
                            options={{
                                syncWithLocation: true,
                                warnWhenUnsavedChanges: true,
                                useNewQueryKeys: true,
                            }}>
 </Refine>

<Refine
                              routerProvider={routerProvider}
                              dataProvider={{
                                default: dataProvider(PIM_MS),
                                [PIM_MS]: dataProvider(PIM_MS),
                            }}

                             resources={[
                                {
                                    name: "Category",
                                    list: PRODUCT_CATEGORIES_PATH,
                                    create: PRODUCT_CATEGORIES_PATH + "/create",
                                    edit: PRODUCT_CATEGORIES_PATH + "/edit/:id",
                                    show: PRODUCT_CATEGORIES_PATH + "/show/:id",
                                    meta: {
                                        canDelete: true,
                                    },
                                },
                            ]}
                            options={{
                                syncWithLocation: true,
                                warnWhenUnsavedChanges: true,
                                useNewQueryKeys: true,
                            }}>
 </Refine>

Create component

export default function CategoryCreate() {
    const {formProps, saveButtonProps, form} = useForm({
        resource: PRODUCT_CATEGORIES_RESOURCE,
        dataProviderName: PIM_MS,
        action: "create",
        redirect: "list"
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
            </Form>
        </Create>
    );
}

export default function CategoryCreate() {
    const {formProps, saveButtonProps, form} = useForm({
        resource: PRODUCT_CATEGORIES_RESOURCE,
        dataProviderName: PIM_MS,
        action: "create",
        redirect: "list"
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
            </Form>
        </Create>
    );
}

Routing

List: src/app/product-categories/page.tsx
Create: src/app/product-categories/create/page.tsx

List: src/app/product-categories/page.tsx
Create: src/app/product-categories/create/page.tsx

2 Replies

kapa.ai•2mo ago

Hi @yasuro99. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into why the redirect functionality might not be working as expected in your case. The issue you're experiencing with redirect in useForm not working with Next.js router is likely related to the integration between Refine and Next.js routing. The provided knowledge sources don't specifically address Next.js integration, but they do offer some general guidance on how redirect should work in Refine. Here are a few points to consider: 1. Router Integration: As mentioned in the useForm documentation (https://refine.dev/docs/data/hooks/use-form/#redirect-), the redirect functionality only works if you have a routerProvider defined in your <Refine> component, along with the proper resource definition including routes and actions. In your case, you have defined the routerProvider and resources, which is correct. 2. Global Configuration: The redirect behavior can be configured globally in the <Refine> component. You might want to check if you have any global redirect settings that could be overriding your local settings. The Refine component documentation (https://refine.dev/docs/core/refine-component/#redirect) shows how to set this up. 3. Next.js Routing: The examples in the knowledge sources are primarily for React Router, not Next.js routing. Next.js has a different routing system, which might not be fully compatible with Refine's default redirect mechanism. 4. Alternative Approach: If the built-in redirect isn't working, you might need to handle the redirection manually. The useForm documentation for Ant Design (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#redirect-1) shows an example of how to use the redirect function returned by useForm to programmatically redirect after a successful mutation:

const { onFinish, redirect } = useForm();

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

const { onFinish, redirect } = useForm();

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

You could try implementing something similar in your CategoryCreate component. 5. Check for Errors: Make sure there are no console errors that might be preventing the redirect from occurring. Given that the specific integration with Next.js isn't covered in the provided knowledge sources, it's possible that additional configuration or a different approach might be needed for Next.js routing. If these suggestions don't resolve the issue, you might need to consult Refine's documentation specifically for Next.js integration or reach out to Refine's support channels for more tailored assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@942371592560861194> Kapa.ai is still learning and improving, please let me know how I did by reacting below.