feat(core): custom routes support

.changeset/ten-timers-change.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/core": patch
+---
+
+- Add custom route navigation to core router.
+- Supported by all router integrations; react, nextjs, remix.
+
+[Resolves #6864](https://github.com/refinedev/refine/issues/6864)

documentation/docs/guides-concepts/routing/index.md

@@ -167,6 +167,7 @@ All you have to do is to define your resource and their routes.
       create: "/my-products/new", // http://localhost:3000/my-products/new
       edit: "/my-products/:id/edit", // http://localhost:3000/my-products/1/edit
       clone: "/my-products/:id/clone", // http://localhost:3000/my-products/1/clone
+      custom: ["/my-products/{custom-route}"], // http://localhost:3000/my-products/{custom-route}
     },
   ]}
 />

documentation/docs/guides-concepts/routing/nextjs/resource-and-routes-usage.tsx

@@ -82,6 +82,7 @@ function App({ Component, pageProps }: AppProps) {
           // create: "/my-products/new",
           // edit: "/my-products/:id/edit",
           // clone: "/my-products/:id/clone",
+          // custom: ["/my-products/setttings", "/my-products/statistics", "/my-products/etc"],
         },
       ]}
     >

documentation/docs/guides-concepts/routing/react-router/resource-and-routes-usage.tsx

@@ -62,6 +62,7 @@ export default function App() {
             // create: "/my-products/new",
             // edit: "/my-products/:id/edit",
             // clone: "/my-products/:id/clone",
+            // custom: ["/my-products/setttings", "/my-products/statistics", "/my-products/etc"],
           },
         ]}
       >

documentation/docs/guides-concepts/routing/remix/resource-and-routes-usage.tsx

@@ -65,6 +65,7 @@ export default function App() {
               // create: "/my-products/new",
               // edit: "/my-products/:id/edit",
               // clone: "/my-products/:id/clone",
+              // custom: ["/my-products/setttings", "/my-products/statistics", "/my-products/etc"],
             },
           ]}
         >

packages/core/src/contexts/resource/types.ts

@@ -12,6 +12,7 @@ export interface IResourceComponents {
   clone?: ResourceRoutePath;
   edit?: ResourceRoutePath;
   show?: ResourceRoutePath;
+  custom?: Array<ResourceRoutePath>;
 }
 
 export type AnyString = string & { __ignore?: never };

packages/core/src/contexts/router/types.ts

@@ -29,7 +29,7 @@
 import type { BaseKey, CrudFilter, CrudSort } from "../data/types";
 import type { IResourceItem } from "../resource/types";
 
-export type Action = "create" | "edit" | "list" | "show" | "clone";
+export type Action = "create" | "edit" | "list" | "show" | "clone" | "custom";
 
 export type GoConfig = {
   to?: string;

packages/core/src/definitions/helpers/router/get-action-routes-from-resource.ts

@@ -20,15 +20,29 @@ export const getActionRoutesFromResource = (
   const actionList: Action[] = ["list", "show", "edit", "create", "clone"];
 
   actionList.forEach((action) => {
-    const route: string | undefined = resource[action];
+    const route = resource[action];
 
-    if (route) {
-      actions.push({
-        action,
-        resource,
-        route: `/${route.replace(/^\//, "")}`,
+    if (!route) return;
+
+    if (action === "custom") {
+      const customRoutes = route as string[];
+
+      return customRoutes.forEach((r) => {
+        actions.push({
+          action,
+          resource,
+          route: `/${r.replace(/^\//, "")}`,
+        });
       });
     }
+
+    const regularRoute = route as string;
+
+    return actions.push({
+      action,
+      resource,
+      route: `/${regularRoute.replace(/^\//, "")}`,
+    });
   });
 
   return actions;

packages/core/src/hooks/button/navigation-button/index.tsx

@@ -69,6 +69,7 @@ export function useNavigationButton(
     switch (props.action) {
       case "create":
       case "list":
+      case "custom":
         return navigation[`${props.action}Url`](resource, props.meta);
       default:
         if (!id) return "";

packages/core/src/hooks/navigation/index.ts

@@ -165,6 +165,31 @@ export const useNavigation = () => {
     }) as string;
   };
 
+  const customUrl = (
+    resource: string | IResourceItem,
+    meta: MetaQuery = {},
+  ) => {
+    const resourceItem =
+      typeof resource === "string"
+        ? pickResource(resource, resources) ?? { name: resource }
+        : resource;
+
+    const customActionRoute = getActionRoutesFromResource(
+      resourceItem,
+      resources,
+    ).find((r) => r.action === "custom")?.route;
+
+    if (!customActionRoute) {
+      return "";
+    }
+
+    return go({
+      to: composeRoute(customActionRoute, resourceItem?.meta, parsed, meta),
+      type: "path",
+      query: meta.query,
+    }) as string;
+  };
+
   const create = (
     resource: string | IResourceItem,
     type: HistoryType = "push",
@@ -208,6 +233,14 @@ export const useNavigation = () => {
     handleUrl(listUrl(resource, meta), type);
   };
 
+  const custom = (
+    resource: string | IResourceItem,
+    type: HistoryType = "push",
+    meta: MetaQuery = {},
+  ) => {
+    handleUrl(createUrl(resource, meta), type);
+  };
+
   return {
     create,
     createUrl,
@@ -219,5 +252,7 @@ export const useNavigation = () => {
     showUrl,
     list,
     listUrl,
+    custom,
+    customUrl,
   };
 };