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
K
kapa.ai187d 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: ----------------------
K
kapa.ai187d ago
<@539513465103056900> kapa.ai is still learning and improving, please let us know how it did by reacting below
K
kapa.ai187d 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?
F
foreign-sapphire187d 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
K
kapa.ai187d 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: ----------------------
K
kapa.ai187d ago
<@539513465103056900> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
pm2 for productionhello, how to use pm2 for making a refine.dev app going live ? I got this error using a file calledApp 'flashes' dark mode before setting to light modeHi! For some reason, on load, my app starts off as dark mode before flashing back to light mode. HAccess controlhello! We are using keycloak and want to add roles to our application how can this be done? should Icreate refine, keep on page instead of navigate to listhow to keep on create page to countinue creating instead of navigate to listModalForm - Call Refetch on SuccessHi! I have a modalform using useModalForm, and a separate function refetch(). How could I get refAxiosIs it possible to use a never version than axios 0.26 to implement a data provider?Routecreate a nested menu or dropdown for your resources in RefineHow to define a custom api endpoint for a resource?I have a resource ``` { name: "suppliers", list: "/dashboardautocompleteconsole.js:213 MUI: A component is changing the uncontrolled value state of Autocomplete to be contrautocomplete<Controller control={control} name="status" render={autocomplete<Autocomplete {...field} options={statusOptions} deploy to electronHow can i deploy my refine app to electronAutocomplete<Controller control={control} name="status" render={MUI doesn't give me options to customize sidebar.After running command npm create refine-app@latest client, I chose CRA[legacy] , and in the componenSide Menu HideI want to hide menus on the sidebar. I am implementing a role-based application, so I want to displacustom message"notifications": { "success": "Successful", "error": "Error (status code: {{statusCoCancel queriesIs there an option to cancel all queries (not invalidate) and abort them? Something similar to: httpuseDataGrid not compatible with my apiconst { dataGridProps } = useDataGrid<IColor>({ pagination: { pageSize: 5, }, }); imChange id column name for useOne to anything other than "id"This seems like such an easy question to answer, but after hours of searching through the docs and aHow to fetch the data back present in the network preview after creating with hlp of useFormconst { saveButtonProps, onFinish, formLoading, formProps, queryResult } = use