TypeError: history.push is not a function. In my opi udemy course-CodePudding

Im following tutorial on udemy and facing critical problem, what is stopping me from further coding....

There is no typeo... I have copied sourcecode. Im having problem with selecting payment method... Im 100% sure is about "type=radio" I just cant select it, and by pressing Continue - error above error is occurring..

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>
    )
}

Im not having problem with redirecting(History) im having problem with selecting payment option "type= radio"i triend witch 'type=check' and cant make 'tick' in there, it gives little square text field. Im using old router as it was the only way to get through tutorial... Im using same history method for other steps of my payment and it all works... and because I can't select Payment method then later on i cant do checkout because of missing dictionary going to backend...

CodePudding user response：

You need to import the useHistory hook from react-router-dom: https://v5.reactrouter.com/web/api/Hooks

Example:

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>
  );
}

CodePudding user response：

This is because you are using react router dom old version in old version to page the

history.push("/abc")

in new version of react router dom we use this

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;

for more info vist the site