As of today, React Router v6 doesn't ship with support for preventing transitions. Once this issue is resolved, we'll update this post with the recommended way to prevent transitions in your app.
For now, here's a very hacky not "approved" approach that "works".
import * as React from "react";import { UNSAFE_NavigationContext as NavigationContext } from "react-router-dom";export function useBlocker(blocker, when = true) {const { navigator } = React.useContext(NavigationContext);React.useEffect(() => {if (!when) return;const unblock = navigator.block((tx) => {const autoUnblockingTx = {...tx,retry() {unblock();tx.retry();},};blocker(autoUnblockingTx);});return unblock;}, [navigator, blocker, when]);}export default function usePrompt(message, when = true) {const blocker = React.useCallback((tx) => {if (window.confirm(message)) tx.retry();},[message]);useBlocker(blocker, when);}
Now you can usePrompt
in your app. usePrompt
receives two arguments ā when
and message
. when
is a boolean that if true
, will show the user a prompt with the message
when they try to navigate away.
function Form() {const [name, setName] = React.useState("");const [email, setEmail] = React.useState("");const [note, setNote] = React.useState("");const isDirty = () => {return name.length > 0 || email.length > 0 || note.length > 0;};usePrompt("Are you sure you want to leave?", isDirty());return (<formonSubmit={(e) => {e.preventDefault();alert("Submitted!");setName("");setEmail("");setNote("");}}>...</form>);}
Here's a Codesandbox with the above implementation.
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 97,444 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 97,444 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter Iām waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.