docs: more docs stuff

docs/components/form.md

@@ -200,7 +200,7 @@ Without a framework like [Remix][remix], or your own server handling of posts to
 
 See also:
 
-- [`useTransition`][usetransition]
+- [`useNavigation`][usenavigation]
 - [`useActionData`][useactiondata]
 - [`useSubmit`][usesubmit]
 
@@ -293,6 +293,7 @@ You can access those values from the `request.url`
 - [useSubmit][usesubmit]
 
 [usenavigation]: ../hooks/use-navigation
+[useactiondata]: ../hooks/use-action-data
 [formdata]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
 [usefetcher]: ../hooks/use-fetcher
 [htmlform]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

docs/components/scroll-restoration.md

@@ -9,7 +9,7 @@ This component will emulate the browser's scroll restoration on location changes
 
 You should only render one of these and it's recommended you render it in the root route of your app:
 
-```tsx
+```tsx [5,12]
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -103,9 +103,9 @@ See also: [`<Link resetScroll>`][resetscroll]
 
 ## Scroll Flashing
 
-Without a server side rendering framework like [Remix][remix], you may experience some scroll flashing on initial page loads. This is because React Router can't restore scroll position until your JS bundles have downloaded (because React Router doesn't exist yet). It also has to wait for the data to load and the the page to render completely before it can accurately restore scroll (if you're rendering a spinner, the viewport is likely not the size it was when the scroll position was saved).
+Without a server side rendering framework like [Remix][remix], you may experience some scroll flashing on initial page loads. This is because React Router can't restore scroll position until your JS bundles have downloaded, data has loaded, and the full page has rendered (if you're rendering a spinner, the viewport is likely not the size it was when the scroll position was saved).
 
-With server rendering in Remix, the document comes to the browser fully formed and Remix actually lets the browser restore the scroll position with the browser's own default behavior.
+Server Rendering frameworks can prevent scroll flashing because they can send a fully formed document on the initial load, so scroll can be restored when the page first renders.
 
 [remix]: https://remix.run
 [resetscroll]: ../components/link#resetscroll

docs/fetch/json.md

@@ -2,3 +2,32 @@
 title: json
 new: true
 ---
+
+# `json`
+
+A shortcut for:
+
+```jsx
+new Response(JSON.stringify(someValue), {
+  headers: {
+    "Content-Type": "application/json; utf-9",
+  },
+});
+```
+
+Typically used in loaders:
+
+```jsx
+import { json } from "react-router-dom";
+
+const loader = async () => {
+  const data = getSomeData();
+  return json(data);
+};
+```
+
+See also:
+
+- [Returning Responses from Loaders][responses]
+
+[responses]: ../route/loader#returning-responses

docs/fetch/redirect.md

@@ -2,3 +2,59 @@
 title: redirect
 new: true
 ---
+
+# `redirect`
+
+Because you can return or throw responses in loaders and actions, you can use `redirect` to redirect to another route.
+
+```jsx
+import { redirect } from "react-router-dom";
+
+const loader = async () => {
+  const user = await getUser();
+  if (!user) {
+    return redirect("/login");
+  }
+};
+```
+
+It's really just a shortcut for this:
+
+```jsx
+new Response("", {
+  status: 302,
+  headers: {
+    Location: someUrl,
+  },
+});
+```
+
+It's recommended to use `redirect` in loaders and actions rather than `useNavigate` in your components when the redirect is in response to data.
+
+See also:
+
+- [Returning Responses from Loaders][responses]
+
+## Type Declaration
+
+```ts
+type RedirectFunction = (
+  url: string,
+  init?: number | ResponseInit
+) => Response;
+```
+
+## `url`
+
+The URL to redirect to.
+
+```js
+redirect("/login");
+```
+
+## `init`
+
+The [Response][response] options to be used in the response.
+
+[responses]: ../route/loader#returning-responses
+[response]: https://developer.mozilla.org/en-US/docs/Web/API/Response/Response

docs/guides/code-splitting.md

@@ -1,6 +1,7 @@
 ---
 title: Code Splitting
 new: true
+hidden: true
 ---
 
 # Code Splitting

docs/guides/index-route.md

@@ -1,6 +1,7 @@
 ---
 title: Index Route
 new: true
+hidden: true
 ---
 
 # Index Route

docs/guides/migrating-to-remix.md

@@ -1,5 +1,6 @@
 ---
 title: Migrating to Remix
+hidden: true
 ---
 
 # Migrating to Remix

docs/hooks/use-async-error.md

@@ -5,20 +5,10 @@ new: true
 
 # `useAsyncError`
 
-<details>
-  <summary>Type declaration</summary>
+Returns the rejection value from the nearest [`<Await>`][await] component.
 
-```tsx
-export declare function useAsyncError(): unknown;
-```
-
-</details>
-
-```tsx
-function Accessor() {
-  const data = useAsyncValue();
-  return <p>{data}</p>;
-}
+```tsx [4,12]
+import { useAsyncError, Await } from "react-router-dom";
 
 function ErrorHandler() {
   const error = useAsyncError();
@@ -27,11 +17,13 @@ function ErrorHandler() {
   );
 }
 
-<Await resolve={promise} errorElement={<ErrorElement />}>
-  <Accessor />
-</Await>;
+<Await
+  resolve={promiseThatRejects}
+  errorElement={<ErrorElement />}
+/>;
 ```
 
-This hook returns the rejection value from the nearest `<Await>` component. See the [`<Await>` docs][await docs] for more information.
+See the [Deferred Data Guide][deferred] and [`<Await>` docs][await docs] for more information.
 
-[await docs]: ../components/await
+[await]: ../components/await
+[deferred]: ../guides/deferred

docs/hooks/use-async-value.md

@@ -5,26 +5,21 @@ new: true
 
 # `useAsyncValue`
 
-<details>
-  <summary>Type declaration</summary>
+Returns the resolved data from the nearest `<Await>` ancestor component.
 
 ```tsx
-export declare function useAsyncValue(): unknown;
-```
-
-</details>
-
-```tsx
-function Accessor() {
-  const data = useAsyncValue();
-  return <p>{data}</p>;
+function ProductVariants() {
+  const variants = useAsyncValue();
+  return <div>{/* ... */}</div>;
 }
 
-<Await promise={promise}>
-  <Accessor />
+// Await creates the context for the value
+<Await promise={somePromiseForProductVariants}>
+  <ProductVariants />
 </Await>;
 ```
 
-This hook returns the resolved data from the nearest `<Await>` component. See the [`<Await>` docs][await docs] for more information.
+See the [Deferred Data Guide][deferred] and [`<Await>` docs][await docs] for more information.
 
 [await docs]: ../components/await
+[deferred]: ../guides/deferred

docs/routers/data-static-router.md

@@ -1,6 +1,7 @@
 ---
 title: unstable_DataStaticRouter
 new: true
+hidden: true
 ---
 
 # `unstable_DataStaticRouter`

docs/routers/picking-a-router.md

@@ -10,12 +10,11 @@ new: true
   <input type="text"  formAction="/bar" />
 </form>
 
-<docs-warning>This doc is a work in progress</docs-warning>
+<docs-warning>This doc is a work in progress and will be completed when the server rendering APIs around data loading are stable</docs-warning>
 
 React Router ships with several "routers" depending on the environment you're app is running in and the use cases you have. This document should help you figure out which one to use.
 
 - We recommend using [DataBrowserRouter][databrowserrouter] for all web projects. It keeps your UI and data in sync with the URL.
-- For server rendering your web app, you'll use [StaticRouter][staticrouter]
 - For testing, you'll want to use [MemoryRouter][memoryrouter]
 - For React Native apps, use [NativeRouter][nativerouter]
 

docs/utils/defer.md

@@ -5,17 +5,16 @@ new: true
 
 # `defer`
 
-<details>
-  <summary>Type declaration</summary>
+This utility allows you to defer values returned from loaders by passing promises instead of resolved values.
 
-```tsx
-declare function defer(
-  data: Record<string, unknown>
-): DeferredData;
+```jsx
+function loader() {
+  let product = await getProduct();
+  let reviews = getProductReviews();
+  return defer({ product, reviews });
+}
 ```
 
-</details>
-
-This utility allows you to defer certain parts of your loader. See the [Deferred guide][deferred guide] for more information.
+See the [Deferred Guide][deferred guide] for more information.
 
 [deferred guide]: ../guides/deferred