Should I user separate routes or steps for multistep form in react?

I have a multi step signup form. Currently I am maintaining a step state variable in my local state of signup component and for every step I render corresponding nested components. Step get changed based on action results. Now I am struggling with browser back button because I want to step back upon click browser back button but i don't have any option here except for overriding the window.onpopstate = (e)=>{} and then changing my state variable called step ? So My question is what is the right approach here. Should i stick with step approach or should I render all steps with separate urls and leave navigation on default behavior of browser buttons ?

For my project, I had create a router with step param.

<Route path="/comp/:step" component={Comp} />

And as per the step value, I had loaded different components.

render() {
    return (
        <div>
            {
                (() => {
                    let { step } = this.props.match.params;

                    switch (step) {
                        case 'step1':
                            return <StepOne></StepOne>;
                        case 'step2':
                            return <StepTwo></StepTwo>;
                        default:
                            return '';
                    }
                })()
            }
        </div>

    );
}

This handles browser back and forward buttons nicely.