How do you handle navigation prompts or confirmations before leaving a route in React Router v5

Question

Can i know How do you handle navigation prompts or confirmations before leaving a route in React Router v5?

Answer 1

Use the <Prompt> component to warn users before leaving a route.

Example:

import { Prompt } from 'react-router-dom';

import { useState } from 'react';

function MyForm() {

  const [isBlocking, setIsBlocking] = useState(false);

  return (

    <>

      <Prompt

        when={isBlocking}

        message="Are you sure you want to leave this page?"

      />

      <input

        onChange={(e) => setIsBlocking(e.target.value.length > 0)}

        placeholder="Type something..."

      />

    </>

  );

}