如何使用 react-router 提示用户在 React JS 中以半填形式离开页面

Question

import React from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import { Button } from 'react-bootstrap';
import { Prompt } from 'react-router';

const validationSchema = Yup.object({
  name: Yup.string().required("Product Name is required"),
  quantity: Yup.number().required("Quantity is required"),
  price: Yup.number().required("Price is required"),
  manufacturer:Yup.string().required("Manufacturer details required"),
  description:Yup.string().required("Descriptopn Needed")
});

export default class ProductForm extends React.Component {
    
    render() {
      const errorStyle={"color":"red","fontWeight":"bold"}
    return (
      <Formik
        initialValues={{ name: "", quantity: ""}}
        validationSchema={validationSchema}
        validateOnChange={false}
        validateOnBlur={false}
        onSubmit={(value) => {
          var product = {};
          product.name = value.name;
          product.quantity = value.quantity;
          this.props.onAddProduct(product);
        }}
      >
        <Prompt message='You have unsaved changes, are you sure you want to leave?'/>

        {({ handleSubmit, handleChange, values, errors }) => (
          <form onSubmit={handleSubmit} style={{"margin": "0 auto","width":"30%"}}>
            <h1 style={{"display":"flex","justifyContent":"center"}}>Add Product </h1>
            <div className="form-group">
            <label for="name">Name : </label>
            <input
              type="text"
              onChange={handleChange}
              value={values.name}
              placeholer="Enter Product Name"
              name="name"
              id="name"
              className="form-control"
            />
            <span style={errorStyle}>{errors.name}</span>
            </div>
            <div className="form-group">
            <label for="quantity">Quantity : </label>
            <input
              type="number"
              onChange={handleChange}
              value={values.quantity}
              placeholer="Enter Quantity"
              name="quantity"
              id="quantity"
              className="form-control"
            />
            <span style={errorStyle}>{errors.quantity}</span>
            </div>
            <Button type="submit">Submit</Button>
          </form>
        )}
      </Formik>
    );
  }
}

I want to use REACT ROUTER in this code. I want the prompt to appear when the user tries to leave the page after half-filling the form. I have tried to write a prompt but is confused on what the condition should be.

Also, if the user tries to REFRESH the page, the PROMPT should appear

Answer 1

The boolean condition on when the user navigation needs to be stopped/prompted can be assigned to when prop of PROMPT like this

<Prompt
   when={shouldShowPrompt}
   message="You have unsaved changes, are you sure you want to leave?"
/>

In your case, you can set shouldShowPrompt to true when the values are empty or when the submitted values do not match the values in the input fields like this

<Prompt
   when={
     !values.name ||
     !values.quantity ||
     submittedName !== values.name ||
     submittedQuantity !== values.quantity
   }
   message="You have unsaved changes, are you sure you want to leave?"
/>

Here is a working example for your code - https://codesandbox.io/s/a-simple-react-router-v4tutorial-ml5rs?file=/components/Home.js