React Hook“useNavigate”无法在顶层调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

Question

import { useNavigate} from  'react-router-dom';
import React from 'react'
import CustomButton from '../custom-button/custom-button.component';
import './cart-dropdown.styles.scss';
import CartItem from '../cart-item/cart-item.component';
import {connect} from 'react-redux';
import { selectCartItems } from '../../redux/cart/cart.selectors';
import {createStructuredSelector} from 'reselect';

const CartDropDown = ({cartItems }) => {
  return (
    <div className="cart-dropdown">
      <div className="cart-items">
        {cartItems.length
          ? cartItems.map(cartItem =><CartItem key={cartItem.id} item={cartItem} />)
          : <span className="empty-message">Your cart is empty</span>
        }
        <CustomButton onClick{() => window.history.push('/checkout')}>
          GO TO CHECKOUT
        </CustomButton>
      </div>
    </div>
  )
}

const mapStateToProps = createStructuredSelector({
  cartItems: selectCartItems
})

export default useNavigate(connect(mapStateToProps) (CartDropDown));

Answer 1

useNavigate不是高阶组件，它是一个 React hook，它必须在函数组件或自定义 React hook 中使用。

将其移动到函数体中并修复导航。

const CartDropDown = ({ cartItems }) => {
  const navigate = useNavigate(); // <-- use hook in component

  return (
    <div className="cart-dropdown">
      <div className="cart-items">
        {cartItems.length
          ? cartItems.map(cartItem => (
              <CartItem key={cartItem.id} item={cartItem} />
            ))
          : <span className="empty-message">Your cart is empty</span>
        }
        <CustomButton
          onClick{() => navigate('/checkout')} // <-- call navigate in handler
        >
          GO TO CHECKOUT
        </CustomButton>
      </div>
    </div>
  )
}

const mapStateToProps = createStructuredSelector({
  cartItems: selectCartItems
})

export default connect(mapStateToProps)(CartDropDown);