optimistic-gold•6mo ago

Nested resources under same resources

I try to use nested resources, more precisely i need to have multiple resources under one. But when i go to the list of thenested resource, if i use useParsed, it don't find the resource. Here is my example of resource : }, { name: "groups", list: "/groups", create: "/groups/create", edit: "/groups/edit/:id", show: "/groups/show/:id", meta: { canDelete: true, }, }, { name: "sub-group", list: "/groups/:id/sub-group", create: "/groups/:id/sub-group/create", edit: "/groups/:id/sub-group/edit/:id", show: "/groups/:id/sub-group/show/:id", meta: { parent: "groups", }, },

23 Replies

kapa.ai•6mo ago

Hi @UmadGen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle nested resources in refine, you need to ensure that your resource definitions and hooks are correctly set up to recognize and handle the nested routes. Based on the information provided, it looks like you have a good start, but there are a few things to consider to make sure everything works smoothly. Resource Definitions Your resource definitions look mostly correct, but you need to ensure that the meta properties are correctly set up to handle nested resources. Here is your example with a slight adjustment to ensure clarity:

{
  name: "groups",
  list: "/groups",
  create: "/groups/create",
  edit: "/groups/edit/:id",
  show: "/groups/show/:id",
  meta: {
    canDelete: true,
  },
},
{
  name: "sub-group",
  list: "/groups/:groupId/sub-group",
  create: "/groups/:groupId/sub-group/create",
  edit: "/groups/:groupId/sub-group/edit/:subGroupId",
  show: "/groups/:groupId/sub-group/show/:subGroupId",
  meta: {
    parent: "groups",
  },
},

{
  name: "groups",
  list: "/groups",
  create: "/groups/create",
  edit: "/groups/edit/:id",
  show: "/groups/show/:id",
  meta: {
    canDelete: true,
  },
},
{
  name: "sub-group",
  list: "/groups/:groupId/sub-group",
  create: "/groups/:groupId/sub-group/create",
  edit: "/groups/:groupId/sub-group/edit/:subGroupId",
  show: "/groups/:groupId/sub-group/show/:subGroupId",
  meta: {
    parent: "groups",
  },
},

Using useParsed Hook To handle dynamic parameters in your nested routes, you can use the useParsed hook. This hook helps you parse the URL and extract parameters. Here is an example of how you can use it:

import { useParsed } from "@pankod/refine-core";

const { params } = useParsed();
const groupId = params.groupId;
const subGroupId = params.subGroupId;

import { useParsed } from "@pankod/refine-core";

const { params } = useParsed();
const groupId = params.groupId;
const subGroupId = params.subGroupId;

Example with useTable and useForm When using hooks like useTable and useForm, you need to specify the resource property to ensure they are aware of the nested resource path. Here is an example:

import { useTable, useForm } from "@pankod/refine-antd";

const { tableProps } = useTable({
    resource: `groups/${groupId}/sub-group`,
});

const { formProps } = useForm({
    resource: `groups/${groupId}/sub-group`,
});

import { useTable, useForm } from "@pankod/refine-antd";

const { tableProps } = useTable({
    resource: `groups/${groupId}/sub-group`,
});

const { formProps } = useForm({
    resource: `groups/${groupId}/sub-group`,
});

Breadcrumbs To handle breadcrumbs for nested resources, you can define them in your resource definitions. Here is an example:

import { useBreadcrumb } from "@pankod/refine-core";

const breadcrumbs = useBreadcrumb({
    resource: "sub-group",
    action: "list",
});

console.log(breadcrumbs);

import { useBreadcrumb } from "@pankod/refine-core";

const breadcrumbs = useBreadcrumb({
    resource: "sub-group",
    action: "list",
});

console.log(breadcrumbs);

Additional Resources For more detailed information, you can refer to the following documentation links: - Defining Nested Routes with Multiple Parameters (https://refine.dev/docs/guides-concepts/multi-tenancy/#configuring-multi-tenant-routes) - Using meta to Provide Route Parameters (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/show-button/#meta) - Using useParsed Hook (https://refine.dev/docs/routing/hooks/use-parsed/#params) By following these steps, you should be able to handle nested resources effectively in your refine application. If you encounter any specific issues, feel free to open a new issue or refer to the refine documentation for further guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

@kapa.ai In the list of group, i have to put a button in a cell to redirect on the list page sub group with the id of the group

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add a button in the list of groups that redirects to the list page of sub-groups with the ID of the group, you can use the useNavigation hook from refine to handle the redirection. Here is how you can achieve this: 1. Import Necessary Components and Hooks: Make sure to import the necessary components and hooks from refine and your UI library. 2. Define the Columns with the Redirect Button: Add a column to your table that includes a button for redirection. Use the useNavigation hook to handle the redirection logic. Here is an example of how you can implement this:

import React from "react";
import { useTable, useNavigation } from "@pankod/refine-core";
import { Table, Button } from "@pankod/refine-antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default GroupList;

import React from "react";
import { useTable, useNavigation } from "@pankod/refine-core";
import { Table, Button } from "@pankod/refine-antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default GroupList;

Explanation: 1. Import Statements: - useTable is used to fetch and manage the table data. - useNavigation is used to handle navigation within the app. - Table and Button are UI components from Ant Design. 2. Table Configuration: - tableProps is obtained from useTable to manage the table's data and state. - columns array defines the structure of the table, including the new "Actions" column with a button. 3. Button for Redirection: - The render function in the "Actions" column creates a button for each row. - The onClick handler of the button uses the push function from useNavigation to redirect to the sub-group list page, passing the group ID in the URL. By following this approach, you can add a button in the list of groups that redirects to the sub-group list page with the appropriate group ID. For more details, you can refer to the refine documentation: - useTable Hook (https://refine.dev/docs/core/hooks/useTable/) - useNavigation Hook (https://refine.dev/docs/core/hooks/useNavigation/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

@kapa.ai But why useParsed params are always undefined

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the useParsed hook's parameters are always returning undefined, it could be due to a few reasons related to how the URL is structured and how the hook is being used. Here are some steps to troubleshoot and ensure that useParsed works correctly: Ensure Correct URL Structure Make sure that the URL structure matches the expected pattern defined in your resource configuration. For example, if you have a nested resource like /groups/:groupId/sub-group, ensure that the URL you are navigating to follows this pattern. Correct Usage of useParsed Ensure that you are using the useParsed hook correctly in your component. Here is an example of how to use it:

import { useParsed } from "@refinedev/core";

const MyComponent = () => {
    const { params } = useParsed();

    console.log(params); // This should log the parsed parameters from the URL

    return (
        <div>
            <p>Group ID: {params.groupId}</p>
            <p>Sub-Group ID: {params.subGroupId}</p>
        </div>
    );
};

import { useParsed } from "@refinedev/core";

const MyComponent = () => {
    const { params } = useParsed();

    console.log(params); // This should log the parsed parameters from the URL

    return (
        <div>
            <p>Group ID: {params.groupId}</p>
            <p>Sub-Group ID: {params.subGroupId}</p>
        </div>
    );
};

Example with Button Redirection Here is an example of how to use useParsed in conjunction with a button that redirects to a nested resource:

import React from "react";
import { useTable, useNavigation, useParsed } from "@refinedev/core";
import { Table, Button } from "@refinedev/antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();
    const { params } = useParsed();
const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

const SubGroupList = () => {
    const { params } = useParsed();

    console.log(params); // Ensure this logs the correct parameters

    return (
        <div>
            <h1>Sub-Groups for Group ID: {params.groupId}</h1>
            {/* Render sub-group list here */}
        </div>
    );
};

export default GroupList;

import React from "react";
import { useTable, useNavigation, useParsed } from "@refinedev/core";
import { Table, Button } from "@refinedev/antd";

const GroupList = () => {
    const { tableProps } = useTable({
        resource: "groups",
    });

    const { push } = useNavigation();
    const { params } = useParsed();
const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <Button
                    type="primary"
                    onClick={() => push(`/groups/${record.id}/sub-group`)}
                >
                    View Sub-Groups
                </Button>
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

const SubGroupList = () => {
    const { params } = useParsed();

    console.log(params); // Ensure this logs the correct parameters

    return (
        <div>
            <h1>Sub-Groups for Group ID: {params.groupId}</h1>
            {/* Render sub-group list here */}
        </div>
    );
};

export default GroupList;

Verify URL Parameters Ensure that the URL you are navigating to includes the necessary parameters. For example, navigating to /groups/1/sub-group should correctly parse groupId as 1. Additional Resources For more detailed information, you can refer to the following documentation links: - useParsed Hook Documentation (https://refine.dev/docs/routing/hooks/use-parsed/) - Defining Nested Routes with Multiple Parameters (https://refine.dev/docs/guides-concepts/multi-tenancy/#configuring-multi-tenant-routes) By following these steps, you should be able to troubleshoot and resolve the issue of useParsed parameters returning undefined. If the problem persists, ensure that your route definitions and URL structures are correctly aligned. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

@kapa.ai Now i want to add an EditButton to edit a subgroup : { name: "sub-group", list: "/groups/:id/sub-group", create: "/groups/:id/sub-group/create", edit: "/groups/:id/sub-group/edit/:id", show: "/groups/:id/sub-group/show/:id", meta: { parent: "groups", },

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add an EditButton to edit a subgroup, you can follow these steps. The EditButton component from refine can be used to handle the redirection to the edit page of a subgroup. Here is how you can do it: Step-by-Step Guide 1. Import Necessary Components: Make sure to import the EditButton component from refine and any other necessary components. 2. Add the EditButton to the SubGroup List: Define a column in your table that includes the EditButton for each subgroup. Example Code Here is an example of how you can implement this:

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

Explanation 1. Import Statements: - useTable is used to fetch and manage the table data. - EditButton is used to create a button that redirects to the edit page of the subgroup. - Table is a UI component from Ant Design. 2. Table Configuration: - tableProps is obtained from useTable to manage the table's data and state. - columns array defines the structure of the table, including the new "Actions" column with the EditButton. 3. EditButton for Redirection: - The render function in the "Actions" column creates an EditButton for each row. - The recordItemId prop of the EditButton is set to the id of the subgroup, which ensures that the button redirects to the correct edit page. Additional Resources For more detailed information, you can refer to the following documentation links: - EditButton Component Documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/edit-button/) - useTable Hook Documentation (https://refine.dev/docs/core/hooks/useTable/) By following this approach, you can add an EditButton to the list of subgroups, allowing users to easily navigate to the edit page for each subgroup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add an EditButton to edit a subgroup in your nested resource setup, you can follow these steps. The EditButton component from refine can be used to handle the redirection to the edit page of a subgroup. Here is how you can do it: Step-by-Step Guide 1. Import Necessary Components: Make sure to import the EditButton component from refine and any other necessary components. 2. Add the EditButton to the SubGroup List: Define a column in your table that includes the EditButton for each subgroup. Example Code Here is an example of how you can implement this:

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

import React from "react";
import { useTable, EditButton } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    recordItemId={record.id}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

@kapa.ai it's not working because the url for edition use 2 params : /groups/:id/sub-group/edit/:id

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To handle the nested resource with multiple parameters in the URL, you need to ensure that the EditButton correctly constructs the URL with both parameters. In your case, the URL for editing a subgroup is /groups/:groupId/sub-group/edit/:subGroupId. Step-by-Step Guide 1. Import Necessary Components: Make sure to import the EditButton component from refine and any other necessary components. 2. Add the EditButton to the SubGroup List: Define a column in your table that includes the EditButton for each subgroup. You need to ensure that both groupId and subGroupId are passed correctly. Example Code Here is an example of how you can implement this:

import React from "react";
import { useTable, EditButton, useParsed } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const { params } = useParsed();
    const groupId = params.id; // Assuming 'id' is the groupId in the URL
const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    resource="sub-group"
                    recordItemId={record.id}
                    hideText
                    // Construct the correct URL for editing
                    onClick={() => {
                        const editUrl = `/groups/${groupId}/sub-group/edit/${record.id}`;
                        window.location.href = editUrl;
                    }}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

import React from "react";
import { useTable, EditButton, useParsed } from "@refinedev/core";
import { Table } from "@refinedev/antd";

const SubGroupList = () => {
    const { tableProps } = useTable({
        resource: "sub-group",
    });

    const { params } = useParsed();
    const groupId = params.id; // Assuming 'id' is the groupId in the URL
const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Actions",
            key: "actions",
            render: (text, record) => (
                <EditButton
                    size="small"
                    resource="sub-group"
                    recordItemId={record.id}
                    hideText
                    // Construct the correct URL for editing
                    onClick={() => {
                        const editUrl = `/groups/${groupId}/sub-group/edit/${record.id}`;
                        window.location.href = editUrl;
                    }}
                />
            ),
        },
    ];

    return (
        <Table {...tableProps} columns={columns} rowKey="id" />
    );
};

export default SubGroupList;

Explanation 1. Import Statements: - useTable is used to fetch and manage the table data. - EditButton is used to create a button that redirects to the edit page of the subgroup. - useParsed is used to parse the URL and extract parameters. - Table is a UI component from Ant Design. 2. Extract Group ID: - Use the useParsed hook to extract the groupId from the URL. 3. Table Configuration: - tableProps is obtained from useTable to manage the table's data and state. - columns array defines the structure of the table, including the new "Actions" column with the EditButton. 4. EditButton for Redirection: - The render function in the "Actions" column creates an EditButton for each row. - The onClick handler of the EditButton constructs the correct URL for editing the subgroup by including both groupId and subGroupId. Additional Resources For more detailed information, you can refer to the following documentation links: - EditButton Component Documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/edit-button/) - useTable Hook Documentation (https://refine.dev/docs/core/hooks/useTable/) - useParsed Hook Documentation (https://refine.dev/docs/routing/hooks/use-parsed/) By following this approach, you should be able to add an EditButton to the list of subgroups ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

@kapa.ai And imagine i have this route for my ressource : /groups/:id/sub-group I want to show the group name in the breadcrumb instead of just display group

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To display the group name in the breadcrumb instead of just displaying "group", you can use the useBreadcrumb hook along with the useTranslate hook to customize the breadcrumb labels. Here’s how you can achieve this: Step-by-Step Guide 1. Import Necessary Components and Hooks: Make sure to import the necessary components and hooks from refine. 2. Customize the Breadcrumb Labels: Use the useBreadcrumb hook to get the breadcrumb items and customize the labels based on your requirements. Example Code Here is an example of how you can implement this:

import React from "react";
import { useBreadcrumb, useTranslate, useParsed } from "@refinedev/core";
import { Link } from "react-router-dom";

const CustomBreadcrumb = () => {
    const { breadcrumbs } = useBreadcrumb();
    const { params } = useParsed();
    const translate = useTranslate();

    const groupId = params.id; // Assuming 'id' is the groupId in the URL

    // Fetch the group name based on the groupId
    // This is a placeholder function, replace it with your actual data fetching logic
    const getGroupName = (groupId) => {
        // Replace with actual logic to fetch group name
        return "Group Name"; // Example group name
    };

    const groupName = getGroupName(groupId);

    return (
        <div className="breadcrumbs text-sm">
            <ul className="my-2">
                {breadcrumbs?.map((breadcrumb, index) => {
                    let label = breadcrumb.label;

                    // Customize the label for the group
                    if (breadcrumb.resource === "groups" && breadcrumb.action === "list") {
                        label = groupName;
                    }
return (
                        <li key={`breadcrumb-${breadcrumb.label}-${index}`}>
                            <span className="mx-2">{breadcrumb.icon}</span>
                            {breadcrumb.href ? (
                                <Link to={breadcrumb.href}>{label}</Link>
                            ) : (
                                <span>{label}</span>
                            )}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default CustomBreadcrumb;

import React from "react";
import { useBreadcrumb, useTranslate, useParsed } from "@refinedev/core";
import { Link } from "react-router-dom";

const CustomBreadcrumb = () => {
    const { breadcrumbs } = useBreadcrumb();
    const { params } = useParsed();
    const translate = useTranslate();

    const groupId = params.id; // Assuming 'id' is the groupId in the URL

    // Fetch the group name based on the groupId
    // This is a placeholder function, replace it with your actual data fetching logic
    const getGroupName = (groupId) => {
        // Replace with actual logic to fetch group name
        return "Group Name"; // Example group name
    };

    const groupName = getGroupName(groupId);

    return (
        <div className="breadcrumbs text-sm">
            <ul className="my-2">
                {breadcrumbs?.map((breadcrumb, index) => {
                    let label = breadcrumb.label;

                    // Customize the label for the group
                    if (breadcrumb.resource === "groups" && breadcrumb.action === "list") {
                        label = groupName;
                    }
return (
                        <li key={`breadcrumb-${breadcrumb.label}-${index}`}>
                            <span className="mx-2">{breadcrumb.icon}</span>
                            {breadcrumb.href ? (
                                <Link to={breadcrumb.href}>{label}</Link>
                            ) : (
                                <span>{label}</span>
                            )}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default CustomBreadcrumb;

Explanation 1. Import Statements: - useBreadcrumb is used to get the breadcrumb items. - useTranslate is used for translation purposes. - useParsed is used to parse the URL and extract parameters. - Link is used for navigation. 2. Extract Group ID: - Use the useParsed hook to extract the groupId from the URL. 3. Fetch Group Name: - Implement a function to fetch the group name based on the groupId. Replace the placeholder function with your actual data fetching logic. 4. Customize Breadcrumb Labels: - Iterate over the breadcrumb items and customize the label for the group based on the groupId. Additional Resources For more detailed information, you can refer to the following documentation links: - useBreadcrumb Hook Documentation (https://refine.dev/docs/core/hooks/utilities/use-breadcrumb/) - useTranslate Hook Documentation (https://refine.dev/docs/i18n/hooks/use-translate/) - useParsed Hook Documentation (https://refine.dev/docs/routing/hooks/use-parsed/) By following this approach, you can customize the breadcrumb to display the group name instead of just displaying "group". ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

optimistic-goldOP•6mo ago

@kapa.ai Ok, but can we just display the id from the url params in the breadcrumb ?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can display the ID from the URL parameters in the breadcrumb. To achieve this, you can use the useParsed hook to extract the ID from the URL and then customize the breadcrumb labels accordingly. Step-by-Step Guide 1. Import Necessary Components and Hooks: Make sure to import the necessary components and hooks from refine. 2. Customize the Breadcrumb Labels: Use the useBreadcrumb hook to get the breadcrumb items and customize the labels to include the ID from the URL parameters. Example Code Here is an example of how you can implement this:

import React from "react";
import { useBreadcrumb, useParsed } from "@refinedev/core";
import { Link } from "react-router-dom";

const CustomBreadcrumb = () => {
    const { breadcrumbs } = useBreadcrumb();
    const { params } = useParsed();

    const groupId = params.id; // Assuming 'id' is the groupId in the URL

    return (
        <div className="breadcrumbs text-sm">
            <ul className="my-2">
                {breadcrumbs?.map((breadcrumb, index) => {
                    let label = breadcrumb.label;

                    // Customize the label to include the groupId
                    if (breadcrumb.resource === "groups" && breadcrumb.action === "list") {
                        label = `Group ${groupId}`;
                    }
return (
                        <li key={`breadcrumb-${breadcrumb.label}-${index}`}>
                            <span className="mx-2">{breadcrumb.icon}</span>
                            {breadcrumb.href ? (
                                <Link to={breadcrumb.href}>{label}</Link>
                            ) : (
                                <span>{label}</span>
                            )}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default CustomBreadcrumb;

import React from "react";
import { useBreadcrumb, useParsed } from "@refinedev/core";
import { Link } from "react-router-dom";

const CustomBreadcrumb = () => {
    const { breadcrumbs } = useBreadcrumb();
    const { params } = useParsed();

    const groupId = params.id; // Assuming 'id' is the groupId in the URL

    return (
        <div className="breadcrumbs text-sm">
            <ul className="my-2">
                {breadcrumbs?.map((breadcrumb, index) => {
                    let label = breadcrumb.label;

                    // Customize the label to include the groupId
                    if (breadcrumb.resource === "groups" && breadcrumb.action === "list") {
                        label = `Group ${groupId}`;
                    }
return (
                        <li key={`breadcrumb-${breadcrumb.label}-${index}`}>
                            <span className="mx-2">{breadcrumb.icon}</span>
                            {breadcrumb.href ? (
                                <Link to={breadcrumb.href}>{label}</Link>
                            ) : (
                                <span>{label}</span>
                            )}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default CustomBreadcrumb;

Explanation 1. Import Statements: - useBreadcrumb is used to get the breadcrumb items. - useParsed is used to parse the URL and extract parameters. - Link is used for navigation. 2. Extract Group ID: - Use the useParsed hook to extract the groupId from the URL. 3. Customize Breadcrumb Labels: - Iterate over the breadcrumb items and customize the label for the group to include the groupId. Additional Resources For more detailed information, you can refer to the following documentation links: - useBreadcrumb Hook Documentation (https://refine.dev/docs/core/hooks/utilities/use-breadcrumb/) - useParsed Hook Documentation (https://refine.dev/docs/routing/hooks/use-parsed/) By following this approach, you can customize the breadcrumb to display the ID from the URL parameters. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

Nested resources under same resources

Did you find this page helpful?