Add support for replace() redirects (#11811)

Co-authored-by: Brendan Allan <brendonovich@outlook.com>

.changeset/five-bottles-press.md

@@ -0,0 +1,7 @@
+---
+"@remix-run/router": minor
+"react-router": minor
+"react-router-dom": minor
+---
+
+Add a new `replace(url, init?)` alternative to `redirect(url, init?)` that performs a `history.replaceState` instead of a `history.pushState` on client-side navigation redirects

contributors.yml

@@ -38,6 +38,7 @@
 - bhbs
 - bilalk711
 - bobziroll
+- Brendonovich
 - BrianT1414
 - brockross
 - brookslybrand

package.json

@@ -111,13 +111,13 @@
       "none": "14.9 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "17.3 kB"
+      "none": "17.4 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
       "none": "17.3 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "23.6 kB"
+      "none": "23.7 kB"
     }
   },
   "pnpm": {

packages/react-router-dom-v5-compat/index.ts

@@ -154,6 +154,7 @@ export {
   parsePath,
   redirect,
   redirectDocument,
+  replace,
   renderMatches,
   resolvePath,
   unstable_HistoryRouter,

packages/react-router-dom/index.tsx

@@ -178,6 +178,7 @@ export {
   parsePath,
   redirect,
   redirectDocument,
+  replace,
   renderMatches,
   resolvePath,
   useActionData,

packages/react-router-native/index.tsx

@@ -97,6 +97,7 @@ export {
   parsePath,
   redirect,
   redirectDocument,
+  replace,
   renderMatches,
   resolvePath,
   useActionData,

packages/react-router/index.ts

@@ -49,6 +49,7 @@ import {
   parsePath,
   redirect,
   redirectDocument,
+  replace,
   resolvePath,
   UNSAFE_warning as warning,
 } from "@remix-run/router";
@@ -206,6 +207,7 @@ export {
   parsePath,
   redirect,
   redirectDocument,
+  replace,
   renderMatches,
   resolvePath,
   useBlocker,

packages/router/__tests__/redirects-test.ts

@@ -1,7 +1,13 @@
-import { IDLE_NAVIGATION } from "../index";
+import {
+  IDLE_NAVIGATION,
+  createBrowserHistory,
+  createMemoryHistory,
+  createRouter,
+} from "../index";
+import { replace } from "../utils";
 import type { TestRouteObject } from "./utils/data-router-setup";
 import { cleanup, setup } from "./utils/data-router-setup";
-import { createFormData } from "./utils/utils";
+import { createFormData, tick } from "./utils/utils";
 
 describe("redirects", () => {
   afterEach(() => cleanup());
@@ -642,6 +648,70 @@ describe("redirects", () => {
     });
   });
 
+  it("supports replace() redirects", async () => {
+    let router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        {
+          path: "/",
+        },
+        {
+          path: "/a",
+        },
+        {
+          path: "/b",
+          loader: () => replace("/c"),
+        },
+        {
+          path: "/c",
+        },
+      ],
+    });
+    router.initialize();
+    await tick();
+
+    // ['/']
+    expect(router.state).toMatchObject({
+      historyAction: "POP",
+      location: {
+        pathname: "/",
+        state: null,
+      },
+    });
+
+    // Push /a: ['/', '/a']
+    await router.navigate("/a");
+    expect(router.state).toMatchObject({
+      historyAction: "PUSH",
+      location: {
+        pathname: "/a",
+        state: null,
+      },
+    });
+
+    // Push /b which calls replace('/c'): ['/', '/c']
+    await router.navigate("/b");
+    expect(router.state).toMatchObject({
+      historyAction: "REPLACE",
+      location: {
+        pathname: "/c",
+        state: {
+          _isRedirect: true,
+        },
+      },
+    });
+
+    // Pop: ['/']
+    await router.navigate(-1);
+    expect(router.state).toMatchObject({
+      historyAction: "POP",
+      location: {
+        pathname: "/",
+        state: null,
+      },
+    });
+  });
+
   describe("redirect status code handling", () => {
     it("should not treat 300 as a redirect", async () => {
       let t = setup({ routes: REDIRECT_ROUTES });

packages/router/index.ts

@@ -48,6 +48,7 @@ export {
   normalizePathname,
   redirect,
   redirectDocument,
+  replace,
   resolvePath,
   resolveTo,
   stripBasename,

packages/router/router.ts

@@ -2683,7 +2683,9 @@ export function createRouter(init: RouterInit): Router {
     pendingNavigationController = null;
 
     let redirectHistoryAction =
-      replace === true ? HistoryAction.Replace : HistoryAction.Push;
+      replace === true || redirect.response.headers.has("X-Remix-Replace")
+        ? HistoryAction.Replace
+        : HistoryAction.Push;
 
     // Use the incoming submission if provided, fallback on the active one in
     // state.navigation

packages/router/utils.ts

@@ -1619,6 +1619,18 @@ export const redirectDocument: RedirectFunction = (url, init) => {
   return response;
 };
 
+/**
+ * A redirect response that will perform a `history.replaceState` instead of a
+ * `history.pushState` for client-side navigation redirects.
+ * Sets the status code and the `Location` header.
+ * Defaults to "302 Found".
+ */
+export const replace: RedirectFunction = (url, init) => {
+  let response = redirect(url, init);
+  response.headers.set("X-Remix-Replace", "true");
+  return response;
+};
+
 export type ErrorResponse = {
   status: number;
   statusText: string;