Avoid nested links

• Playground Link

Description

React will produce a warning message if you nest a link element inside of another link element. This rule will catch this mistake!

YAML

id: no-nested-links
language: tsx
severity: error
rule:
  pattern: <a $$$>$$$A</a>
  has:
    pattern: <a $$$>$$$</a>
    stopBy: end

Example

function Component() {
  return <a href='/destination'>
    <a href='/anotherdestination'>Nested link!</a>
  </a>;
}
function OkayComponent() {
  return <a href='/destination'>
    I am just a link.
  </a>;
}

Contributed by

Tom MacWright