using unstable_usePrompt right?

[Messa1]

Hey there.
I just update a project - and hope that usePrompt is coming back as i have in the latest version.
I follow the git ticket long time - and waited till v.6 has some age.

Also i change my indext.tsx and remove the BrowserRouter cause I saw its not correct to use it now with BrowserRouter as I have before -> remix-run/react-router#8139 (comment)

<BrowserRouter> <----- removed
<App />
</BrowserRouter> <----- removed

in my APP.tsx

import routes from './routes';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

....

const router = createBrowserRouter(routes);

<ThemeProvider theme={theme}>
      <CssBaseline />
      <Toaster position="top-center" />
      <SettingsDrawer />
      {auth.isInitialized ? <RouterProvider router={router} /> : <SplashScreen />}
    </ThemeProvider>

And also change old code ->

My "old" working code

  const PromptIfDirty = () => {
    /* eslint-disable no-unused-vars */
    const formik = useFormikContext();

    if (isLastStep === false || submitStep === false) {
      usePrompt(
        i18next.t('Are you sure you want to leave? You have with unsaved changes.'),
        formik.dirty
      );
    }

    return null;
  };

The new code
import { unstable_usePrompt as usePrompt } from 'react-router-dom';

const PromptIfDirty = () => {

   /* eslint-disable no-unused-vars */
   const formik = useFormikContext();

   if (isLastStep === false || submitStep === false) {
     usePrompt({
       when: formik.dirty,
       message: i18next.t('Are you sure you want to leave? You have unsaved changes.')
     });

   }

   return null;
 };

Now it works kind of - i stop me from navigate away form the form - but it wouldn't show me the message as I have on the old version. (See Screenshot)

So do i miss something? Hope someone can help me - I also saw that example in the git repro https://github.com/remix-run/react-router/blob/main/examples/navigation-blocking/src/app.tsx - So maybe i answer the question by my own do i need to set up a custom message modal for that case?

[Messa1]

Ok - I found a solution that works for me good.
Maybe some has a better Solution.

import { useEffect } from 'react';
import { unstable_useBlocker as useBlocker } from 'react-router-dom';

function Prompt(props) {
  const block = props.when;

  useBlocker(() => {
    if (block) {
      return !window.confirm(props.message);
    }
    return false;
  });

  useEffect(() => {
    const handleBeforeUnload = (event) => {
      if (block) {
        event.preventDefault();
        event.returnValue = '';
      }
    };

    const handleUnload = () => {
      if (block) {
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('unload', handleUnload);

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

  return (
    <div key={block} />
  );
}

export default Prompt;

And than on the form

import Prompt from '../../Prompt';
...
...
...

return (
    <Formik
      initialValues={snapshot}
      onSubmit={handleSubmit}
      validationSchema={step.props.validationSchema}
    >
      {(formik) => (
        <Form>
          <Prompt when={!step.props.onSubmit && formik.dirty} message='Are you sure you want to leave?' />

[tonyxuan2021]

With the above solution, when clicking cancel from the confirmation dialog, all form data clears unexpectedly. Is there a way to persist form data when clicking cancel button?