Реагировать на роутер `this.props.history.push` - история не определена

Question

У меня есть эта функция выхода из системы:

logOut = () => {
    axios
      .delete(`${apiUrl}/logout`)
      .then(response => {
        if (response.status === 204) {
          localStorage.removeItem('key', response.headers.authorization)
          localStorage.removeItem('id', response.data.id)
          // return <Redirect to="/login" />
          this.props.history.push(`/login`)
        }
      })
      .catch(error => {
        console.log(error)
      })
  }

this.props.history.push('/something') работает в любом другом случае.Но здесь говорится, что не может прочитать push из неопределенного.Я попробовал return <Redirect to="/login" />, который тоже не работает.

Что я делаю не так?

Answer 1

Это может произойти по одной из следующих причин:

1 - вам нужно передать ваш компонент withRouter, когда вы используете history.push:

    import { withRouter } from 'react-router-dom

   // ... codes of component in here ...

    export default withRouter(componentName) // at the end of component

2- это относится к axios, и вам нужно определить это через axios с другим именем и использовать его в axios, например:

var that = this;

 // then use that in axios