Как добавить href для кнопки в реагирующем материале

Question

Я пытаюсь перенаправить на страницу, когда пользователь нажимает кнопку «Забронировать сейчас» в конце степпера вместо отображения «Спасибо за ваш интерес». Можно ли это сделать, добавив href = "/ booking" к кнопке на последнем шаге? Или есть какой-то другой способ, добавив функцию для обработки этого? Заранее спасибо!

Вот часть кода, на которую я ссылаюсь:

                  <React.Fragment>
                        {activeStep === steps.length ? (
                            <React.Fragment>
                                <Typography variant="h5" gutterBottom>
                                    Thank you for your interest!
                                </Typography>
                            </React.Fragment>
                            ) : (
                            <React.Fragment>
                                {this.getStepContent(activeStep)}
                                <div className={classes.buttons}>
                                    {activeStep !== 0 && (
                                        <Button onClick={this.handleBack} className={classes.button}>
                                            Back
                                        </Button>
                                    )}
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        onClick={this.handleNext}
                                        className={classes.button}
                                    >
                                        {activeStep === steps.length - 1 ? 'Book Now' : 'Next'}
                                    </Button>
                                </div>
                            </React.Fragment>
                            )}
                    </React.Fragment>

Answer 1

Как уже упоминалось в моих комментариях, я бы дал решение на основе официального кода документа по адресу: https://codesandbox.io/s/tnpyj?file= / demo. js

Вы можете создать такую ​​функцию, как нижеприведенная для отслеживания activeStep.

const isLastStep = () => {
  if (activeStep === steps.length) window.location.href = '\booking';
  return false;
};

Теперь в вашем шаблоне вы можете вызывать эту функцию вместо ручной проверки последнего шага, как показано ниже:

{isLastStep ? (

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