EditButton isn't navigating to the edit page when clicked
I'm having trouble with the
Here's the relevant code for the
Can anyone help me understand why the
EditButton component in my OrganizationsList component. When I click the edit button in the list, it doesn't navigate to the edit page for the associated row, even though the link appears correct when hovering over the button. The EditButton is being used within a DataGrid column with getActions to create the button for each row.Here's the relevant code for the
OrganizationsList component:import { DataGrid } from "@mui/x-data-grid";
import { EditButton, List, useDataGrid } from "@refinedev/mui";
import { format } from "date-fns";
import { ORGANIZATIONS_QUERY } from "./organizations.query";
export const OrganizationsList = (
) => {
const { dataGridProps } = useDataGrid({
resource: "organizations",
meta: {
gqlQuery: ORGANIZATIONS_QUERY,
variables: {
offset: 0,
limit: 10,
where: {},
order_by: {},
},
},
});
return (
<List title="Organizations List">
<div style={{ height: 600 }}>
<DataGrid
{...dataGridProps}
columns={[
{ field: "name", headerName: "Name", width: 150 },
{
field: "created_at",
headerName: "Created at",
width: 250,
renderCell: (params) =>
format(new Date(params.value), "yyyy-MM-dd HH:mm"),
},
{
field: "edit",
type: "actions",
getActions: (params) => [
<EditButton recordItemId={params.id} hideText />,
],
width: 250,
},
]}
paginationMode="server"
/>
</div>
<EditButton recordItemId={1} hideText />,
</List>
);
};Can anyone help me understand why the
EditButton isn't navigating to the edit page when clicked? Thank you!
