Question

我正在努力建立一个注册＆gt;使用React + Redux的新应用程序的配置文件设置流程。

我为redux表单向导找到了以下示例：

http://redux-form.com/6.7.0/examples/wizard/

这似乎是最接近的示例，但问题是向导中的每个步骤都不会更改URL，因此如果用户单击浏览器的前进/后退btn或刷新其浏览器，它将会中断。 / p>

是否可以使redux表单向导具有永久URL？如果是这样的话，任何关于如何正确接近这个问题的反应指针都会受到赞赏。

向导的网址如下：

/wizard/name
/wizard/profile
/wizard/photo

谢谢！

Answer 1

是否可以使redux表单向导具有永久URL？

它的实现方式取决于每个用例。我没有看到任何问题，为什么它不行。

wizard example告诉您关于您的方法需要知道的一切。

谈到官方示例，您可以通过以下方式解决此问题：

创建一个/wizard/name路由，该路由将呈现相同的WizardForm.js组件;
如果子路径为/name，请渲染WizardFormFirstPage
其他子路径相同。

Answer 2

我最近实现了一个带有客户端路由的redux-form向导。我将在这里分享一些关于后人的细节......

我有一个名为MainContent的组件，它有几个React-Router 4路由。其中一条路线如下：

<Route path={'/profile/:profileSection'} component={Profile} />。

这条路线加载了一个＆＃34;向导＆＃34;用户填写以设置她的个人资料的样式redux-form。

请注意profileSection路由参数。如果当前URL是： https://www.myawesomeapp.com/profile/my-age，Profile组件将从路由器收到profileSection道具，其（字符串）值为'my-age'。这将用于加载表单＆＃34; step＆＃34;询问用户她的年龄。

个人资料是一个有状态的组件。它的render方法返回每个步骤的包装组件。看起来大致如下：

render(){ return ( <div> <Step1 {...this.state} {...this.props} /> <Step2 {...this.state} {...this.props} /> <Step3 {...this.state} {...this.props} /> </div> ) }

profileSection路由器道具传递到每个＆＃34;步骤＆＃34;组件。这些步骤组件是从HOC创建的。 HOC使用以下行为装饰每个组件：

将正则表达式与profileSection道具匹配。
如果匹配，则组件的render方法返回所述步骤的标记。
如果不匹配，则组件的render方法返回null。

希望这将有助于将来的某个人......

如何使用每页永久URL的Redux表单向导

2 个答案: