[JavaScript知识库]React Route: 使用 Prompt 组件阻止不期望的页面转换

例如，用户编辑了表单，在提交之前，却无意中点击了其他页面链接，前往新的页面后，之前编辑的数据将全部丢失。

为了阻止类似的现象发生，可以使用 react-router-dom 提供的 Prompt 组件。Prompt 会自动监视用户是否离开页面。 如果满足某个条件，它会在允许离开之前显示警告。

此功能类似于 Vue 的 Navigation Guard。

Prompt 带有两个属性，when 和 message，当 when 为true且用户离开当前页面时显示message。

首先：

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

然后，监听 form 表单 onFocus 事件，输出Prompt 组件。

此外，为了防止用户提交表单时同样出现警告，button 要监听 onClick 事件，重设 state。相应的代码不能放在 onSubmitHandler 函数里，时间太晚无法取消Prompt，所以必须另写一个函数。

 <Prompt
        when={isEntering}
        message={(location) =>
          "确定要离开当前页面吗？ 未保存的数据将全部丢失！"
        }
      />

代码举例：

import { useRef, useState, Fragment } from "react";
import { Prompt } from "react-router-dom";

import Card from "../UI/Card";
import LoadingSpinner from "../UI/LoadingSpinner";
import classes from "./QuoteForm.module.css";

const QuoteForm = (props) => {
  const [isEntering, setIsEntering] = useState(false);

  const authorInputRef = useRef();
  const textInputRef = useRef();

  function submitFormHandler(event) {
    event.preventDefault();
    const enteredAuthor = authorInputRef.current.value;
    const enteredText = textInputRef.current.value;
    props.onAddQuote({ author: enteredAuthor, text: enteredText });
  }

  const formFocusedHandler = () => {
    setIsEntering(true);
  };

  const finishEnteringHandler = () => {
    setIsEntering(false);
  };

  return (
    <Fragment>
      <Prompt
        when={isEntering}
        message={(location) =>
          "Are you sure you want to leave? All your entered data will be lost!"
        }
      />
      <Card>
        <form
          onFocus={formFocusedHandler}
          className={classes.form}
          onSubmit={submitFormHandler}
        >
          {props.isLoading && (
            <div className={classes.loading}>
              <LoadingSpinner />
            </div>
          )}

          <div className={classes.control}>
            <label htmlFor="author">Author</label>
            <input type="text" id="author" ref={authorInputRef} />
          </div>
          <div className={classes.control}>
            <label htmlFor="text">Text</label>
            <textarea id="text" rows="5" ref={textInputRef}></textarea>
          </div>
          <div className={classes.actions}>
            <button onClick={finishEnteringHandler} className="btn">
              Add Quote
            </button>
          </div>
        </form>
      </Card>
    </Fragment>
  );
};

export default QuoteForm;