1

I'm trying to redirect to a page when the user clicks on the "Book now" button at the end of a Stepper instead of displaying "Thank you for your interest". Can this be possible by adding an href="/booking" to a button at the last step? Or there is some other way by adding a function to handle this? Thank you in advance!

Here is the part of the code I'm referring to:

                  <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>
Bojan Mitrovic
  • 105
  • 1
  • 2
  • 10
  • Did you try adding window.location.href='/booking' somewhere in the template? I'd suggest you code the stepper as mentioned in the docs: (codesandbox.io/s/tnpyj?file=/demo.js). Basically you add a watcher function for activeStep and then adding a window.location in that function is super easy as it keeps the track of the steps and if the steps are complete, it redirects you wherever you want – VPaul Apr 06 '20 at 21:00
  • So the function would look for activeStep === steps.length and redirect? Can you provide an example? Thanks – Bojan Mitrovic Apr 06 '20 at 21:06
  • Please refer to the example below in Answers section. – VPaul Apr 07 '20 at 00:30

1 Answers1

1

As mentioned in my comments, I'd give a solution based on the official docs code at: https://codesandbox.io/s/tnpyj?file=/demo.js

You can create a function like the one below to keep track of the activeStep.

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

Now in your template you can call this function instead of manual checking of last step as below:

{isLastStep ? (

This is a dirty solution but doing it correctly as mentioned in the link above can make it look cleaner. I hope it helps.

VPaul
  • 1,005
  • 11
  • 21