@remix-run/router: Add support for navigation blocking

examples/navigation-blocking/src/app.tsx

@@ -152,21 +152,6 @@ function ImportantFormWithBlocker() {
     }
   }, [blocker, isBlocked]);
 
-  // Display our confirmation UI
-  const blockerUI: Record<Blocker["state"], React.ReactElement> = {
-    unblocked: <p style={{ color: "green" }}>Blocker is currently unblocked</p>,
-    blocked: (
-      <>
-        <p style={{ color: "red" }}>Blocked the last navigation</p>
-        <button onClick={() => blocker.proceed?.()}>Let me through</button>
-        <button onClick={() => blocker.reset?.()}>Keep me here</button>
-      </>
-    ),
-    proceeding: (
-      <p style={{ color: "orange" }}>Proceeding through blocked navigation</p>
-    ),
-  };
-
   return (
     <>
       <p>
@@ -190,11 +175,33 @@ function ImportantFormWithBlocker() {
         <button type="submit">Save</button>
       </Form>
 
-      {blockerUI[blocker.state]}
+      {blocker ? <ConfirmNavigation blocker={blocker} /> : null}
     </>
   );
 }
 
+function ConfirmNavigation({ blocker }: { blocker: Blocker }) {
+  if (blocker.state === "blocked") {
+    return (
+      <>
+        <p style={{ color: "red" }}>
+          Blocked the last navigation to {blocker.location.pathname}
+        </p>
+        <button onClick={() => blocker.proceed?.()}>Let me through</button>
+        <button onClick={() => blocker.reset?.()}>Keep me here</button>
+      </>
+    );
+  }
+
+  if (blocker.state === "proceeding") {
+    return (
+      <p style={{ color: "orange" }}>Proceeding through blocked navigation</p>
+    );
+  }
+
+  return <p style={{ color: "green" }}>Blocker is currently unblocked</p>;
+}
+
 function ImportantFormWithPrompt() {
   let [value, setValue] = React.useState("");
   let isBlocked = value !== "";

packages/react-router-native/index.tsx

@@ -23,6 +23,8 @@ export type {
   ActionFunction,
   ActionFunctionArgs,
   AwaitProps,
+  unstable_Blocker,
+  unstable_BlockerFunction,
   DataRouteMatch,
   DataRouteObject,
   Fetcher,
@@ -89,6 +91,7 @@ export {
   useActionData,
   useAsyncError,
   useAsyncValue,
+  unstable_useBlocker,
   useHref,
   useInRouterContext,
   useLoaderData,

packages/router/history.ts

@@ -82,6 +82,9 @@ export interface Update {
    */
   location: Location;
 
+  /**
+   * The delta between this location and the former location in the history stack
+   */
   delta: number;
 }
 
@@ -615,8 +618,8 @@ function getUrlBasedHistory(
     if (nextIndex != null) {
       let delta = nextIndex - index;
       action = nextAction;
+      index = nextIndex;
       if (listener) {
-        index = nextIndex;
         listener({ action, location: history.location, delta });
       }
     } else {

packages/router/router.ts

@@ -1112,15 +1112,6 @@ export function createRouter(init: RouterInit): Router {
       return;
     }
 
-    // Short circuit if navigation is blocked
-    if (
-      Array.from(state.blockers).some(([_, blocker]) => {
-        return blocker.state === "blocked";
-      })
-    ) {
-      return;
-    }
-
     // Short circuit if it's only a hash change
     if (isHashChangeOnly(state.location, location)) {
       completeNavigation(location, { matches });
@@ -2127,6 +2118,8 @@ export function createRouter(init: RouterInit): Router {
   function updateBlocker(key: string, newBlocker: Blocker) {
     let blocker = state.blockers.get(key) || IDLE_BLOCKER;
 
+    // Poor mans state machine :)
+    // https://mermaid.live/edit#pako:eNqVkc9OwzAMxl8l8nnjAYrEtDIOHEBIgwvKJTReGy3_lDpIqO27k6awMG0XcrLlnz87nwdonESogKXXBuE79rq75XZO3-yHds0RJVuv70YrPlUrCEe2HfrORS3rubqZfuhtpg5C9wk5tZ4VKcRUq88q9Z8RS0-48cE1iHJkL0ugbHuFLus9L6spZy8nX9MP2CNdomVaposqu3fGayT8T8-jJQwhepo_UtpgBQaDEUom04dZhAN1aJBDlUKJBxE1ceB2Smj0Mln-IBW5AFU2dwUiktt_2Qaq2dBfaKdEup85UV7Yd-dKjlnkabl2Pvr0DTkTreM
     invariant(
       (blocker.state === "unblocked" && newBlocker.state === "blocked") ||
         (blocker.state === "blocked" && newBlocker.state === "blocked") ||
@@ -3673,5 +3666,4 @@ function getTargetMatch(
   let pathMatches = getPathContributingMatches(matches);
   return pathMatches[pathMatches.length - 1];
 }
-
 //#endregion