错误：无效的钩子调用钩子只能​​在函数组件的主体内部调用

Question

我正在尝试使用 useNavigate 转到另一个页面并在路径中传递 serviceID。任何想法为什么我会收到这个错误？

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

const ProductCard = ({ props,product, ...rest }) => (
    <Card
  
    sx={{
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }}
    {...rest}
  >
    <CardActionArea onClick={event => {navigate('app/service/'+product.serviceID)}}>
    
    <CardContent> ...

Answer 1

基于Rules of Hooks，需要将useNavigate()移动到组件内部：

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

const ProductCard = ({ props,product, ...rest }) => {
const navigate = useNavigate();  // <-- MOVE HERE
return (
    <Card
  
    sx={{
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }}
    {...rest}
  >
    <CardActionArea onClick={event => {navigate('app/service/'+product.serviceID)}}>
    
    <CardContent> ...

Answer 2

错误很明显，钩子必须在组件内部调用，不能在外部调用。

所以ProductCard功能组件必须这样重写：

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

const ProductCard = ({ props,product, ...rest }) => { //<-- curly brackets
   const navigate = useNavigate(); //<-- call useNavigate

   return ( //<-- html inside return
      <Card
  
    sx={{
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    }}
    {...rest}
  >
    <CardActionArea onClick={event => {navigate('app/service/'+product.serviceID)}}>
    
    <CardContent> ...
   );
}