react-router-navigation-promptを使ってみた

2019年3月23日

はじめに

react routerで画面遷移する際に、ある条件の場合に「画面遷移していいですか？」みたいな確認メッセージを出力する必要がある場合、react router標準で用意されているPromptを使う事でメッセージを出力する事ができます。

<Prompt
  when={this.state.showDialog}
  message="something message"
/>

PromptだとJavaScriptのalertで出力される標準のダイアログしか表示する事ができず、自作のダイアログなどでメッセージを表示する事ができません。
※react-router 4.3.1時点

標準のダイアログではなく、自作のコンポーネントを表示させたいと探していたら、react-router-navigation-promptというものを見つけたのでメモを残します。

使い方

以下のような感じでDialogを表示させる事ができます。
afterConfirmを指定すると、onConfirmが呼ばれた後の処理を記述できます。
他にもbeforeConfirm、afterCancel、beforeCancelなどが使えます。

<NavigationPrompt
    afterConfirm={this.props.afterConfirm}
    when={this.state.showDialog}>
    {({ onConfirm, onCancel }) => (
        <Dialog
            message="something message"
            open={this.state.open}
            handleConfirm={onConfirm}
            handleCancel={onCancel}
        />
    )}
</NavigationPrompt>