fascinating-indigo•5mo ago

How to change a route using a button?

I want create a button in mi list view to route me to another that shows differente information. How can i make a button that change the route for me?

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: ---------------------- In Refine, you can use the ListButton or ShowButton components to change the route. These components use the list and show methods from the useNavigation hook under the hood. Here's an example of how you can use the ListButton component:

import { ListButton } from "@refinedev/mantine";  
  
const MyListComponent = () => {  
 return <ListButton resource="categories" />;  
};

import { ListButton } from "@refinedev/mantine";  
  
const MyListComponent = () => {  
 return <ListButton resource="categories" />;  
};

In this example, 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. Similarly, you can use the ShowButton component to redirect to a specific record:

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton recordItemId="123" />;  
};

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton recordItemId="123" />;  
};

In this case, clicking the button will trigger the show method of useNavigation and then redirect the app to the show action path of the resource, filling the necessary parameters in the route. You can find more information in the official documentation for ListButton (https://refine.dev/docs/ui-integrations/mantine/components/buttons/list-button) and ShowButton (https://refine.dev/docs/ui-integrations/mantine/components/buttons/show-button#recorditemid). ---------------------- 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