fix: preserve state from initialEntries (#9288)

* fix: preserve state from initialEntries * chore: Remove unused/stale DataMemoryRouterProps * chore: add changeset
remix-run · Sep 19, 2022 · 8b00e7a · 8b00e7a
1 parent e20a6f7
commit 8b00e7a
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 15 deletions.
diff --git a/.changeset/heavy-waves-pump.md b/.changeset/heavy-waves-pump.md
@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+fix: preserve state from initialEntries (#9288)
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -74,7 +74,6 @@ export type {
   ActionFunction,
   ActionFunctionArgs,
   AwaitProps,
-  DataMemoryRouterProps,
   DataRouteMatch,
   DataRouteObject,
   Fetcher,

diff --git a/packages/react-router-native/index.tsx b/packages/react-router-native/index.tsx
@@ -23,7 +23,6 @@ export type {
   ActionFunction,
   ActionFunctionArgs,
   AwaitProps,
-  DataMemoryRouterProps,
   DataRouteMatch,
   DataRouteObject,
   Fetcher,

diff --git a/packages/react-router/__tests__/useLocation-test.tsx b/packages/react-router/__tests__/useLocation-test.tsx
@@ -61,4 +61,27 @@ describe("useLocation", () => {
       </div>
     `);
   });
+
+  it("preserves state from initialEntries", () => {
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter
+          initialEntries={[
+            { pathname: "/example", state: { my: "state" }, key: "my-key" },
+          ]}
+        >
+          <Routes>
+            <Route path={"/example"} element={<ShowLocation />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <pre>
+        {"pathname":"/example","search":"","hash":"","state":{"my":"state"},"key":"my-key"}
+      </pre>
+    `);
+  });
 });
diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
@@ -36,7 +36,6 @@ import {
 } from "@remix-run/router";
 
 import type {
-  DataMemoryRouterProps,
   AwaitProps,
   MemoryRouterProps,
   NavigateProps,
@@ -113,7 +112,6 @@ export type {
   ActionFunction,
   ActionFunctionArgs,
   AwaitProps,
-  DataMemoryRouterProps,
   DataRouteMatch,
   DataRouteObject,
   Fetcher,

diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
@@ -109,16 +109,6 @@ export function RouterProvider({
   );
 }
 
-export interface DataMemoryRouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  initialEntries?: InitialEntry[];
-  initialIndex?: number;
-  hydrationData?: HydrationState;
-  fallbackElement?: React.ReactNode;
-  routes?: RouteObject[];
-}
-
 export interface MemoryRouterProps {
   basename?: string;
   children?: React.ReactNode;

diff --git a/packages/router/__tests__/memory-test.ts b/packages/router/__tests__/memory-test.ts
@@ -173,4 +173,32 @@ describe("a memory history with some initial entries", () => {
       key: expect.any(String),
     });
   });
+
+  it("allows initial entries to have state and keys", () => {
+    let history = createMemoryHistory({
+      initialEntries: [
+        { pathname: "/one", state: "1", key: "1" },
+        { pathname: "/two", state: "2", key: "2" },
+      ],
+    });
+
+    expect(history.index).toBe(1);
+    expect(history.location).toMatchObject({
+      pathname: "/two",
+      search: "",
+      hash: "",
+      state: "2",
+      key: "2",
+    });
+
+    history.go(-1);
+    expect(history.index).toBe(0);
+    expect(history.location).toMatchObject({
+      pathname: "/one",
+      search: "",
+      hash: "",
+      state: "1",
+      key: "1",
+    });
+  });
 });
diff --git a/packages/router/history.ts b/packages/router/history.ts
@@ -208,7 +208,11 @@ export function createMemoryHistory(
   let { initialEntries = ["/"], initialIndex, v5Compat = false } = options;
   let entries: Location[]; // Declare so we can access from createMemoryLocation
   entries = initialEntries.map((entry, index) =>
-    createMemoryLocation(entry, null, index === 0 ? "default" : undefined)
+    createMemoryLocation(
+      entry,
+      typeof entry === "string" ? null : entry.state,
+      index === 0 ? "default" : undefined
+    )
   );
   let index = clampIndex(
     initialIndex == null ? entries.length - 1 : initialIndex