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

Question

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

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

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

这似乎是最接近的示例，但问题是向导中的每一步都不会更改 URL，因此如果用户单击浏览器的 forward/back btn 或刷新浏览器，它会坏的。

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

向导URL喜欢的东西：

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

Answer 1

Would it be OK to make Redux form wizard have permanent URLs?

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

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

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

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

Answer 2

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

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

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

此路由加载一个 "wizard" 样式的 redux 表单，用户填写该表单以设置她的个人资料。

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

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

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

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

根据 profileSection 属性匹配正则表达式。
如果匹配，组件的呈现方法 returns 所述步骤的标记。
如果不匹配，组件的渲染方法returns null.

希望这对以后的人有所帮助...

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

How to use Redux Form Wizard with permanent URLS per page

reactjs

redux-form

react-redux