React自定义LinkPicture组件图片不渲染、点击不跳转问题求助

错误点 #

• 组件参数接收错误：React 函数组件的第一个入参是所有属性组成的 props 对象，不能直接按参数名拆分接收。你当前的写法里 link 实际拿到的是整个 props 对象，imgSrc 实际拿到的是 React 预留的第二个参数 ref，所以两个值都不符合预期，直接导致图片路径错误、跳转路径错误。
• img 标签缺少必填的 alt 属性：虽然不是本次故障的直接原因，但不符合前端规范，生产环境会触发控制台警告。
• 跳转路径写法问题：你传入的 link={"intraje/profile"} 是相对路径，若当前页面路由是 /intraje，点击后会跳转到 /intraje/intraje/profile，大概率不符合你的预期，建议改为绝对路径 /intraje/profile。

修正后的代码 #

src/components/LinkPicture.js #

import { Link } from 'react-router-dom';

// 解构props对象获取对应属性
export default function LinkPicture({ link, imgSrc, alt = "跳转图片" }) {
    return(
        <Link to={link}>
            <img src={imgSrc} alt={alt} />
        </Link>
    )
}

src/pages/intraje/Home.js #

import React from 'react'
import LinkPicture from '../../components/LinkPicture';
import logo from "../../assets/logo_SEIO_color_head.png"


const Home = () => {
    return (
        <div className='home'>
            <React.Fragment>
                <h1>Home</h1>
                {/* 路径改为绝对路径，避免相对路径拼接错误 */}
                <LinkPicture link={"/intraje/profile"} imgSrc={logo} alt="站点logo"> </LinkPicture>
            </React.Fragment>
        </div>

    )
}

export default Home;

内容的提问来源于stack exchange，提问作者Arthur