如何使用react-redux構建多步驟表單流程，每步更改URL

Question

我正在努力構建用戶第一次加載的多步表單流程：/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> 
); 
}; 

WELCOM e.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; 

WorkPlacePage.js

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; 

作爲反應，終極版的新手，我可以用你的以下提醒：

1. 上午我這個結構多步驟形式正確嗎？
2. 如果用戶負載/welcome在他們的瀏覽器，什麼是自動將瀏覽器重定向到步驟1 /welcome/workplace
3. 在WorkplacePage.js正確的方式，我得到了以下JS錯誤，當我點擊下一步按鈕： ---爲什麼沒有定義歷史？

謝謝任何​​和所有專家的幫助！

Answer 1

1. 是的確定這個結構看起來沒問題。我想你會想爲每一步創建一個單獨的路由組件，因爲我確信每一步都會隨着更多的規則和驗證而增長。

2. 重定向可以渲染<Redirect to="/somewhere/else"/> - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md

3. 你需要的道具傳遞到<WorkPlacePage />

類似：

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> 
     ); 
     } 

    } 
}