fascinating-indigo•2y ago

CloneButton is not working

I have added a clone button on my list of data but the when I click on it it doesn't redirect me to the clone page. In version 3 there was not any issue but in version 4 it is not working.

11 Replies

kapa.ai•2y ago

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

kapa.ai•2y ago

---------------------- In version 4, the resourceNameOrRouteName prop is deprecated, and you should use the resource prop instead. This might be the reason why the CloneButton is not working as expected. Here's an example of how to use the resource prop with the CloneButton:

import { CloneButton } from "@refinedev/mui"; // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" depending on your UI library
  
const MyCloneComponent = () => {  
 return (  
 <CloneButton resource="categories" recordItemId="2" />  
 );  
};

import { CloneButton } from "@refinedev/mui"; // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" depending on your UI library
  
const MyCloneComponent = () => {  
 return (  
 <CloneButton resource="categories" recordItemId="2" />  
 );  
};

Clicking the button will trigger the clone method of useNavigation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/) and then redirect the app to /categories/clone/2. Make sure to update your CloneButton component with the resource prop, and it should work as expected. Sources: - MUI CloneButton (https://refine.dev/docs/api-reference/mui/components/buttons/clone-button) - AntD CloneButton (https://refine.dev/docs/api-reference/antd/components/buttons/clone-button) - Mantine CloneButton (https://refine.dev/docs/api-reference/mantine/components/buttons/clone-button) - Chakra-UI CloneButton (https://refine.dev/docs/api-reference/chakra-ui/components/buttons/clone-button) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

useNavigation | refine

useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.

Clone | refine

Material UI component. It uses the clone method from useNavigation under the hood.

Clone | refine

uses Ant Design's component. It uses the clone method from useNavigation under the hood.

Clone | refine

uses Mantine's component. It uses the clone method from useNavigation under the hood.

Clone | refine

uses Chakra UI's component. It uses the clone method from useNavigation under the hood.

kapa.ai•2y ago

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

fascinating-indigo•2y ago

@kapa.ai I have added a resource prop, but it still doesn't redirect me to the clone page.

kapa.ai•2y ago

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•2y ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. I recommend checking the refine documentation (https://refine.dev/docs) for more information on how to properly implement the CloneButton and other components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

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

ugly-tan•2y ago

Hey @dipbazz, yo'll also need to define a clone action in your resource definition to make it available for a resource.

fascinating-indigo•2y ago

Hey @aliemirs should I also create a component for clone?

ugly-tan•2y ago

Yes, you'll also need to define a route for it. The component can be same with the create action if you don't have action: "create" in its hooks and infer it from the route. In the earlier versions, we were creating a route like /<resource>/clone/id and render the same component that you're passing to the create action. With the new version, this is now on user space.

fascinating-indigo•2y ago

Thank you @aliemirs for your response. I solved my problem.