Merge branch 'release-next'

Author: brophdawg11

contributors.yml

@@ -224,3 +224,4 @@
 - yionr
 - yuleicul
 - zheng-chuang
+- istarkov

docs/components/form.md

@@ -215,6 +215,24 @@ See also:
 - [`useActionData`][useactiondata]
 - [`useSubmit`][usesubmit]
 
+## `state`
+
+The `state` property can be used to set a stateful value for the new location which is stored inside [history state][history-state]. This value can subsequently be accessed via `useLocation()`.
+
+```tsx
+<Form
+  method="post"
+  action="new-path"
+  state={{ some: "value" }}
+/>
+```
+
+You can access this state value while on the "new-path" route:
+
+```ts
+let { state } = useLocation();
+```
+
 ## `preventScrollReset`
 
 If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you prevent the scroll position from being reset to the top of the window when the form action redirects to a new location.
@@ -330,3 +348,4 @@ You can access those values from the `request.url`
 [pickingarouter]: ../routers/picking-a-router
 [scrollrestoration]: ./scroll-restoration
 [link-preventscrollreset]: ./link#preventscrollreset
+[history-state]: https://developer.mozilla.org/en-US/docs/Web/API/History/state

docs/hooks/use-submit.md

@@ -150,4 +150,7 @@ submit(null, {
 <Form action="/logout" method="post" />;
 ```
 
+Because submissions are navigations, the options may also contain the other navigation related props from [`<Form>`][form] such as `replace`, `state`, `preventScrollReset`, `relative`, etc.
+
 [pickingarouter]: ../routers/picking-a-router
+[form]: ../components/form.md

package.json

@@ -109,7 +109,7 @@
   },
   "filesize": {
     "packages/router/dist/router.umd.min.js": {
-      "none": "46.6 kB"
+      "none": "47.2 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "13.8 kB"
@@ -118,10 +118,10 @@
       "none": "16.2 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "12.6 kB"
+      "none": "12.8 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "18.6 kB"
+      "none": "18.71 kB"
     }
   }
 }

packages/react-router-dom-v5-compat/CHANGELOG.md

@@ -1,5 +1,13 @@
 # `react-router-dom-v5-compat`
 
+## 6.14.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `[email protected]`
+  - `[email protected]`
+
 ## 6.14.1
 
 ### Patch Changes

packages/react-router-dom-v5-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.14.1",
+  "version": "6.14.2",
   "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.1"
+    "react-router": "6.14.2"
   },
   "peerDependencies": {
     "react": ">=16.8",

packages/react-router-dom/CHANGELOG.md

@@ -1,5 +1,16 @@
 # `react-router-dom`
 
+## 6.14.2
+
+### Patch Changes
+
+- Properly decode element id when emulating hash scrolling via `<ScrollRestoration>` ([#10682](https://github.com/remix-run/react-router/pull/10682))
+- Add missing `<Form state>` prop to populate `history.state` on submission navigations ([#10630](https://github.com/remix-run/react-router/pull/10630))
+- Support proper hydration of `Error` subclasses such as `ReferenceError`/`TypeError` ([#10633](https://github.com/remix-run/react-router/pull/10633))
+- Updated dependencies:
+  - `@remix-run/[email protected]`
+  - `[email protected]`
+
 ## 6.14.1
 
 ### Patch Changes

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -328,6 +328,49 @@ function testDomRouter(
       `);
     });
 
+    it("deserializes Error subclass instances from the window", async () => {
+      window.__staticRouterHydrationData = {
+        loaderData: {},
+        actionData: null,
+        errors: {
+          "0": {
+            message: "error message",
+            __type: "Error",
+            __subType: "ReferenceError",
+          },
+        },
+      };
+      let router = createTestRouter(
+        createRoutesFromElements(
+          <Route path="/" element={<h1>Nope</h1>} errorElement={<Boundary />} />
+        )
+      );
+      let { container } = render(<RouterProvider router={router} />);
+
+      function Boundary() {
+        let error = useRouteError() as Error;
+        return error instanceof Error ? (
+          <>
+            <pre>{error.toString()}</pre>
+            <pre>stack:{error.stack}</pre>
+          </>
+        ) : (
+          <p>No :(</p>
+        );
+      }
+
+      expect(getHtml(container)).toMatchInlineSnapshot(`
+        "<div>
+          <pre>
+            ReferenceError: error message
+          </pre>
+          <pre>
+            stack:
+          </pre>
+        </div>"
+      `);
+    });
+
     it("renders fallbackElement while first data fetch happens", async () => {
       let fooDefer = createDeferred();
       let router = createTestRouter(
@@ -1541,6 +1584,46 @@ function testDomRouter(
       `);
     });
 
+    it("supports <Form state>", async () => {
+      let testWindow = getWindow("/");
+      let router = createTestRouter(
+        [
+          {
+            path: "/",
+            Component() {
+              return (
+                <Form method="post" action="/action" state={{ key: "value" }}>
+                  <button type="submit">Submit</button>
+                </Form>
+              );
+            },
+          },
+          {
+            path: "/action",
+            action: () => null,
+            Component() {
+              let state = useLocation().state;
+              return <p>{JSON.stringify(state)}</p>;
+            },
+          },
+        ],
+        { window: testWindow }
+      );
+      let { container } = render(<RouterProvider router={router} />);
+      expect(testWindow.history.state.usr).toBeUndefined();
+
+      fireEvent.click(screen.getByText("Submit"));
+      await waitFor(() => screen.getByText('{"key":"value"}'));
+      expect(getHtml(container)).toMatchInlineSnapshot(`
+        "<div>
+          <p>
+            {"key":"value"}
+          </p>
+        </div>"
+      `);
+      expect(testWindow.history.state.usr).toEqual({ key: "value" });
+    });
+
     it("supports <Form reloadDocument={true}>", async () => {
       let actionSpy = jest.fn();
       let router = createTestRouter(

packages/react-router-dom/__tests__/data-static-router-test.tsx

@@ -701,6 +701,51 @@ describe("A <StaticRouterProvider>", () => {
     );
   });
 
+  it("serializes Error subclass instances", async () => {
+    let routes = [
+      {
+        path: "/",
+        loader: () => {
+          throw new ReferenceError("oh no");
+        },
+      },
+    ];
+    let { query } = createStaticHandler(routes);
+
+    let context = (await query(
+      new Request("http://localhost/", {
+        signal: new AbortController().signal,
+      })
+    )) as StaticHandlerContext;
+
+    let html = ReactDOMServer.renderToStaticMarkup(
+      <React.StrictMode>
+        <StaticRouterProvider
+          router={createStaticRouter(routes, context)}
+          context={context}
+        />
+      </React.StrictMode>
+    );
+
+    // stack is stripped by default from SSR errors
+    let expectedJsonString = JSON.stringify(
+      JSON.stringify({
+        loaderData: {},
+        actionData: null,
+        errors: {
+          "0": {
+            message: "oh no",
+            __type: "Error",
+            __subType: "ReferenceError",
+          },
+        },
+      })
+    );
+    expect(html).toMatch(
+      `<script>window.__staticRouterHydrationData = JSON.parse(${expectedJsonString});</script>`
+    );
+  });
+
   it("supports a nonce prop", async () => {
     let routes = [
       {

packages/react-router-dom/dom.ts

@@ -171,6 +171,11 @@ export interface SubmitOptions {
    */
   replace?: boolean;
 
+  /**
+   * State object to add to the history stack entry for this navigation
+   */
+  state?: any;
+
   /**
    * Determines whether the form action is relative to the route hierarchy or
    * the pathname.  Use this if you want to opt out of navigating the route