DEV Community


Posted on

How to display a confirmation dialog asking whether to discard the changes with react-router-dom v6

Expected result

After the user entered values in a form,
・display a confirmation dialog when attempting to reload a page.
Screenshot 2023-10-29 at 13.34.06.png
・display a confirmation dialog when attempting to transition to another page.
Screenshot 2023-10-29 at 13.34.17.png


react-router-dom v6 removes useBlocker, which is necessary to prevent page exits, and requires another implementation.


Library I used


Actually, I copied and used only the three necessary files in this library.

The reason was that it was an unofficial react-router library and I didn't know if it would continue to be updated in the future.
I thought it would be usable just by porting the above three files, so I didn't use the library as it is this time. Instead, I ported the code and used it.

This is a repository I coded.

Of course, you can also use the library as it is.

How to use

Whether you use a library or create your own, you call ReactRouterPrompt as shown below and wrap the dialog etc.
Pass the change detection flag to when props.

import ReactRouterPrompt from "./ReactRouterPrompt";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";

type Props = {
  when: boolean;

export function UnsavedConfirmDialog({ when }: Props) {
  return (
    <ReactRouterPrompt when={when}>
      {({ isActive, onConfirm, onCancel }) =>
        isActive && (
          <Dialog open={isActive}>
            <DialogTitle>Do you really want to leave?</DialogTitle>
                Your changes will not be saved.
              <Button onClick={onCancel}>cancell</Button>
              <Button onClick={onConfirm} autoFocus>

Enter fullscreen mode Exit fullscreen mode


I used the beforeunload event to display a confirmation dialog when trying to reload a page, but it seems that custom messages or self-made dialogs cannot be displayed.
The default dialog for each browser will be displayed.

Top comments (0)