React使用useNavigate触发invalid hook call错误的问题咨询

报错根因 #

• useNavigate 是 React Hook，必须在函数组件的顶层作用域内调用，你当前把const navigate = useNavigate()写在了ProductCard组件定义的外部，不符合Hook的调用规则，因此触发非法Hook调用报错。
• 额外注意：你当前组件入参的{ props,product, ...rest }写法存在冗余，组件的第一个参数本身就是完整的props对象，不需要单独解构出props字段，属于无效写法。

修正后代码 #

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

const ProductCard = ({ product, ...rest }) => {
  // 将useNavigate调用移到组件内部顶层
  const navigate = useNavigate();

  return (
    <Card
      sx={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%'
      }}
      {...rest}
    >
      <CardActionArea onClick={() => navigate(`/app/service/${product.serviceID}`)}>
        <CardContent> ...
        {/* 剩余原有代码保持不变即可 */}
  )
}

补充说明 #

• 路径前添加/表示使用绝对路径跳转，避免相对路径匹配错误的问题，可根据你的实际路由规则调整。
• 跳转后在目标页面组件内调用useParams()即可读取到传递的serviceID值，需要提前在路由配置中对应该路径添加参数占位符，示例配置：{ path: '/app/service/:serviceID', element: <TargetPage /> }

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