Должен ли я использовать отдельные маршруты или шаги для многоступенчатой ​​формы в реакции?

Question

У меня есть многоступенчатая форма регистрации. В настоящее время я поддерживаю переменную состояния шага в моем локальном состоянии компонента регистрации, и для каждого шага я отображаю соответствующие вложенные компоненты. Шаг меняется в зависимости от результатов действий. Теперь я борюсь с кнопкой возврата браузера, потому что я хочу отступить после нажатия кнопки возврата браузера, но у меня нет здесь никакой опции, кроме переопределения window.onpopstate = (e)=>{} а затем изменить мою переменную состояния с именем step? Итак, мой вопрос в том, что является правильным подходом здесь. Должен ли я придерживаться пошагового подхода или мне следует отображать все шаги с отдельными URL-адресами и оставить навигацию по умолчанию для кнопок браузера?

Answer 1

Для моего проекта я должен был создать маршрутизатор с параметром шага.

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

А что касается значения step, я загрузил разные компоненты.

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

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

    );
}

Это прекрасно обрабатывает кнопки браузера назад и вперед.