Question

如果表单已填充一半，我正在使用React Router Prompt阻止导航到另一条路线。

一切正常，但是Prompt抛出了默认的浏览器确认框。

根据要求，我需要渲染Custom Dilog Box。

谁能建议我如何用自定义dilog框覆盖浏览器默认确认框。

Answer 1

对于遇到此问题的任何人来说，这都是一个很好的指南。 https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39

注意：如果您不是要阻止导航到特定的URL，而是要在有人离开具有RouteLeavingGuard的页面时进行提示。在RouteLeavingGuard内调用useHistory / useLocation，这样您唯一需要的就是when属性

例如：

 const [modalVisible, setModalVisible] = useState(false);

  const [lastLocation, setLastLocation] = useState<Location | null>(null);

  const [confirmedNavigation, setConfirmedNavigation] = useState(false);

  const history = useHistory();

  const { pathname } = useLocation();



  const closeModal = (): void => {

    setModalVisible(false);

  };

  const handleBlockedNavigation = (nextLocation: Location): boolean => {

    if (!confirmedNavigation && pathname) {

      setModalVisible(true);

      setLastLocation(nextLocation);

      return false;

    }

    return true;

  };

  const handleConfirmNavigationClick = (): void => {

    setModalVisible(false);

    setConfirmedNavigation(true);

  };

  useEffect(() => {

    if (confirmedNavigation && lastLocation) {

      // Navigate to the previous blocked location with your navigate function

      history.push(lastLocation.pathname);

    }

  }, [confirmedNavigation, history, lastLocation]);

反应路由器提示覆盖

1 个答案: