Provide a createbuttonprops resource name when I don't it on resources.
I wan't to pass a create link for create button on List component, but I don't have that resource on resources so it doesn't appear on sider menu. Although I don't have it on sider menu I have a route specified for the create page. So now I want to pass that create link on create button of List component. After looking at the documentation I found that I can provide
But now I don't have a
resourceName
, So is there a way to pass a url link.9 Replies
Hey @dipbazz! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
Yes, you can use the
resourceNameOrRouteName
prop in the CreateButton
component to pass a custom route name instead of a resource name. However, this prop is deprecated, and it's recommended to use the resource
prop instead.
Here's an example of how to use the CreateButton
component with a custom route name:
In this example, clicking the button will trigger the create
method of useNavigation
(https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/) and then redirect to /custom-create
.
Keep in mind that this example uses the MUI version of the CreateButton
. If you're using a different UI library, make sure to import the correct version of the CreateButton
component.
----------------------useNavigation | refine
useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
Hey @dipbazz ,
I'm sorry, I couldn't fully understand what you're trying to do, but with refine v4, you can now handle routing in your vanilla React projects just like you would normally do. Therefore, there's no need for refine to provide you with an API for this.
like-gold•2y ago
Hey @Omer, I have a list page and on my list page using the
List
component I have use canCreate
props which displays the create button. But the button doesn't navigate anywhere. This is what I have
But the thing is this list page I navigate to is not in my Refine
resources. My App.tsx with this route is
Here you can see that I have a route for the list page but I don't have it on resources. So I am not sure how my create button will navigate to the create route that I have above?optimistic-gold•2y ago
Hey @dipbazz, just checked, sorry for the issue 🙏 I have couple solutions in mind;
- You can pass
onClick
to the createButtonProps
and use preventDefault
to avoid redirect. Then, you can use useGo
to navigate to your page 🤔
- You can create a custom button and pass it to the headerButtons
, which might be easier to handle than the previous.
- I think this is not well documented on our resources
definitions but you can add a resource and have meta.hide
property set to true
, which will hide the item in useMenu
(also <Sider>
) I like this one the best 😅
Just thought about it, if you don't have list
path set in a resource, it won't be visible in <Sider>
anyways 😅
So, you can add that route to your resources
array and not just able to have a navigation in <CreateButton>
but also will enable refine to infer the resource, action, id, from the URL 🚀like-gold•2y ago
Hey @aliemirs, thank you for your response. I have solved it using the 3rd option by hiding the resources from sider, and it works perfectly.
optimistic-gold•2y ago
Happy to hear that 🙏 Unrelated to this issue but if i remember correctly, you've switched to refine@4 and had some issues with the
<Authenticated>
🤔 We've released a patch version yesterday, which I think will resolve the <Authenticated>
related issues 🚀like-gold•2y ago
Hey @aliemirs, my issues was already fixed yesterday. But will be happy to upgrade my refine version.