複数ステップフォームでブラウザの戻るボタンを処理する

Question

ユーザーが3部フォームの次のステップに進むと、状態が変わるだけでURLは変わりません。問題は、ブラウザボタンを使用してフォームを修正して戻すことができないことです。

onBackButtonEvent = (e) => { 
    console.log('handling back button press', e) 
    if (typeof e !== 'undefined') { 
     e.preventDefault() 
     console.log(e); 
    } 
    } 

    componentDidMount =() => { 
    window.onpopstate = this.onBackButtonEvent(); 
    } 

Answer 1

コメンターは、上記のように、あなたの最善の策は、個々の構成要素として、フォームのページをレンダリングすること、及びにブラウザナビゲーションの懸念を委譲します。この問題を解決しようとするすべての午後を過ごした後、ここで私が得た最も近いですリアクションルータ。 React Router docsで詳細を読むことができます。以下では、フォームをいくつかのコンポーネントに再組み立てした後で、アプリケーションに追加できる基本的なものをいくつか示しました。

// index.js (or file where you add your App to dom) 
import { BrowserRouter } from 'react-router-dom'; 

ReactDOM.render(
    <BrowserRouter> 
    <App /> 
    </BrowserRouter>, 
    document.getElementById('root') 
); 


// App.js 
import { Route } from 'react-router-dom' 

// render 
<Route exact path="/form/page1" render={(props) => (
    <FormPage1 
    {...props} 
    necessaryProp={this.state.necessaryProp} 
    handleSubmit={this.props.handleSubmit} /> 
)} /> 

<Route exact path="/form/page2" render={(props) => (
    <FormPage2 
    {...props} 
    necessaryProp={this.state.necessaryProp} 
    handleSubmit={this.props.handleSubmit} /> 
)} /> 

あなたは

がフォームを送信するか、ページを変更し、やったページ＃に基づいて、それを処理するために...あなたのページコンポーネントのcomponentDidMountやcomponentWillMountライフサイクルイベントを使用して検証して遊ぶことができ提出する。もう1つの方法は、ページコンポーネントの内部に<Link to="/form/page2" />を使用することです。最後に、ボタンのonClickハンドラに検証を実行させるという方法があります。フォームが有効な場合は、props.history.push('/form/page2')を使用してプログラムでリダイレクトします。実装の詳細はあなた次第です！

キーはReact Routerであり、ブラウザのナビゲーションに関する懸案事項を摘要し、ブラウザ間の影響を処理し、探しているものです。