future-harlequin•17mo 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•17mo 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•17mo 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•17mo ago

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

Omer•17mo 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.

future-harlequin•17mo 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?

multiple-amethyst•17mo 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 🚀

future-harlequin•17mo 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.

multiple-amethyst•17mo 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 🚀

future-harlequin•17mo ago

Hey @aliemirs, my issues was already fixed yesterday. But will be happy to upgrade my refine version.