[英]React Router Navigation in multi step form
我有一個帶有像這樣的通量存儲的多步驟反應形式:
// 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)的總結和一個基本的反應路由器場景。 在組件中,我使用通量存儲來設置和獲取多步表單的實際頁面數,然后根據實際頁面渲染組件。
在組件(LoadFile、LoadPeople、Confirmation)中,我有一個按鈕可以導航到下一頁和上一頁(通過 nextPage 和 previousPage 函數)並且一切正常。
現在我想使用瀏覽器的后退和上一個按鈕實現相同的結果,我想使用 react-router。 那么,我必須如何配置反應路由器或我需要做什么才能使瀏覽器按鈕工作等於我的下一個和上一個按鈕?
您不能覆蓋瀏覽器的導航按鈕。 但是,您可以連接 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>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.