mere-teal•10mo ago

Named routes

Hi, does Refine.dev support named routes? e.g. if I create a custom route, not related to any resource (so I cannot use "show", "edit" ... etc), can I assign a name to it and use something like push([myname], [myparameter]) instead of ([full path]) e.g. route is <Route path="/admin/stuff/:id/custom" element={<Custom />} /> Instead of doing push("/admin/stuff/5/custom" ) I would like to do push("custom", 5) of course adding the name to the route or something similar e.g. <Route path="/admin/stuff/:id/custom" name="custom" element={<Custom />} /> it would be really helpful in case or site URLs structure change Thanks

6 Replies

kapa.ai•10mo ago

Hi @.simoneb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine.dev does support the use of parameters in routes, but it doesn't seem to support named routes in the way you're describing. In Refine, you can define your routes using the resources prop in the <Refine> component. Each resource can have actions (list, create, edit, show, clone) defined as paths. You can use :param syntax to define parameters in your routes. For example:

resources={[  
 {  
 name: "products",  
 list: "/:tenantId/products",  
 show: "/:tenantId/products/:id",  
 edit: "/:tenantId/products/:id/edit",  
 create: "/:tenantId/products/create",  
 }  
]}

resources={[  
 {  
 name: "products",  
 list: "/:tenantId/products",  
 show: "/:tenantId/products/:id",  
 edit: "/:tenantId/products/:id/edit",  
 create: "/:tenantId/products/create",  
 }  
]}

In this example, :tenantId and :id are parameters. When these actions are used in the navigation helpers, the existing parameters from the URL and the meta property of these functions will be used to determine the additional parameters when composing the path. However, Refine doesn't seem to support assigning a name to a route and then using that name to navigate. You would need to use the full path when navigating. For example:

push("/admin/stuff/5/custom")

push("/admin/stuff/5/custom")

If you want to create a custom route not related to any resource, you can do so by defining a <Route> with the desired path and element. But again, you would need to use the full path when navigating. For more information, you can refer to the Refine documentation on routing (https://refine.dev/docs/packages/documentation/routers/nextjs/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @.simoneb, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

mere-teal•10mo ago

is it possible to create custom hooks per resources? e.g. resources={[ { name: "products", list: "/:tenantId/products", show: "/:tenantId/products/:id", edit: "/:tenantId/products/:id/edit", create: "/:tenantId/products/create", custom: "/:tenantId/products/:id/custom", } ]} @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine.dev allows you to define custom routes for your resources, but it doesn't directly support defining custom hooks per resource in the resources prop. In the resources prop, you can define the list, create, edit, show, and clone actions for each resource. These actions correspond to the CRUD operations and each has a corresponding hook (useList, useCreate, useEdit, useShow, useClone).

resources={[  
 {  
 name: "products",  
 list: "/:tenantId/products",  
 show: "/:tenantId/products/:id",  
 edit: "/:tenantId/products/:id/edit",  
 create: "/:tenantId/products/create",  
 }  
]}

resources={[  
 {  
 name: "products",  
 list: "/:tenantId/products",  
 show: "/:tenantId/products/:id",  
 edit: "/:tenantId/products/:id/edit",  
 create: "/:tenantId/products/create",  
 }  
]}

However, there's no direct way to define a custom hook in the resources prop. If you want to create a custom hook for a resource, you would need to do this separately in your component code. For example, you could create a custom hook that uses the useQuery or useMutation hooks from React Query (which Refine is built on top of) to fetch or update data for a specific resource. Here's an example of what a custom hook might look like:

import { useQuery } from 'react-query';

function useCustomProductData(productId) {
  return useQuery(['product', productId], () =>
    fetch(`<https://api.fake-rest.refine.dev/products/${productId}`>).then(res =>
      res.json()
    )
  );
}

import { useQuery } from 'react-query';

function useCustomProductData(productId) {
  return useQuery(['product', productId], () =>
    fetch(`<https://api.fake-rest.refine.dev/products/${productId}`>).then(res =>
      res.json()
    )
  );
}

This custom hook useCustomProductData fetches data for a specific product. You can use it in your components like this:

function ProductComponent({ productId }) {
  const { data, isLoading } = useCustomProductData(productId);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>{data.name}</div>;
}

function ProductComponent({ productId }) {
  const { data, isLoading } = useCustomProductData(productId);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>{data.name}</div>;
}

For more information, you can refer to the Refine documentation on hooks (https://refine.dev/docs/api-reference/core/hooks/data/useList/) and the React Query documentation on custom hooks (https://react-query.tanstack.com/guides/custom-hooks). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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