react-routerを使用してナビゲーションにカスタムプロンプトを実装する方法

カスタムプロンプトの必要性は何ですか？

ほとんどのreactプロジェクトは、コンポーネントのUIデザインシステムに従います。アプリ全体で同じ設計の一貫性を実現するために、コンポーネントを再利用します。ただし、保存されていないユーザーデータがある場合にナビゲーションをブロックするには、デフォルトのブラウザプロンプトが、ユーザーが別のルートに移動するのをブロックする最も一般的で簡単な方法です。ただし、ポップアップがライブラリコンポーネントと一致しません。

デフォルトのreact-router プロンプトの代わりにカスタムモーダルを使用する方法を明示的に言及している公式ドキュメントはありません。

解決

必要な結果を得るために従うべきいくつかの簡単なステップがあります。各ステップには、100％機能するコードスニペットが含まれています。プロジェクトで使用できます。

ステップ1

デフォルトのブラウザプロンプトを無効にするかブロックする必要があります。これgetUserConfirmationは、BrowserRouterの関数propに空のコールバックを渡すことで実行できます。

ステップ2

今度は、カスタム作成してみましょうRouterPrompt使用して、コンポーネントuseHistoryからのフックreact-router-domとアリ設計のためのコンポーネントライブラリmodalのコンポーネントを。

history.block私たちは離れて、現在のページからのナビゲーションをブロックすることができます。空の関数または空の引数をblockメソッドに渡すと、ナビゲーションが続行され、ブロックまたは中断されません。

useEffect使用してそれを表示するかどうか、プロンプトの初期状態を処理するために使用されるwhen小道具を。

コールバックを確認し、ナビゲーションをキャンセルを制御するために使用されています。handleOKhandleCancel

ステップ3

ページ間を移動するための2つのサンプルコンポーネントを作成しましょう。たとえば、最初のコンポーネントDashboard.jsxを、2番目のコンポーネントをとしますHome.jsx。

homeコンポーネントは、当社のカスタム含まれていRouterPromptコンポーネントを。プロンプトは、ページの変更時およびwhen小道具に基づいてトリガーされます。when小道具は条件付きプロンプトを起動するために使用されます。たとえば、when小道具がに設定されている場合、trueページがナビゲートするたびにプロンプ​​トが表示されます（ホームルートから他のルートへ、または前後にナビゲートします）。

コールバックの小道具は、ルートを進めるためにはブール値を返す必要があります。onOKonCancel

結果

結論

独自のカスタムモーダルまたはデフォルトのブラウザプロンプトであっても、任意のコンポーネントライブラリのモーダルを使用できます。ただし、を実装するときは注意してくださいhistory.block。

上記の手順に従うことで、目的のソリューションを実現できます。コードは100％機能しています。コードスニペットをアプリケーションにコピーして、時間を節約できます。

参考文献

1. https://reactrouter.com/web/api/Hooks/usehistory
2. https://reactrouter.com/web/api/history