Reactjs 如何使用react-redux构建多步骤表单流，每个步骤更改URL

我正在构建一个多步骤表单流，用户首先在其中加载：

/welcome

，然后它将引导用户完成以下操作

step 0: `/welcome` (Should redirect to step 1)
step 1: `/welcome/workplace`
step 2: `/welcome/profile`

以下是我到目前为止的情况：

App.jsx:

import Welcome from '../containers/welcome/Welcome';

const App = ({store}) => {
  return (
    <StoreProvider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <PrivateRoute exact path="/welcome" layout={MainLayout} component={Welcome} />
          <WithMainLayout exact path="/" component={Home} />
          <AuthRoutes path={`/${clientResourceName}`} wrapper={WithMainLayout} />
          <WithMainLayout component={NotFound} />
        </Switch>
      </ConnectedRouter>
    </StoreProvider>
  );
};

从“../containers/Welcome/Welcome”导入欢迎；
常量应用=（{store}）=>{
返回(
);
};

Welcome.js

import React from 'react';
import WorkPlacePage from '../../components/welcome/WorkPlacePage';

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  showStep() {
    const {history} = this.props

    console.log('showStep');
    console.log({history})

    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
    }
  }

  render() {
    var style = {
      width : (this.state.step / 4 * 100) + '%'
    }
    return (
      <main>
        <span className="progress-step">Step {this.state.step}</span>
        <progress className="progress" style={style}></progress>
        {this.showStep()}
      </main>
    )
  }
}

export default Welcome;

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class WorkPlacePage extends React.Component {

  render() {

    console.log('this.props.history')
    console.log(this.props.history)

    return (
      <div>
        <h1>Workplace</h1>
        <span>
        survey things
        <button onClick={() => this.props.history.push("/confirmation")}>next page</button>
        </span>
      </div>
    );
  }
}

export default WorkPlacePage;

从“React”导入React；
从“../../components/welcome/WorkPlacePage”导入WorkPlacePage；
类欢迎扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
步骤：1
};
}
showStep（）{
const{history}=this.props
console.log（'showStep'）；
console.log（{history}）
开关（此.state.step）{
案例1：
返回
违约：
返回(
案例：默认
);
}
}
render（）{
变量样式={
宽度：（this.state.step/4*100）+'%
}
返回(
步骤{this.state.Step}
{this.showStep（）}
)
}
}
出口默认值欢迎；

workacepage.js

import React from 'react';
import WorkPlacePage from '../../components/welcome/WorkPlacePage';

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  showStep() {
    const {history} = this.props

    console.log('showStep');
    console.log({history})

    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
    }
  }

  render() {
    var style = {
      width : (this.state.step / 4 * 100) + '%'
    }
    return (
      <main>
        <span className="progress-step">Step {this.state.step}</span>
        <progress className="progress" style={style}></progress>
        {this.showStep()}
      </main>
    )
  }
}

export default Welcome;

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class WorkPlacePage extends React.Component {

  render() {

    console.log('this.props.history')
    console.log(this.props.history)

    return (
      <div>
        <h1>Workplace</h1>
        <span>
        survey things
        <button onClick={() => this.props.history.push("/confirmation")}>next page</button>
        </span>
      </div>
    );
  }
}

export default WorkPlacePage;

从“React”导入React；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
类workacepage扩展了React.Component{
render（）{
console.log（'this.props.history'）
console.log（this.props.history）
返回(
工作场所
调查事物
this.props.history.push（“/confirmation”）}>下一页
);
}
}
导出默认工作概念；

作为一个反应，redux新手，我可以在以下方面使用您的建议：

我是否正确构建了此多步骤表单

如果用户在其浏览器中加载了

/welcome

，那么如何将浏览器自动重定向到步骤1

/welcome/workplace

在workacepage.js上，单击“下一步”按钮时出现以下js错误：

=未捕获类型错误：无法读取未定义的属性“push”

——为什么未定义历史记录

感谢所有专家的帮助

是的，这个结构看起来不错。我认为您应该为每个步骤创建一个单独的路由组件，因为我确信每个步骤都会随着更多的规则和验证而增长

要重定向，您可以渲染

-

---

您需要将道具传递到

比如：

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  render() {
    const {history} = this.props
    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      case 2:
        return (
          <div>
            <h1>WIP</h1>
          </div>
        );
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
        }

  }
}

类欢迎扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
步骤：1
};
}
render（）{
const{history}=this.props
开关（此.state.step）{
案例1：
返回
案例2：
返回(
在制品
);
违约：
返回(
案例：默认
);
}
}
}

您需要将道具传递到

@BlairAnderson中，谢谢您的回复。对前两个问题有什么想法吗。是/确保这看起来很好-您正在制作一个状态机，并且必须处理结构。2。若要重定向，您可以渲染

-@BlairAnderson如何将道具传递到WorkPlacePage？谢谢。。。这个应该住在哪里

{history}=this.props

@AnApprentice在Welcome组件中，您在其中呈现

工作概念

谢谢，但它仍然被破坏。在workacepage.js中，当I console.log

this.props.history

时，在render func中，它仍然是未定义的。另外，如果I console.log

console.log（{history}）

在Welcome.js中，我将对象历史记录为未定义的，您可以记录

console.log（this.props）

和

console.log（this.context）

？