What causes "You can only provide one function child to AdminRouter" in marmelab/react-admin?

Keep exactly one function child: merge the logic of both functions into a single render prop

You can only provide one function child to AdminRouter

Error message

You can only provide one function child to AdminRouter

What it means

<AdminRouter> (and <Admin>) accepts at most one render-prop / function child, used to derive the UI from permissions. When more than one child of the children array is a function, the configuration is ambiguous and getSingleChildFunction throws.

Source

Thrown at packages/ra-core/src/core/useConfigureAdminRouterFromChildren.tsx:279

          : 'empty';
};

/**
 * Inspect the children of a CoreAdminRouter to see if one of them is a function.
 * Throws an error if there are more than one function child.
 * Returns the function child if one was provided, or null otherwise.
 */
const getSingleChildFunction = (
    children: AdminChildren
): RenderResourcesFunction | null => {
    const childrenArray = Array.isArray(children) ? children : [children];

    const functionChildren = childrenArray.filter(
        child => typeof child === 'function'
    );

    if (functionChildren.length > 1) {
        throw new Error(
            'You can only provide one function child to AdminRouter'
        );
    }

    if (functionChildren.length === 0) {
        return null;
    }

    return functionChildren[0] as RenderResourcesFunction;
};

/**
 * Inspect the children and return an object with the following keys:
 * - customRoutesWithLayout: an array of the custom routes to render inside the layout
 * - customRoutesWithoutLayout: an array of custom routes to render outside the layout
 * - resources: an array of resources elements
 */
const getRoutesAndResourceFromNodes = (

View on GitHub (pinned to 051f511bb0)

Solutions

Keep exactly one function child: merge the logic of both functions into a single render prop
Wrap additional functions in real components (e.g. () => <CustomRoutes ... /> becomes <CustomRoutes />) or move them inside the single function child
Log/inspect the children array when building it dynamically to ensure only one function remains

Example fix

// before
<AdminRouter>
  {permissions => <Menu permissions={permissions} />}
  {permissions => <Dashboard permissions={permissions} />}
</AdminRouter>

// after
<AdminRouter>
  {permissions => (
    <>
      <Menu permissions={permissions} />
      <Dashboard permissions={permissions} />
    </>
  )}
</AdminRouter>

Defensive patterns

Strategy: validation

Validate before calling

const fns = React.Children.toArray(children).filter(c => typeof c === 'function');
if (fns.length > 1) throw new Error('AdminRouter accepts at most one function child');

Prevention

Use a single render-prop child for permission-based UI
Never spread arrays of render props into <Admin> children
Convert helper functions to components when composing children
Lint JSX for multiple arrow-function children inside Admin/AdminRouter

When it happens

Trigger: Writing `<AdminRouter>{perms => ...}{perms => ...}</AdminRouter>` — two function children; spreading an array of children where several are functions, e.g. `{[renderA, renderB]}`; accidentally passing an inline arrow plus a function variable as siblings.

Common situations: Copy-pasting permission-based render props; composing Admin children programmatically from arrays without filtering functions; JSX confusion between mixing component children and one render prop.

Related errors

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/d723951c6abb7914. Report an issue: GitHub.