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

Question

我有一个多步骤注册表单。目前，我在注册组件的本地状态中维护一个步骤状态变量，并且对于每个步骤，我都呈现相应的嵌套组件。步骤根据操作结果更改。现在我在浏览器后退按钮上苦苦挣扎，因为我想在点击浏览器后退按钮后退一步，但除了覆盖 window.onpopstate = (e)=>{} 然后更改名为 step 的状态变量？所以我的问题是这里正确的方法是什么。我应该坚持使用分步方法还是应该使用单独的 URL 呈现所有步骤并将导航保留在浏览器按钮的默认行为上？

Answer 1

对于我的项目，我创建了一个带有 step 参数的路由器。

<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>

    );
}

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

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

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

reactjs

forms

react-router-v4

multi-step