What causes "Use of incorrect `href` for the 'a' element." in oxc-project/oxc?

If the element performs an action, replace it with ` `.

Use of incorrect `href` for the 'a' element.

Error message

Use of incorrect `href` for the 'a' element.

What it means

This is the oxlint `jsx-a11y/anchor-is-valid` diagnostic for anchors whose `href` is present but worthless as a navigation target. Values like `href="#"`, `href="javascript:void(0)"`, `href="javascript:;"`, or nullish expressions (`href={null}`, `href={undefined}`) make the link a fake: it looks focusable and is announced as a link, but keyboard middle-click, crawlers, and no-JS users get nothing. The rule classifies these as `Invalid` hrefs and suggests a correct `href` (or a `button` when the anchor only runs logic).

Source

Thrown at crates/oxc_linter/src/rules/jsx_a11y/anchor_is_valid.rs:35

    rule::{DefaultRuleConfig, Rule},
    utils::{get_element_type, has_jsx_prop_ignore_case},
};

fn missing_href_attribute<S: AsRef<str>>(span: Span, valid_attrs: &[S]) -> OxcDiagnostic {
    let help = if valid_attrs.len() == 1 {
        format!("Provide the `{}` attribute for the `a` element.", valid_attrs[0].as_ref())
    } else {
        let list =
            valid_attrs.iter().map(|a| format!("`{}`", a.as_ref())).collect::<Vec<_>>().join(", ");
        format!("Provide one of these attributes for the `a` element: {list}")
    };
    OxcDiagnostic::warn("Missing `href` attribute for the `a` element.")
        .with_help(help)
        .with_label(span)
}

fn incorrect_href(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Use of incorrect `href` for the 'a' element.")
        .with_help("Provide a correct `href` for the `a` element.")
        .with_label(span)
}

fn cant_be_anchor(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("The `a` element has `href` and `onClick`.")
        .with_help("Use a `button` element instead of an `a` element.")
        .with_label(span)
}

#[derive(Debug, Default, Clone, Deserialize)]
pub struct AnchorIsValid(Box<AnchorIsValidConfig>);

#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
pub struct AnchorIsValidConfig {
    /// Custom components to treat as anchor elements.
    components: Vec<CompactStr>,

View on GitHub (pinned to e1e7af627c)

Solutions

If the element performs an action, replace it with `<button onClick={handler}>`.
If it navigates, supply a genuine URL: `<a href="/items/42">View item</a>`.
Fix conditional hrefs to always render a valid target: `href={item ? `/items/${item.id}` : "/items"}`.
Never use `javascript:` URLs; they break CSP, screen readers, and open-in-new-tab.

Example fix

// before
<a href="#" onClick={save}>Save</a>
<a href="javascript:void(0)" onClick={save}>Save</a>

// after
<button onClick={save}>Save</button>
// or when it is genuinely a link:
<a href="/drafts" onClick={save}>Save</a>

Defensive patterns

Strategy: validation

Validate before calling

// Never render a fake href: branch on target availability
type MaybeLinkProps = { href?: string; onClick: () => void; children: React.ReactNode };
export function MaybeLink({ href, onClick, children }: MaybeLinkProps) {
  return href ? <a href={href} onClick={onClick}>{children}</a> : <button onClick={onClick}>{children}</button>;
}

Prevention

Ban `javascript:` and bare `#` hrefs in review; they also break CSP and middle-click.
Fix conditional hrefs to always fall back to a real route rather than undefined.
Prefer buttons for pure handlers so the semantic element matches the behavior.
Run anchor-is-valid in CI to catch regressions during refactors.

When it happens

Trigger: A JSX element resolves to `a` with an `href` attribute whose value is a `javascript:` URL, a bare `#`, or an expression evaluating to nullish — the rule's own documented invalid examples include `<a href={null}>`, `<a href>`, and `<a href="javascript:void(0)">`.

Common situations: Legacy click-handler patterns from pre-hook React tutorials; SPA code suppressing default navigation with `href="#"`; conditionally computed hrefs that fall back to `undefined`.

Related errors

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/e8b2fac2d3cc817a. Report an issue: GitHub.