Merge branch 'release-next' into dev

brophdawg11 · brophdawg11 · commit 499af9a740f5 · 2023-06-30T15:12:36.000-04:00
diff --git a/.changeset/fix-blocker-loop.md b/.changeset/fix-blocker-loop.md
diff --git a/contributors.yml b/contributors.yml
@@ -76,6 +76,7 @@
 - GuptaSiddhant
 - haivuw
 - hernanif1
+- holynewbie
 - hongji00
 - hsbtr
 - hyesungoh
@@ -221,4 +222,3 @@
 - yionr
 - yuleicul
 - zheng-chuang
-- holynewbie
diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
   },
   "filesize": {
     "packages/router/dist/router.umd.min.js": {
-      "none": "46.5 kB"
+      "none": "46.6 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "13.8 kB"
diff --git a/packages/react-router-dom-v5-compat/CHANGELOG.md b/packages/react-router-dom-v5-compat/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `react-router-dom-v5-compat`
 
+## 6.14.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.14.1`
+  - `react-router-dom@6.14.1`
+
 ## 6.14.0
 
 ### Patch Changes
diff --git a/packages/react-router-dom-v5-compat/package.json b/packages/react-router-dom-v5-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.14.0",
+  "version": "6.14.1",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.14.0"
+    "react-router": "6.14.1"
   },
   "peerDependencies": {
     "react": ">=16.8",
diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `react-router-dom`
 
+## 6.14.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.14.1`
+  - `@remix-run/router@1.7.1`
+
 ## 6.14.0
 
 ### Minor Changes
diff --git a/packages/react-router-dom/__tests__/use-blocker-test.tsx b/packages/react-router-dom/__tests__/use-blocker-test.tsx
@@ -158,6 +158,77 @@ describe("navigation blocking with useBlocker", () => {
     act(() => root.unmount());
   });
 
+  it("handles reused blocker in a layout route", async () => {
+    router = createMemoryRouter([
+      {
+        Component() {
+          let blocker = useBlocker(true);
+          return (
+            <div>
+              <Link to="/one">/one</Link>
+              <Link to="/two">/two</Link>
+              <Outlet />
+              <p>{blocker.state}</p>
+              {blocker.state === "blocked" ? (
+                <button onClick={() => blocker.proceed?.()}>Proceed</button>
+              ) : null}
+            </div>
+          );
+        },
+        children: [
+          {
+            path: "/",
+            element: <h1>Home</h1>,
+          },
+          {
+            path: "/one",
+            element: <h1>One</h1>,
+          },
+          {
+            path: "/two",
+            element: <h1>Two</h1>,
+          },
+        ],
+      },
+    ]);
+
+    act(() => {
+      root = ReactDOM.createRoot(node);
+      root.render(<RouterProvider router={router} />);
+    });
+
+    // Start on /
+    expect(node.querySelector("h1")?.textContent).toBe("Home");
+    expect(node.querySelector("p")?.textContent).toBe("unblocked");
+    expect(node.querySelector("button")).toBeNull();
+
+    // Blocked navigation to /one
+    act(() => click(node.querySelector("a[href='/one']")));
+    expect(node.querySelector("h1")?.textContent).toBe("Home");
+    expect(node.querySelector("p")?.textContent).toBe("blocked");
+    expect(node.querySelector("button")?.textContent).toBe("Proceed");
+
+    // Proceed to /one
+    act(() => click(node.querySelector("button")));
+    expect(node.querySelector("h1")?.textContent).toBe("One");
+    expect(node.querySelector("p")?.textContent).toBe("unblocked");
+    expect(node.querySelector("button")).toBeNull();
+
+    // Blocked navigation to /two
+    act(() => click(node.querySelector("a[href='/two']")));
+    expect(node.querySelector("h1")?.textContent).toBe("One");
+    expect(node.querySelector("p")?.textContent).toBe("blocked");
+    expect(node.querySelector("button")?.textContent).toBe("Proceed");
+
+    // Proceed to /two
+    act(() => click(node.querySelector("button")));
+    expect(node.querySelector("h1")?.textContent).toBe("Two");
+    expect(node.querySelector("p")?.textContent).toBe("unblocked");
+    expect(node.querySelector("button")).toBeNull();
+
+    act(() => root.unmount());
+  });
+
   describe("on <Link> navigation", () => {
     describe("blocker returns false", () => {
       beforeEach(() => {
diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom",
-  "version": "6.14.0",
+  "version": "6.14.1",
   "description": "Declarative routing for React web applications",
   "keywords": [
     "react",
@@ -23,8 +23,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.7.0",
-    "react-router": "6.14.0"
+    "@remix-run/router": "1.7.1",
+    "react-router": "6.14.1"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router-native/CHANGELOG.md b/packages/react-router-native/CHANGELOG.md
@@ -1,5 +1,26 @@
 # `react-router-native`
 
+## 6.14.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.14.1`
+
+## 6.14.1-pre.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.14.1-pre.1`
+
+## 6.14.1-pre.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.14.1-pre.0`
+
 ## 6.14.0
 
 ### Patch Changes
diff --git a/packages/react-router-native/package.json b/packages/react-router-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-native",
-  "version": "6.14.0",
+  "version": "6.14.1",
   "description": "Declarative routing for React Native applications",
   "keywords": [
     "react",
@@ -22,7 +22,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@ungap/url-search-params": "^0.1.4",
-    "react-router": "6.14.0"
+    "react-router": "6.14.1"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # `react-router`
 
+## 6.14.1
+
+### Patch Changes
+
+- Fix loop in `unstable_useBlocker` when used with an unstable blocker function ([#10652](https://github.com/remix-run/react-router/pull/10652))
+- Fix issues with reused blockers on subsequent navigations ([#10656](https://github.com/remix-run/react-router/pull/10656))
+- Updated dependencies:
+  - `@remix-run/router@1.7.1`
+
 ## 6.14.0
 
 ### Patch Changes
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
@@ -939,7 +939,6 @@ export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker {
   let state = useDataRouterState(DataRouterStateHook.UseBlocker);
 
   let [blockerKey, setBlockerKey] = React.useState("");
-  let [blocker, setBlocker] = React.useState<Blocker>(IDLE_BLOCKER);
   let blockerFunction = React.useCallback<BlockerFunction>(
     (arg) => {
       if (typeof shouldBlock !== "function") {
@@ -986,15 +985,15 @@ export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker {
   // key of "".  Until then we just have the IDLE_BLOCKER.
   React.useEffect(() => {
     if (blockerKey !== "") {
-      setBlocker(router.getBlocker(blockerKey, blockerFunction));
+      router.getBlocker(blockerKey, blockerFunction);
     }
   }, [router, blockerKey, blockerFunction]);
 
-  // Prefer the blocker from state since DataRouterContext is memoized so this
-  // ensures we update on blocker state updates
+  // Prefer the blocker from `state` not `router.state` since DataRouterContext
+  // is memoized so this ensures we update on blocker state updates
   return blockerKey && state.blockers.has(blockerKey)
     ? state.blockers.get(blockerKey)!
-    : blocker;
+    : IDLE_BLOCKER;
 }
 
 /**
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "6.14.0",
+  "version": "6.14.1",
   "description": "Declarative routing for React",
   "keywords": [
     "react",
@@ -23,7 +23,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.7.0"
+    "@remix-run/router": "1.7.1"
   },
   "devDependencies": {
     "react": "^18.2.0"
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
@@ -1,5 +1,11 @@
 # `@remix-run/router`
 
+## 1.7.1
+
+### Patch Changes
+
+- Fix issues with reused blockers on subsequent navigations ([#10656](https://github.com/remix-run/react-router/pull/10656))
+
 ## 1.7.0
 
 ### Minor Changes
diff --git a/packages/router/package.json b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",
diff --git a/packages/router/router.ts b/packages/router/router.ts
@@ -1026,8 +1026,11 @@ export function createRouter(init: RouterInit): Router {
 
     // On a successful navigation we can assume we got through all blockers
     // so we can start fresh
-    let blockers = new Map();
-    blockerFunctions.clear();
+    let blockers = state.blockers;
+    if (blockers.size > 0) {
+      blockers = new Map(blockers);
+      blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
+    }
 
     // Always respect the user flag.  Otherwise don't reset on mutation
     // submission navigations unless they redirect
