TypeError: Cannot read properties of undefined (reading 'push') React router DOM

Question

I just learned react, when button is clicked I want to navigate, but it doesn't and gives an error that 'push' is undefined, how to solve it?

import { Route, useHistory as history } from 'react-router-dom'

export default class TotalPrice extends Component {
  checkout = (sum) => {
    const order = {
      total_bayar: sum,
      menus: this.props.carts
    }

    axios.post(API_URL + "orders", order).then((res) => {
      this.props.history.push('/order-success')
    })
  } 
  render() {
    const sum = this.props.carts.reduce(function (result, item) {
      return result + item.total_price;
    }, 0);

    return (
      <Row className='fixed-bottom'>
        <Col md={{span: 3, offset: 9}} className='py-4 px-4 total'>
          <h4>
            Total : <strong className='total-number'>Rp. {priceSplitter(sum)}</strong>
          </h4>
          <Button
            variant="primary"
            className="button-checkout"
            onClick={() => this.checkout(sum)}
          >
            <FontAwesomeIcon icon={faShoppingCart} />
            Checkout
          </Button>
        </Col>
      </Row>
    )
  }
}

history isn't in your props. See v5.reactrouter.com/web/api/Hooks/usehistory. You also cannot use hooks in class components — Phil
– Phil, Commented Aug 9, 2022 at 2:06

Drew Reese · Accepted Answer · 2022-08-09 04:11:49Z

1

The error is saying that this.props.history is undefined. Since it appears that you are using react-router-dom@5 you can import and use the withRouter Higher Order Component and decorate this TotalPrice component to inject the route props.

import { Route, withRouter } from 'react-router-dom'

class TotalPrice extends Component {
  checkout = (sum) => {
    const order = {
      total_bayar: sum,
      menus: this.props.carts
    };

    axios.post(API_URL + "orders", order)
      .then((res) => {
        this.props.history.push('/order-success');
      });
  }

  render() {
    const sum = this.props.carts.reduce(function (result, item) {
      return result + item.total_price;
    }, 0);

    return (
      <Row className='fixed-bottom'>
        <Col md={{span: 3, offset: 9}} className='py-4 px-4 total'>
          <h4>
            Total : <strong className='total-number'>Rp. {priceSplitter(sum)}</strong>
          </h4>
          <Button
            variant="primary"
            className="button-checkout"
            onClick={() => this.checkout(sum)}
          >
            <FontAwesomeIcon icon={faShoppingCart} />
            Checkout
          </Button>
        </Col>
      </Row>
    );
  }
}

export default withRouter(TotalPrice);

If you are using react-router-dom@6 then you will have to roll your own custom withRouter HOC if you want to continue using React class-based components since RRDv6 doesn't export any withRouter HOC like v5 did, and there are only React hooks available to use in components. You can follow my answer here for brief explanation and code example.

edited Aug 9, 2022 at 4:11

answered Aug 9, 2022 at 3:00

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

leo Over a year ago

Attempted import error: 'withRouter' is not exported from 'react-router-dom'.

Drew Reese Over a year ago

@leo I see. Does my answer here resolve your question/issue?

leo Over a year ago

I've created a new new file for withrouter, but still can't. here is error message Attempted import error: 'withRouter' is not exported from './withRouter'.

Drew Reese Over a year ago

@leo How did you export your withRouter function? Did you import it correctly? I.E. is it a default or named export?

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'push') React router DOM

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related