TypeError: history.push не является функцией. В моем курсе opi udemy

Я следую учебнику на udemy и столкнулся с критической проблемой, что останавливает меня от дальнейшего кодирования....

Не существует типо... Я скопировал исходный код. У меня проблема с выбором способа оплаты... Я на 100% уверен, что дело в "type=radio" Я просто не могу его выбрать, и при нажатии Continue - возникает вышеуказанная ошибка...

TypeError: history.push is not a function
submitHandler



  20 |    const submitHandler = (e) => {
  21 |        e.preventDefault()
  22 |        dispatch(savePaymentMethod(paymentMethod))
> 23 |        history.push('/placeorder')
     | ^  24 |    }
  25 | 
  26 |    return (

function PaymentScreen(history) {

    const cart = useSelector(state => state.cart)
    const { shippingAddress } = cart
    const dispatch = useDispatch()
    const [paymentMethod,setPaymentMethod] = useState('paypal')


    if(!shippingAddress.address ) {
        history.push('shipping')
    }

    const submitHandler = (e) => {
        e.preventDefault()
        dispatch(savePaymentMethod(paymentMethod))
        history.push('/placeorder')
    }


    return (
        <FormContainer>
            <CheckoutSteps step1 step2 step3 />

            <Form onSubmit={submitHandler}>
                <Form.Group>
                    <Form.Label as='legend'>Select Method</Form.Label>
                    <Col>
                        <Form.Check
                            type='radio'
                            label='PayPal or Credit Card'
                            id='PayPal'
                            name='paymentMethod'
                            checked
                            onChange={(e) => setPaymentMethod(e.target.value)}
                        >

                        </Form.Check>
                    </Col>
                </Form.Group>

                <Button type='submit' variant='primary'>
                    Continue
                </Button>
            </Form>
        </FormContainer>
    )
}```

Вам необходимо импортировать хук useHistory из react-router-dom: https://v5.reactrouter.com/web/api/Hooks

Пример:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Это потому, что вы используете react router dom старой версии в старой версии для создания страниц

history.push("/abc")

в новой версии react router dom мы используем это

import React from "react";
import { useNavigate } from "react-router-dom";

const Exp = () => {
 const navigate = useNavigate();

 const ChangePage = () => {
  navigate("/placeorder");
 };
 return <button onClick={ChangePage}>Change</button>;  
 };

export default Exp;

для получения дополнительной информации посетите сайт

Вернуться на верх