javascript - 我想在 Next.js 中的路由更改之前创建一个确认模式

Question

我有这样的代码块

const onRouteChangeStart = React.useCallback(() => {
    if (formState.isDirty) {
      if (window.confirm('Confirmation message')) {
        return true;
      }
      NProgress.done();
      throw "Abort route change by user's confirmation.";
    }
  }, [formState.isDirty]);

  React.useEffect(() => {
    Router.events.on('routeChangeStart', onRouteChangeStart);

    return () => {
      Router.events.off('routeChangeStart', onRouteChangeStart);
    };
  }, [onRouteChangeStart]);

它按我的意愿工作，但我想添加一个自定义确认模式而不是 native 确认。

当我添加时，路线变化并没有停止。这就是我等不及用户响应的原因。

我能做什么？感谢您的回复。

Answer 1

这里有一个很好的示例，它中止当前的路由更改并将其保存到状态，提示自定义模型。如果确认，它会再次推送路由。

https://github.com/vercel/next.js/discussions/32231?sort=new?sort=new#discussioncomment-2033546

import { useRouter } from 'next/router';
import React from 'react';
import Dialog from './Dialog';

export interface UnsavedChangesDialogProps {
  shouldConfirmLeave: boolean;
}

export const UnsavedChangesDialog = ({
  shouldConfirmLeave,
}: UnsavedChangesDialogProps): React.ReactElement<UnsavedChangesDialogProps> => {
  const [shouldShowLeaveConfirmDialog, setShouldShowLeaveConfirmDialog] = React.useState(false);
  const [nextRouterPath, setNextRouterPath] = React.useState<string>();

  const Router = useRouter();

  const onRouteChangeStart = React.useCallback(
    (nextPath: string) => {
      if (!shouldConfirmLeave) {
        return;
      }

      setShouldShowLeaveConfirmDialog(true);
      setNextRouterPath(nextPath);

      throw 'cancelRouteChange';
    },
    [shouldConfirmLeave]
  );

  const onRejectRouteChange = () => {
    setNextRouterPath(null);
    setShouldShowLeaveConfirmDialog(false);
  };

  const onConfirmRouteChange = () => {
    setShouldShowLeaveConfirmDialog(false);
    // simply remove the listener here so that it doesn't get triggered when we push the new route.
    // This assumes that the component will be removed anyway as the route changes
    removeListener();
    Router.push(nextRouterPath);
  };

  const removeListener = () => {
    Router.events.off('routeChangeStart', onRouteChangeStart);
  };

  React.useEffect(() => {
    Router.events.on('routeChangeStart', onRouteChangeStart);

    return removeListener;
  }, [onRouteChangeStart]);

  return (
    <Dialog
      title="You have unsaved changes"
      description="Leaving this page will discard unsaved changes. Are you sure?"
      confirmLabel="Discard changes"
      cancelLabel="Go back"
      isOpen={shouldShowLeaveConfirmDialog}
      onConfirm={onConfirmRouteChange}
      onReject={onRejectRouteChange}
    />
  );
};