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;
для получения дополнительной информации посетите сайт