quickest-silver
quickest-silver15mo ago

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
ButtonProps & { resourceName: string }
ButtonProps & { resourceName: string }
But now I don't have a resourceName, So is there a way to pass a url link.
9 Replies
kapa.ai
kapa.ai15mo ago
Hey @dipbazz! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- 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:
import { CreateButton } from "@refinedev/mui";

const MyCreateComponent = () => {
return (
<CreateButton
resource={{
name: "custom-route",
route: "/custom-create",
}}
/>
);
};
import { CreateButton } from "@refinedev/mui";

const MyCreateComponent = () => {
return (
<CreateButton
resource={{
name: "custom-route",
route: "/custom-create",
}}
/>
);
};
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.
kapa.ai
kapa.ai15mo ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
Omer
Omer15mo ago
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.
quickest-silver
quickest-silver15mo 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
<List
canCreate
>
// code block
</List>
<List
canCreate
>
// code block
</List>
But the thing is this list page I navigate to is not in my Refine resources. My App.tsx with this route is
<Refine
resources=[{}]
>
<Routes>
<Route
element={(
<Authenticated fallback={<CatchAllNavigate to="login" />}>
<Layout
Sider={Sider}
Header={Header}
OffLayoutArea={OffLayoutArea}
Footer={Footer}
>
<Outlet />
</Layout>
</Authenticated>
)}
>
<Route path="reservations-quota/:agentId">
<Route index element={<ReservationQuotaList />} />
<Route path="create" element={<ReservationQuotaCreate />} />
</Route>
</Route>
</Refine>
<Refine
resources=[{}]
>
<Routes>
<Route
element={(
<Authenticated fallback={<CatchAllNavigate to="login" />}>
<Layout
Sider={Sider}
Header={Header}
OffLayoutArea={OffLayoutArea}
Footer={Footer}
>
<Outlet />
</Layout>
</Authenticated>
)}
>
<Route path="reservations-quota/:agentId">
<Route index element={<ReservationQuotaList />} />
<Route path="create" element={<ReservationQuotaCreate />} />
</Route>
</Route>
</Refine>
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?
absent-sapphire
absent-sapphire15mo 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 🚀
quickest-silver
quickest-silver15mo 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.
absent-sapphire
absent-sapphire15mo 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 🚀
quickest-silver
quickest-silver15mo ago
Hey @aliemirs, my issues was already fixed yesterday. But will be happy to upgrade my refine version.