reflex-dev/reflex · error · ValueError

Link without a child will not display

Error message

Link without a child will not display

What it means

rx.link() with an href but no children renders an empty anchor that displays nothing. Reflex raises ValueError to catch this likely mistake at compile time instead of leaving an invisible dead link in the UI.

Source

Thrown at packages/reflex-components-radix/src/reflex_components_radix/themes/typography/link.py:98

        Returns:
            Component: The link component

        Raises:
            ValueError: in case of missing children
        """
        props.setdefault("_hover", {"color": color("accent", 8)})
        href = props.get("href")

        is_external = props.pop("is_external", None)

        if is_external is not None:
            props["target"] = cond(is_external, "_blank", "")

        if href is not None:
            if not len(children):
                msg = "Link without a child will not display"
                raise ValueError(msg)

            if "as_child" not in props:
                # Extract props for the ReactRouterLink, the rest go to the Link/A element.
                react_router_link_props = {}
                for prop in props.copy():
                    if prop in _KNOWN_REACT_ROUTER_LINK_PROPS:
                        react_router_link_props[prop] = props.pop(prop)

                react_router_link_props["to"] = react_router_link_props.pop(
                    "href", href
                )

                # If user does not use `as_child`, by default we render using react_router_link to avoid page refresh during internal navigation
                return super().create(
                    ReactRouterLink.create(*children, **react_router_link_props),
                    as_child=True,
                    **props,
                )

View on GitHub (pinned to 45b8ed5ab7)

Solutions

  1. Add a child: rx.link('Docs', href='https://example.com')
  2. For dynamic labels: rx.link(State.label, href=State.url)
  3. Use as_child to wrap a component: rx.link(rx.button('Go'), href='...', as_child=True)

Example fix

# before
rx.link(href='https://example.com')
# after
rx.link('Example', href='https://example.com')
Defensive patterns

Strategy: validation

Validate before calling

label = label or 'link'
rx.link(label, href=url)

Prevention

When it happens

Trigger: rx.link(href='https://example.com') with no children; building links in a loop where the label variable is empty/None and the child expression is dropped.

Common situations: Passing the label only in props by mistake; dynamic label Vars that evaluate to empty strings with the child omitted entirely; refactoring that removed the link text.

Related errors


AI-assisted analysis of reflex-dev/reflex@45b8ed5ab7 (2026-08-28). Data as JSON: /api/errors/48926f7f602ad5c9. Report an issue: GitHub.