Javascript 如何使用React路由器使React多步骤表单工作？

我正在学习React+ReactRouter来构建一个多步骤表单。我在这里得到了一个例子：

问题是这个示例没有使用ReactRouter，所以URL在表单期间不会更改。作者提到“您可以将每一步设置为自定义路线”，然而，我还没有弄清楚如何使其工作。如何更新当前渲染过程以使用ReactRouter

render: function() {
    switch (this.state.step) {
        case 1:
    return <AccountFields fieldValues={fieldValues}
                          nextStep={this.nextStep}
                          saveValues={this.saveValues} />
        case 2:
    return <SurveyFields  fieldValues={fieldValues}
                          nextStep={this.nextStep}
                          previousStep={this.previousStep}
                          saveValues={this.saveValues} />
        case 3:
    return <Confirmation  fieldValues={fieldValues}
                          previousStep={this.previousStep}
                          submitRegistration={this.submitRegistration} />
        case 4:
    return <Success fieldValues={fieldValues} />
    }
}

render:function（）{
开关（此.state.step）{
案例1：
返回
案例2：
返回
案例3：
返回
案例4：
返回
}
}

我试过：

  render: function() {
        switch (this.state.step) {
            case 1:
        return <AccountFields fieldValues={fieldValues}
                              nextStep={this.nextStep}
                              saveValues={this.saveValues} />
            case 2:
                       browserHistory.push('/surveyfields')
            case 3:
                      browserHistory.push('/confirmation')
            case 4:
                       browserHistory.push('/success')
        }
    }

render:function（）{
开关（此.state.step）{
案例1：
返回
案例2：
browserHistory.push（“/surveyfields”）
案例3：
browserHistory.push（“/confirmation”）
案例4：
browserHistory.push（“/success”）
}
}

已更新

..
        case 2:
            <Route path="/surveyfields" component={SurveyFields}/>
..

var Welcome = React.createClass({
  render() {
    return (
      <Router history={browserHistory}>
        <Route path='/welcome' component={App}>
          <IndexRoute component={Home} />
          <Route path='/stuff' component={Stuff} />
          <Route path='/features' component={Features} />
          <Route path='/surveyfields' component={SurveyFields} />

        </Route>
      </Router>
    );
  }
});

。。
案例2：
..
var Welcome=React.createClass({
render（）{
返回(
);
}
});

如果您这样发送它们，从

/surveyfields

转换到

/success

根本不会影响

调查

组件的状态

<Route path="/surveyfields" component={Survey}/>
<Route path="/confirmation" component={Survey}/>
<Route path="/success" component={Survey}/>

---

单击按钮将导航到下一页。React路由器为路由组件插入

位置

和

历史

道具。

谢谢。我将

browserHistory.push（'/surveyfields'）

更改为

-虽然这确实加载了React组件surveyfields，但它不会更改我使用React路由器的目标URL。。。为什么路由URL没有更改？更新如上您不应该更改呈现方法内的状态或URL，想象一个无限循环当您更改状态时，您触发一个呈现，而该呈现又会更改状态。。。我会在

this.saveValues

方法中更改URL状态，并仅在路由器中使用路由，将其放在其他位置是未定义的行为。因此

case2:return

我更新了示例，以显示相同的

Survey

实例如何根据其URL呈现不同的内容。以及如何通过简单的点击触发路线更改。您从

/surveyfields

开始，然后让Survey实例为步骤1呈现内容。然后单击一个按钮，该按钮将带您进入

/确认

，这将使调查实例呈现步骤2的内容。您确定您的组件位于

路线

中吗？尝试探索传递给该组件的所有道具。

if(this.props.location.pathname==="/surveyfields")
   return (
     <span>
       survey things
       <Button onClick={() => this.props.history.push("/confirmation")}>next page</Button>
   </span>)
if(this.props.location.pathname==="/confirmation")
   return <span>do you want to do this</span>