Airbnb js styleguide и history.push несовместимы

Я пишу приложение React, а именно навигационную панель. У меня там есть логотип и навигаторы. Отображение логотипа и цвета фона навигационной панели условны. В esLint добавлено руководство Aibnb, теперь мой код навигационной панели выглядит так:

class Toolbar extends Component {
    handleClick = () => {
        this.props.history.push('/');
    }

    render() {
        const { color, showLogo } = this.props;
        return (
            <header
                style={{
                    backgroundColor: color,
                }}
                className={classes.Toolbar}
            >
                <Logo click={this.handleClick} show={showLogo} />
                <NavItems />
            </header>
        );
    }
}

Toolbar.propTypes = {
    color: PropTypes.string.isRequired,
    showLogo: PropTypes.string.isRequired,
};

export default withRouter(Toolbar);

и я получаю следующие ошибки eslint:

eslint errors

(строка 11)

this.props.history.push('/');

Как преобразовать этот метод, чтобы код компилировался и работал без ошибок?

(Пытался переписать его как деструктивное назначение реквизита, возникла ошибка, например, не удалось получить 'push' из undefined)

0
0
151
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

ты должен обновить

Toolbar.propTypes = {
color: PropTypes.string.isRequired,
showLogo: PropTypes.string.isRequired,
history:PropTypes.node
};

или

const {history} = this.props

Обновлять

history:PropTypes.shape({push:PropTypes.func})

Установка historyPropType поможет вам избавиться от ошибки:

Toolbar.propTypes = {
  color: PropTypes.string.isRequired,
  showLogo: PropTypes.string.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
};

Другие вопросы по теме