React: <a> cannot appear as a descendant of <a>

If you have the following structure in React:

jsx
import React from 'react';

const Sublink = () => {

    return(
        <a href = '/link'>
            <div>Hello, I'm the main link</div>
            <a href = '/sublink'>I'm a sublink</a>
        </a>
    );

}

return Sublink;

You'll get the following error:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

You can solve it by treating the second link as a normal div and redirecting the user on click.

Example:

jsx
import React from 'react';

const Sublink = () => {

    const redirect = (e) => {

        e.preventDefault();
        window.location.href = '/sublink';

    }

    return(
        <a href = '/link'>
            <div>Hello, I'm the main link</div>
            <div onClick = {redirect}>I'm a sublink</div>
        </a>
    );

}

return Sublink;