Skip to main content

jsx-a11y/useValidAnchor

enforce all anchors are valid, navigable elements

ESLint Equivalent: anchor-is-valid

Examples

Invalid

<a href='#' onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href='#' onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={'#'} onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={'#'} onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={`#`} onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={`#`} onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href='javascript:void(0)' onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href='javascript:void(0)' onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={'javascript:void(0)'} onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={'javascript:void(0)'} onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={`javascript:void(0)`} onClick={foo} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={`javascript:void(0)`} onClick={foo} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a href attribute for the a element.

    <a />
    ^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={undefined} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a href attribute for the a element.

    <a href={undefined} />
    ^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={null} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a href attribute for the a element.

    <a href={null} />
    ^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href='#' />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a valid href attribute for the a element.

    <a href='#' />
    ^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href='#' />
    ^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={'#'} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a valid href attribute for the a element.

    <a href={'#'} />
    ^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={'#'} />
    ^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={`#`} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a valid href attribute for the a element.

    <a href={`#`} />
    ^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={`#`} />
    ^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href='javascript:void(0)' />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a valid href attribute for the a element.

    <a href='javascript:void(0)' />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href='javascript:void(0)' />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={'javascript:void(0)'} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a valid href attribute for the a element.

    <a href={'javascript:void(0)'} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={'javascript:void(0)'} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.


<a href={`javascript:void(0)`} />

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a valid href attribute for the a element.

    <a href={`javascript:void(0)`} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

 file.jsx:1 lint/jsx-a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Use a button element instead of an a element.

    <a href={`javascript:void(0)`} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Anchor elements should only be used for default section or page
    navigation.

Valid

<a href='https://github.com' />
<a href='#section' />
<a href='foo' />
<a href='/foo/bar' />
<a href={someValidPath} />
<a href='https://github.com' onClick={foo} />
<a href='#section' onClick={foo} />
<a href='foo' onClick={foo} />
<a href='/foo/bar' onClick={foo} />
<a href={someValidPath} onClick={foo} />