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

【问题标题】：How to use Redux Form Wizard with permanent URLS per page如何使用每页永久 URL 的 Redux 表单向导
【发布时间】：2017-05-27 17:25:35
【问题描述】：

我正在为使用 React + Redux 的新应用程序构建注册 > 配置文件设置流程。

我找到了一个 redux 表单向导的以下示例：

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

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

是否可以让 Redux 表单向导具有永久 URL？作为初学者，我该如何处理？

向导的 URL 如下：

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

【问题讨论】：

在 react 中做这件事的正确方法是什么...上述每个 URL 应该是一个单独的组件还是都存在于一个组件中？

标签： reactjs react-redux redux-form

【解决方案1】：

让 Redux 表单向导有永久 URL 可以吗？

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

wizard example 告诉您有关方法的所有信息。

谈到官方的例子，你可以这样处理：

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

【讨论】：

【解决方案2】：

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

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

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

这个路由加载一个“向导”风格的 redux 表单，用户填写该表单来设置她的个人资料。

注意profileSection 路由参数。如果当前 URL 是： https://www.myawesomeapp.com/profile/my-age，Profile 组件将从路由器接收一个profileSection 属性，其（字符串）值为'my-age'。这将用于加载询问用户年龄的“步骤”表单。

配置文件是一个有状态的组件。它的 render 方法返回每个步骤的包装组件。大致是这样的：

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

profileSection 路由器属性被传递到每个“步骤”组件中。这些步骤组件是从 HOC 创建的。 HOC 用以下行为装饰每个组件：

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

希望这对将来的某人有所帮助...

【讨论】：