以多步形式反应路由器导航

Question

我有一个 React 多步骤表单，带有这样的助焊剂存储：

// MultiForm.js
....
import LoadFile from './components/LoadFile';
import LoadPeople from './components/LoadPeople';
import Confirmation from './components/Confirmation';

class MultiForm extends Component {
.
.
.

    nextPage() {
      // Update page number with a flux action
      MultiStepActions.nextPage();
    }

    previousPage() {
      // Update page number with a flux action
      MultiStepActions.previousPage();
    }

    render() {
       const {pagina} = this.state;
       <div className="container">
         {page === 1 && <LoadFile
           handleChange={this.handleChange}
           file={this.state.file}
           nextPage={this.nextPage}
           data1={this.state.data1}
           data2={this.state.data2}
           data3={this.state.data3}/>
         }
         {page === 2 && <LoadPeople
           listPeople={this.state.listPeople}
           nextPage={this.nextPage}
           previousPage={this.previousPage}
           handleChangePeople={this.handleChangePeople}/>
         }
         {page === 3 && <Confirmation
           listData={this.state.listData}
           nextPage={this.nextPage}
           previousPage={this.previousPage}/>
         }
       </div>
    }
}


// Index.js with react-router
import Menu from './components/Menu';
class Index extends Component {
    class App extends Component {
      render() {
        return (
          <div>
            <Menu />
            {this.props.children}
          </div>
        )
      }
    }

    render((
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route path="/MultiForm" component={MultiForm}>
          </Route>
        </Route>
      </Router>
    ), document.getElementById('app'));
}

是对主要组件（MultiForm）的总结，也是一个基本的react router场景。在组件中我使用flux store来设置和获取多步表单的实际页面数，然后根据实际页面渲染组件。

在组件（LoadFile、LoadPeople、Confirmation）中，我有一个按钮可以导航到下一页和上一页（通过 nextPage 和 previousPage 函数）并且一切正常。

现在我想使用浏览器的后退和上一个按钮实现相同的结果，我想使用 react-router。那么，我必须如何配置反应路由器或我需要做什么才能让浏览器按钮工作等于我的下一个和上一个按钮？

Answer 1

您不能覆盖浏览器的导航按钮。但是，您可以连接 react-router 中定义的页面状态，并且当用户使用导航按钮四处浏览时，您的应用程序状态将保持与浏览器状态同步。

我在这里建议您为您的 MultiForm 路线创建一个参数：

<Route path="/Multiform/:page" component={MultiForm} />

这样您就可以在 this.props.params.page

中获取 page 参数

更好的是，您可以将每个子组件连接为自身的路由：

<Route path="/Multiform/" component={MultiForm}>
  <Route path="1" component={LoadFile} />
  <Route path="2" component={LoadPeople} />
  <Route path="3" component={Confirmation} />
</Route>

class Multiform extends Component {
    //...
    render() {
        return (
            <div className="container">
                { this.props.children }
            </div>
        )
    }
}

以多步形式反应路由器导航

React Router Navigation in multi step form

flux

reactjs

reactjs-flux

react-router