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

Posted 2023-02-22

【中文标题】以多步形式反应路由器导航

【英文标题】：React Router Navigation in multi step form

【发布时间】：2016-08-18 21:56:34

【问题描述】：

我有一个这样的助焊剂商店反应多步骤形式：

// 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）的总结和一个基本的反应路由器场景。 在组件中我使用flux store来设置和获取多步表单的实际页数，然后根据实际页渲染组件。

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

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

【参考方案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>
        )
    

【讨论】：

感谢@Clark Pan 的回复。我还有两个问题，首先：如何更新浏览器历史记录？我的意思是谁负责打电话给browserHistory.push()，因为我在通量商店中有当前页面。其次，在您回答的第二个示例中，您使用的是this.props.children，但是如何传递我在每个组件中使用的状态道具？

我想通了，而不是使用 this.prosp.children 我使用了` React.cloneElement( this.props.children, ...this.state) ` 然后是子组件和 Next 按钮，我将 browserHistory.push('); 通过 react 路由器导航到我的下一个或上一个组件。