useNavigation() with Dropdown

Hi! I'm trying to use the useNavigation() hook with Antd's dropdown. I had

const items = {
        items: [
            {
                key: '1',
                label: 'a',
                onclick: create('a')
            },
            {
                key: '1',
                label: 'b',
                onclick: create('b')
            },
            {
                key: '1',
                label: 'c',
                onclick: create('c')
            },
            {
                key: '1',
                label: 'Generic',
                onclick: create('d')
            },
        ]
    }

const items = {
        items: [
            {
                key: '1',
                label: 'a',
                onclick: create('a')
            },
            {
                key: '1',
                label: 'b',
                onclick: create('b')
            },
            {
                key: '1',
                label: 'c',
                onclick: create('c')
            },
            {
                key: '1',
                label: 'Generic',
                onclick: create('d')
            },
        ]
    }

Which I changed to

const items = {
        items: [
            {
                key: '1',
                label: 'a',
                onclick: () => {create('a')}
            },
            {
                key: '1',
                label: 'b',
                onclick: () => {create('b')}
            },
            {
                key: '1',
                label: 'c',
                onclick: () => {create('c')}
            },
            {
                key: '1',
                label: 'd',
                onclick: () => {create('d')}
            },
        ]
    }

const items = {
        items: [
            {
                key: '1',
                label: 'a',
                onclick: () => {create('a')}
            },
            {
                key: '1',
                label: 'b',
                onclick: () => {create('b')}
            },
            {
                key: '1',
                label: 'c',
                onclick: () => {create('c')}
            },
            {
                key: '1',
                label: 'd',
                onclick: () => {create('d')}
            },
        ]
    }

But the first will go to /a/create on loading the page, and the second does not work. How should I go about this?

12 Replies

kapa.ai•12mo ago

Hi @avangeous. 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 extracts, it seems like you're trying to use the create method from the useNavigation hook in refine. This method is used to redirect the app to the create action path of a given resource. In your case, you're trying to use it within an onClick handler for a dropdown menu item. The issue you're facing might be due to how you're invoking the create method. In your first example, you're invoking the create method immediately when defining the items object. This is why it redirects to /a/create upon loading the page. In your second example, you're correctly using an arrow function to delay the invocation of the create method until the onClick event is fired. However, if it's not working as expected, it might be due to how the create method is defined or accessed. Unfortunately, the provided extracts do not contain specific examples of using the create method from the useNavigation hook within an onClick handler for a dropdown menu item. Therefore, I can't provide a confident answer based on the provided extracts. I would recommend checking the official refine documentation for more information on how to use the useNavigation hook and its create method: - useNavigation hook documentation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/) - CreateButton component documentation (https://refine.dev/docs/api-reference/antd/components/buttons/create-button/) These resources might provide more insight into how to correctly use the create method within an onClick handler. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

helpful-purple•12mo ago

🤔 @kapa.ai How can I use useNavigation to redirect to a create page on click?

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useNavigation hook in refine provides several methods for programmatically navigating in your application, including the create method. This method can be used to redirect the app to the create action path of a given resource. Here's a basic example of how you can use the create method from useNavigation in an onClick handler:

import { useNavigation } from "@pankod/refine";

const MyComponent = () => {
    const { create } = useNavigation();

    return (
        <button onClick={() => create('posts')}>
            Create Post
        </button>
    );
};

import { useNavigation } from "@pankod/refine";

const MyComponent = () => {
    const { create } = useNavigation();

    return (
        <button onClick={() => create('posts')}>
            Create Post
        </button>
    );
};

In this example, clicking the button will trigger the create method and redirect the app to the create action path of the 'posts' resource. Remember to replace 'posts' with the name of the resource you want to navigate to. The create method takes the name of the resource as its argument. For more information, refer to the useNavigation hook documentation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

helpful-purple•12mo ago

@kapa.ai How do I suppress a CreateButton's onClick?

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The CreateButton component in refine doesn't directly accept an onClick prop to override its default behavior. The button's main purpose is to redirect the app to the create action path of a given resource when clicked. If you want to suppress the onClick behavior of the CreateButton, you might need to create a custom button component and use the useNavigation hook to control the navigation manually based on your own conditions. Here's a basic example:

import { Button } from "antd";
import { useNavigation } from "@pankod/refine";

const MyCreateButton = () => {
    const { create } = useNavigation();

    const handleClick = (e) => {
        e.preventDefault();
        // Add your conditions here
        if (condition) {
            create("resourceName");
        }
    };

    return <Button onClick={handleClick}>Create</Button>;
};

import { Button } from "antd";
import { useNavigation } from "@pankod/refine";

const MyCreateButton = () => {
    const { create } = useNavigation();

    const handleClick = (e) => {
        e.preventDefault();
        // Add your conditions here
        if (condition) {
            create("resourceName");
        }
    };

    return <Button onClick={handleClick}>Create</Button>;
};

In this example, the handleClick function prevents the default button click behavior and then checks a condition. If the condition is met, it uses the create method from useNavigation to redirect to the create action path of the resource. Please note that this is a workaround and might not cover all use cases. For more information, refer to the useNavigation hook documentation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

helpful-purple•12mo ago

@kapa.ai For CreateButton specifically, not Button

kapa.ai•12mo ago

import { CreateButton } from "@pankod/refine";

const MyComponent = () => {
    return (
        <CreateButton resource="posts" disabled />
    );
};

import { CreateButton } from "@pankod/refine";

const MyComponent = () => {
    return (
        <CreateButton resource="posts" disabled />
    );
};

In this example, the CreateButton is disabled and won't trigger a navigation when clicked. If you need more control over the onClick behavior, you might need to create a custom button component and use the useNavigation hook to control the navigation manually based on your own conditions. For more information, refer to the CreateButton component documentation (https://refine.dev/docs/api-reference/antd/components/buttons/create-button/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

xenial-black•12mo ago

Hello @avangeous, make sure you defined resources correctly. This function won't work if you don't have defined resource. If it works for the first one, but not the 2nd one, it should be about resource definition.\