props.history не найден при использовании withRouter

Question

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

Я обернул свой компонент с HO C withRouter (), который я думал, будет проходить во всех реквизитах от маршрутизатора.

Когда я нажимаю на каждую опцию выбора, мне говорят, что реквизит не определен, что мне здесь не хватает?

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class Dropdown extends Component {
  handleChange(e) {
    this.props.history.push(`/${e.target.value}`);
  }

  render() {
    return (
      <>
        <select name="" className="Dropdown" onChange={this.handleChange}>
          <option value="top">Top</option>
          <option value="new">New</option>

          <option value="best">Best</option>
        </select>
      </>
    );
  }
}

export default withRouter(Dropdown);

Answer 1

Я думаю, что вы забыли связать свою функцию handleChange, чтобы вы могли связывать функции после состояния, например,

 constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);
  }

, или вы можете делать это

 <select name="" className="Dropdown" onChange={this.handleChange.bind(this)}>

, или вы можете просто сделай так.

handleChange =  async e => {
    this.props.history.push(`/${e.target.value}`);
}

Answer 2

Я думаю, вам нужно явно привязать ваш handleChange метод к this. Попробуйте добавить конструктор к классу Dropdown, например:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);
  }

По крайней мере, так они это делают в документации: https://reactjs.org/docs/handling-events.html