Headless Navigation / Headless EditButton
I am in the process of migrating to a headless UI in my refine project.
I was just implementing a Edit Button and was wondering if my implementation was really the way to go.
Here is my implementation:
Do really have to call 3 hooks to navigate to edit a certain resource or is there a better way?
4 Replies
Hi @zomh. 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, the
EditButton
component from Refine provides a simpler way to navigate to the edit page of a certain resource. This component uses the edit
method from useNavigation
under the hood to redirect the app to the edit page route of the resource.
You can use the EditButton
component like this:
In your case, you can replace the Button
component with the EditButton
component and pass the resource
and recordItemId
props. The resource
prop is used to define the redirection endpoint and the recordItemId
prop is used to append the record id to the end of the route path for the edit route.
Please note that the resourceNameOrRouteName
prop is deprecated and you should use the resource
prop instead.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/mui/components/buttons/edit-button).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade•15mo ago
^bump anyone?
is there a headless implementation of EditButton @Omer ? sorry for the ping
🥺
Hey @zomh ,
You can check out the EditButton source code from here https://github.com/refinedev/refine/blob/next/packages/mui/src/components/buttons/edit/index.tsx
GitHub
refine/packages/mui/src/components/buttons/edit/index.tsx at next ·...
Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refine/packages/mui/src/components/buttons/edit/index.tsx at next · refinedev/refine