Html react ：事件和转发器在特定代码段中不起作用

在我的React项目中有一段特定的JSX代码，其中事件和路由都不起作用.

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元素在DOM中呈现，但单击它绝对不会产生任何影响.URL没有变化，没有错误或任何其他行为.

DOM screenshot of a PhotoFrame instance个

起初，我以为问题只与路由/链路元素有关.我向address元素添加了一个onClick事件，并从事件处理程序内部的路由使用useNavigate钩子来查看它是否可以工作--这是我发现我的事件也没有被激发的时候.我试图将address更改为不同的元素，但什么都没有改变.即使我输入button而不是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>
    );