Merge branch 'release-next'

Author: brophdawg11

contributors.yml

@@ -88,6 +88,7 @@
 - ianflynnwork
 - IbraRouisDev
 - igniscyan
+- imjordanxd
 - infoxicator
 - IsaiStormBlesed
 - Isammoc

docs/components/form.md

@@ -20,6 +20,8 @@ interface FormProps
     | "text/plain";
   action?: string;
   onSubmit?: React.FormEventHandler<HTMLFormElement>;
+  fetcherKey?: string;
+  navigate?: boolean;
   preventScrollReset?: boolean;
   relative?: "route" | "path";
   reloadDocument?: boolean;
@@ -197,6 +199,14 @@ function Project() {
 
 As you can see, both forms submit to the same route but you can use the `request.method` to branch on what you intend to do. After the actions completes, the `loader` will be revalidated and the UI will automatically synchronize with the new data.
 
+## `navigate`
+
+You can tell the form to skip the navigation and use a [fetcher][usefetcher] internally by specifying `<Form navigate={false}>`. This is essentially a shorthand for `useFetcher()` + `<fetcher.Form>` where you don't care about the resulting data and only want to kick off a submission and access the pending state via [`useFetchers()`][usefetchers].
+
+## `fetcherKey`
+
+When using a non-navigating `Form`, you may also optionally specify your own fetcher key to use via `<Form navigate={false} fetcherKey="my-key">`.
+
 ## `replace`
 
 Instructs the form to replace the current entry in the history stack, instead of pushing the new entry.
@@ -367,6 +377,7 @@ You can access those values from the `request.url`
 [useactiondata]: ../hooks/use-action-data
 [formdata]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
 [usefetcher]: ../hooks/use-fetcher
+[usefetchers]: ../hooks/use-fetchers
 [htmlform]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
 [htmlformaction]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action
 [htmlform-method]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method

docs/guides/api-development-strategy.md

@@ -65,7 +65,9 @@ const router = createBrowserRouter(routes, {
 
 | Flag                     | Description                                                           |
 | ------------------------ | --------------------------------------------------------------------- |
+| `v7_fetcherPersist`      | Delay active fetcher cleanup until they return to an `idle` state     |
 | `v7_normalizeFormMethod` | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method |
+| `v7_prependBasename`     | Prepend the router basename to navigate/fetch paths                   |
 
 ### React Router Future Flags
 

docs/hooks/use-fetcher.md

@@ -60,15 +60,37 @@ Fetchers have a lot of built-in behavior:
 - Handles uncaught errors by rendering the nearest `errorElement` (just like a normal navigation from `<Link>` or `<Form>`)
 - Will redirect the app if your action/loader being called returns a redirect (just like a normal navigation from `<Link>` or `<Form>`)
 
-## `fetcher.state`
+## Options
 
-You can know the state of the fetcher with `fetcher.state`. It will be one of:
+### `key`
 
-- **idle** - nothing is being fetched.
-- **submitting** - A route action is being called due to a fetcher submission using POST, PUT, PATCH, or DELETE
-- **loading** - The fetcher is calling a loader (from a `fetcher.load`) or is being revalidated after a separate submission or `useRevalidator` call
+By default, `useFetcher` generate a unique fetcher scoped to that component (however, it may be looked up in [`useFetchers()`][use-fetchers] while in-flight). If you want to identify a fetcher with your own `key` such that you can access it from elsewhere in your app, you can do that with the `key` option:
+
+```tsx lines=[2,8]
+function AddToBagButton() {
+  const fetcher = useFetcher({ key: "add-to-bag" });
+  return <fetcher.Form method="post">...</fetcher.Form>;
+}
+
+// Then, up in the header...
+function CartCount({ count }) {
+  const fetcher = useFetcher({ key: "add-to-bag" });
+  const inFlightCount = Number(
+    fetcher.formData?.get("quantity") || 0
+  );
+  const optimisticCount = count + inFlightCount;
+  return (
+    <>
+      <BagIcon />
+      <span>{optimisticCount}</span>
+    </>
+  );
+}
+```
+
+## Components
 
-## `fetcher.Form`
+### `fetcher.Form`
 
 Just like `<Form>` except it doesn't cause a navigation. <small>(You'll get over the dot in JSX ... we hope!)</small>
 
@@ -83,6 +105,8 @@ function SomeComponent() {
 }
 ```
 
+## Methods
+
 ## `fetcher.load()`
 
 Loads data from a route loader.
@@ -140,7 +164,17 @@ If you want to submit to an index route, use the [`?index` param][indexsearchpar
 
 If you find yourself calling this function inside of click handlers, you can probably simplify your code by using `<fetcher.Form>` instead.
 
-## `fetcher.data`
+## Properties
+
+### `fetcher.state`
+
+You can know the state of the fetcher with `fetcher.state`. It will be one of:
+
+- **idle** - nothing is being fetched.
+- **submitting** - A route action is being called due to a fetcher submission using POST, PUT, PATCH, or DELETE
+- **loading** - The fetcher is calling a loader (from a `fetcher.load`) or is being revalidated after a separate submission or `useRevalidator` call
+
+### `fetcher.data`
 
 The returned data from the loader or action is stored here. Once the data is set, it persists on the fetcher even through reloads and resubmissions.
 
@@ -171,7 +205,7 @@ function ProductDetails({ product }) {
 }
 ```
 
-## `fetcher.formData`
+### `fetcher.formData`
 
 When using `<fetcher.Form>` or `fetcher.submit()`, the form data is available to build optimistic UI.
 
@@ -204,15 +238,15 @@ function TaskCheckbox({ task }) {
 }
 ```
 
-## `fetcher.json`
+### `fetcher.json`
 
 When using `fetcher.submit(data, { formEncType: "application/json" })`, the submitted JSON is available via `fetcher.json`.
 
-## `fetcher.text`
+### `fetcher.text`
 
 When using `fetcher.submit(data, { formEncType: "text/plain" })`, the submitted text is available via `fetcher.text`.
 
-## `fetcher.formAction`
+### `fetcher.formAction`
 
 Tells you the action url the form is being submitted to.
 
@@ -223,7 +257,7 @@ Tells you the action url the form is being submitted to.
 fetcher.formAction; // "mark-as-read"
 ```
 
-## `fetcher.formMethod`
+### `fetcher.formMethod`
 
 Tells you the method of the form being submitted: get, post, put, patch, or delete.
 
@@ -243,4 +277,5 @@ fetcher.formMethod; // "post"
 [link]: ../components/link
 [form]: ../components/form
 [api-development-strategy]: ../guides/api-development-strategy
-[use-submit]: ./use-submit.md
+[use-submit]: ./use-submit
+[use-fetchers]: ./use-fetchers

docs/hooks/use-submit.md

@@ -150,7 +150,15 @@ 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`, `unstable_viewTransition` etc.
+Because submissions are navigations, the options may also contain the other navigation related props from [`<Form>`][form] such as:
+
+- `fetcherKey`
+- `navigate`
+- `preventScrollReset`
+- `relative`
+- `replace`
+- `state`
+- `unstable_viewTransition`
 
 [pickingarouter]: ../routers/picking-a-router
 [form]: ../components/form

docs/routers/create-browser-router.md

@@ -114,17 +114,22 @@ const router = createBrowserRouter(routes, {
 });
 ```
 
+The following future flags are currently available:
+
+| Flag                     | Description                                                           |
+| ------------------------ | --------------------------------------------------------------------- |
+| `v7_fetcherPersist`      | Delay active fetcher cleanup until they return to an `idle` state     |
+| `v7_normalizeFormMethod` | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method |
+| `v7_prependBasename`     | Prepend the router basename to navigate/fetch paths                   |
+
 ## `window`
 
 Useful for environments like browser devtool plugins or testing to use a different window than the global `window`.
 
 [loader]: ../route/loader
 [action]: ../route/action
 [fetcher]: ../hooks/use-fetcher
-[browser-router]: ./browser-router
-[form]: ../components/form
 [route]: ../route/route
-[routes]: ../components/routes
 [historyapi]: https://developer.mozilla.org/en-US/docs/Web/API/History
 [api-development-strategy]: ../guides/api-development-strategy
 [remixing-react-router]: https://remix.run/blog/remixing-react-router