xenial-black•5mo ago

custom route

how can I create a custom route inside one of the resources, and a button in the list component that redirects me to this new custom route?

2 Replies

kapa.ai•5mo ago

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom route inside one of the resources and a button in the list component that redirects to this new custom route, you can use the ListButton component and the useNavigation hook provided by Refine. First, you need to define your custom route. This is not covered in the provided knowledge sources, but you can refer to the Refine documentation on custom routes (https://refine.dev/docs/routing/overview#custom-routes) for more information. Once you have your custom route, you can create a button that redirects to this route using the ListButton component. The resource prop of the ListButton component defines the redirection endpoint. By default, ListButton uses the inferred resource from the route. Here's an example of how you can use the ListButton component:

import { ListButton } from "@refinedev/antd";  // replace "antd" with your UI library
  
const MyListComponent = () => {  
 return <ListButton resource="categories" />;  
};

import { ListButton } from "@refinedev/antd";  // replace "antd" with your UI library
  
const MyListComponent = () => {  
 return <ListButton resource="categories" />;  
};

Clicking the button will trigger the list method of useNavigation and then redirect the app to the list action path of the resource, filling the necessary parameters in the route. If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the Refine component. For more information, refer to the identifier section of the Refine component documentation (https://refine.dev/docs/core/refine-component/#identifier). Please note that the provided code and information are based on the Ant Design System. If you're using a different UI library (like Mantine, Chakra UI, or Material UI), you should import the ListButton from the corresponding library (e.g., @refinedev/mantine, @refinedev/chakra-ui, or @refinedev/mui). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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