react-router-dom Prompt组件的用法

<Prompt> 组件是 react-router-dom 库中的一个组件，它主要用于阻止用户在未保存更改的情况下离开当前页面或路由。当用户尝试导航到其他地方时，<Prompt> 组件会弹出一个对话框询问用户是否确定要离开当前页面。

<Prompt> 组件的基本用法

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

// 使用 <Prompt> 组件来阻止用户在未保存数据时离开页面
function MyForm() {
  return (
    <div>
      {/* 表单或其他需要保存数据的内容 */}
      
      {/* 当用户尝试离开此页面时，会弹出一个确认对话框 */}
      <Prompt
        when={formIsDirty} // 只有在表单脏（即有未保存的更改）时才启用
        message={(location) => {
          return '你确定要离开吗？你的更改将不会被保存。';
        }}
      />
    </div>
  );
}

属性解释

• when: 一个布尔值或返回布尔值的函数，决定是否应该显示提示。通常，这个属性用来检查表单是否有未保存的数据。
• message: 一个字符串或返回字符串的函数，用来定义弹出的对话框中显示的消息。如果是一个函数，它将接收下一个位置对象作为参数。

注意事项

• 如果 <Prompt> 组件的 when 属性为 false 或者未设置，则不会显示任何对话框。
• 如果用户选择取消导航，那么当前页面不会发生任何变化；如果用户选择继续导航，则会继续进行导航。
• <Prompt> 组件应该放在 <Route> 或者 <Switch> 内部才能正常工作。

示例

下面是一个更具体的例子，展示了如何在一个表单组件中使用 <Prompt> 来保护表单数据。

import React, { useState } from 'react';
import { Prompt } from 'react-router-dom';

function ProtectedForm() {
  const [name, setName] = useState('');
  const [isDirty, setIsDirty] = useState(false);

  // 监听输入改变
  const handleInputChange = (event) => {
    setName(event.target.value);
    setIsDirty(true); // 输入改变后设置为脏状态
  };

  // 用户提交表单时清除脏状态
  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交了表单: ${name}`);
    setIsDirty(false); // 提交后重置为干净状态
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字:
        <input type="text" value={name} onChange={handleInputChange} />
      </label>
      <button type="submit">提交</button>

      {/* 使用 <Prompt> 阻止用户在表单脏时离开页面 */}
      <Prompt
        when={isDirty}
        message={(location) => '你确定要离开吗？你的更改将不会被保存。'}
      />
    </form>
  );
}

export default ProtectedForm;

在这个示例中，只有当表单状态改变时，<Prompt> 才会被激活，防止用户未保存数据就离开页面。