React: Events and Router not working in a specific code segment

Issue

There's a specific segment of JSX code in my React project where both events and router don't work.

PhotoFrame.tsx:

const PhotoFrame = ({ photoId }: PhotoFrameProps) => {
    const photo = useAppSelector((state: RootState) =>
        selectPhotoById(state, photoId)
    );
    const navigate = useNavigate();
    
    const url = photo.urls.regular;
    const author = photo.user.name;
    const authorUsername = photo.user.username; 
    const path = `/user/${authorUsername}`;
    const authorPhotoUrl = photo.user.profile_image.small;

    return (
        <article className="frame-container" >
             {/* <Link to={path}>{author}</Link> */}  ----> THIS IS THE LAST PLACE IN CODE WHERE LINK WORKS
            <div className="frame">
            {/* <Link to={path}>{author}</Link> */} ----> DOESN'T WORK
                <img
                    src={url}
                    alt={`Photography by ${author}`}
                />
                <address className="author">
                    <img src={authorPhotoUrl} alt="Author" />
                    <Link to={path}>{author}</Link>  ----> DOESN'T WORK (THIS IS THE ORIGINAL PLACEMENT OF LINK)
                </address>
            </div>
            {/* <Link to={path}>{author}</Link> */} ----> DOESN'T WORK
        </article>
    );
};

a element is rendered in DOM, but clicking on it does absolutely nothing. There's no change in URL, no errors or any other behavior.

DOM screenshot of a PhotoFrame instance

At first I thought the issue was related to the router/Link element alone. I added an onClick event to the address element and used useNavigate hook from the router inside of the event handler to see if it would work - this is when I discovered that my event also isn't being fired. I tried to change address to different elements, but nothing changed. Event isn't fired even if I put a button instead of address.

PhotoFrame.tsx with event handler:

    const handleAddressClick: MouseEventHandler<HTMLElement> = (e) => {
        e.stopPropagation();
        console.log("CLICK");   ---> NOT LOGGED IN THE CONSOLE
        navigate(path);  
    };

    return (
        <article className="frame-container" >
            <div className="frame">
                <img
                    src={url}
                    alt={`Photography by ${author}`}
                />
                <address className="author" onClick={handleAddressClick}>
                    <img src={authorPhotoUrl} alt="Author" />
                </address>
            </div>
        </article>
    );

Solution

The issue is in the position: absolute set on pseudo-elements. It overlays them over the Link and address elements, making them unreachable/unclickable.

.frame::before, .frame::after {
    content: "";
    position: absolute;
}

In addition, there is a flex container at the bottom of the page which overlays chunks of PhotoFrame instances when scrolling, once again making the Links unreachable in that area.

Two solutions which don't require changing the layout:

1. Add add pointer-events: none; to all of the pseudo-elements and elements which are overlaying the interactive elements (if they don't require any mouse interaction themselves).
2. Add position: relative and z-index to elements which should respond to mouse/pointer events, where the value of z-index is higher than that of an overlay.

Answered By - N.N.