react如何實現路由跳轉前確認

React如何實現路由跳轉前確認

在React應用中，路由跳轉是一個常見的操作。然而，在某些情況下，我們希望在用戶離開當前頁面之前進行一些確認操作，例如保存未提交的表單數據、提示用戶是否確定離開等。為了實現這一功能，React Router提供了一些機制來在路由跳轉前進行確認。本文將詳細介紹如何在React中實現路由跳轉前的確認功能。

1. 使用Prompt組件

React Router提供了一個名為Prompt的組件，它可以在用戶嘗試離開當前頁面時顯示一個確認對話框。Prompt組件接受兩個屬性：

• when: 一個布爾值，用于控制是否啟用提示。
• message: 一個字符串或函數，用于設置提示消息。

1.1 基本用法

首先，我們需要在組件中導入Prompt組件：

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

然后，在組件的render方法中使用Prompt組件：

class MyComponent extends React.Component {
  state = {
    isBlocking: false,
  };

  handleInputChange = (e) => {
    this.setState({
      isBlocking: e.target.value.length > 0,
    });
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange} />
        <Prompt
          when={this.state.isBlocking}
          message="您有未保存的更改，確定要離開嗎？"
        />
      </div>
    );
  }
}

在這個例子中，當用戶在輸入框中輸入內容時，isBlocking狀態會被設置為true，從而啟用Prompt組件。當用戶嘗試離開當前頁面時，瀏覽器會顯示一個確認對話框，提示用戶是否確定離開。

1.2 自定義提示消息

Prompt組件的message屬性可以是一個函數，該函數接收一個location對象作為參數，并返回一個字符串或true。如果返回true，則允許導航；如果返回字符串，則顯示該字符串作為提示消息。

<Prompt
  when={this.state.isBlocking}
  message={(location) => {
    return `您確定要跳轉到 ${location.pathname} 嗎？`;
  }}
/>

1.3 阻止導航

如果你想在某些情況下完全阻止導航，可以在message函數中返回false：

<Prompt
  when={this.state.isBlocking}
  message={() => false}
/>

這樣，當isBlocking為true時，用戶將無法離開當前頁面。

2. 使用useHistory鉤子

在函數組件中，我們可以使用useHistory鉤子來實現類似的功能。useHistory鉤子返回一個history對象，我們可以使用history.block方法來阻止導航。

2.1 基本用法

首先，我們需要導入useHistory鉤子：

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

然后，在函數組件中使用useHistory鉤子：

function MyComponent() {
  const history = useHistory();
  const [isBlocking, setIsBlocking] = useState(false);

  useEffect(() => {
    const unblock = history.block((location) => {
      if (isBlocking) {
        return '您有未保存的更改，確定要離開嗎？';
      }
      return true;
    });

    return () => {
      unblock();
    };
  }, [isBlocking, history]);

  const handleInputChange = (e) => {
    setIsBlocking(e.target.value.length > 0);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
}

在這個例子中，當isBlocking為true時，history.block方法會返回一個提示消息，阻止用戶離開當前頁面。

2.2 自定義提示消息

與Prompt組件類似，history.block方法也可以接受一個函數作為參數，該函數接收一個location對象，并返回一個字符串或true。

useEffect(() => {
  const unblock = history.block((location) => {
    if (isBlocking) {
      return `您確定要跳轉到 ${location.pathname} 嗎？`;
    }
    return true;
  });

  return () => {
    unblock();
  };
}, [isBlocking, history]);

2.3 阻止導航

如果你想在某些情況下完全阻止導航，可以在history.block方法中返回false：

useEffect(() => {
  const unblock = history.block(() => {
    if (isBlocking) {
      return false;
    }
    return true;
  });

  return () => {
    unblock();
  };
}, [isBlocking, history]);

3. 使用useEffect和window.onbeforeunload

除了使用React Router提供的機制外，我們還可以使用useEffect鉤子和window.onbeforeunload事件來實現路由跳轉前的確認功能。這種方法適用于需要在用戶嘗試關閉或刷新頁面時進行確認的場景。

3.1 基本用法

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

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isBlocking) {
        e.preventDefault();
        e.returnValue = '您有未保存的更改，確定要離開嗎？';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isBlocking]);

  const handleInputChange = (e) => {
    setIsBlocking(e.target.value.length > 0);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
}

在這個例子中，當isBlocking為true時，window.onbeforeunload事件會觸發，并顯示一個確認對話框，提示用戶是否確定離開。

3.2 注意事項

• window.onbeforeunload事件只在用戶嘗試關閉或刷新頁面時觸發，無法捕獲通過React Router進行的路由跳轉。
• 在某些瀏覽器中，e.returnValue的值可能不會顯示在確認對話框中，而是顯示瀏覽器默認的提示消息。

4. 綜合示例

下面是一個綜合示例，展示了如何在React應用中結合使用Prompt組件、useHistory鉤子和window.onbeforeunload事件來實現路由跳轉前的確認功能。

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

function MyComponent() {
  const history = useHistory();
  const [isBlocking, setIsBlocking] = useState(false);

  useEffect(() => {
    const unblock = history.block((location) => {
      if (isBlocking) {
        return '您有未保存的更改，確定要離開嗎？';
      }
      return true;
    });

    return () => {
      unblock();
    };
  }, [isBlocking, history]);

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isBlocking) {
        e.preventDefault();
        e.returnValue = '您有未保存的更改，確定要離開嗎？';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isBlocking]);

  const handleInputChange = (e) => {
    setIsBlocking(e.target.value.length > 0);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
      <Prompt
        when={isBlocking}
        message="您有未保存的更改，確定要離開嗎？"
      />
    </div>
  );
}

export default MyComponent;

在這個示例中，我們同時使用了Prompt組件、useHistory鉤子和window.onbeforeunload事件來確保在用戶嘗試離開頁面時進行確認。無論是通過React Router進行路由跳轉，還是通過關閉或刷新頁面，用戶都會收到相應的提示。

5. 總結

在React應用中實現路由跳轉前的確認功能可以通過多種方式實現。Prompt組件是React Router提供的一個簡單而強大的工具，適用于大多數場景。useHistory鉤子提供了更靈活的控制方式，適用于需要在函數組件中動態控制導航的場景。window.onbeforeunload事件則適用于需要在用戶關閉或刷新頁面時進行確認的場景。

通過結合使用這些方法，我們可以為用戶提供更好的體驗，確保他們在離開頁面之前不會丟失未保存的數據或操作。