ReactJS アプリで、特定のページから移動するときにユーザーに通知するようにします。具体的には、アクションを実行するようにユーザーに通知するポップアップ メッセージです。
「変更は保存されましたが、まだ公開されていません。今すぐ実行しますか?」
これをグローバルにトリガーする必要がありますかreact-router、それともこれは React ページ/コンポーネント内から実行できるものなのでしょうか?
後者については何も見つけられなかったので、前者は避けたほうがいいと思います。もちろんそれが標準でない限りですが、ユーザーがアクセスできる可能性のある他のすべてのページにコードを追加せずに、そのようなことを実行するにはどうすればよいのか疑問に思います。
ご意見をお待ちしております。よろしくお願いします!
ベストアンサー1
react-routerv4 では、 を使用してナビゲーションをブロックする新しい方法が導入されていますPrompt。ブロックしたいコンポーネントにこれを追加するだけです。
import { Prompt } from 'react-router'
const MyComponent = () => (
<>
<Prompt
when={shouldBlockNavigation}
message='You have unsaved changes, are you sure you want to leave?'
/>
{/* Component JSX */}
</>
)
これにより、ルーティングはすべてブロックされますが、ページの更新や閉じることはブロックされません。これをブロックするには、以下を追加する必要があります (適切な React ライフサイクルで必要に応じて更新します)。
componentDidUpdate = () => {
if (shouldBlockNavigation) {
window.onbeforeunload = () => true
} else {
window.onbeforeunload = undefined
}
}
アンロード前ブラウザによってさまざまなサポートがあります。