我应该在反应中为多步形式使用单独的路线或步骤吗？

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>

    );
}

这可以很好地处理浏览器的后退和前进按钮。