diff --git a/docs/explanation/race-conditions.md b/docs/explanation/race-conditions.md index 464e022870..c35cd729f4 100644 --- a/docs/explanation/race-conditions.md +++ b/docs/explanation/race-conditions.md @@ -13,9 +13,9 @@ React Router's handling of network concurrency is heavily inspired by the behavi Consider clicking a link to a new document, and then clicking a different link before the new page has finished loading. The browser will: 1. cancel the first request -2. immediately processes the new navigation +2. immediately process the new navigation -This behavior includes form submissions. When a pending form submission is interrupted by a new one, the first is canceled and the new submission is immediately processed. +The same behavior applies to form submissions. When a pending form submission is interrupted by a new one, the first is canceled and the new submission is immediately processed. ## React Router Behavior diff --git a/docs/explanation/type-safety.md b/docs/explanation/type-safety.md index 447b362a1d..1793a03904 100644 --- a/docs/explanation/type-safety.md +++ b/docs/explanation/type-safety.md @@ -6,7 +6,7 @@ title: Type Safety If you haven't done so already, check out our guide for [setting up type safety][route-module-type-safety] in a new project. -React Router generates types for each route in your app that you can use to get type safety for each route module export. +React Router generates types for each route in your app that provide type safety for the route module exports. For example, let's say you have a `products/:id` route configured: diff --git a/docs/how-to/fetchers.md b/docs/how-to/fetchers.md index e0c9237c18..d956f12abe 100644 --- a/docs/how-to/fetchers.md +++ b/docs/how-to/fetchers.md @@ -80,7 +80,7 @@ export default function Component() { ### 3. Submit the form -If you submit the form now, the fetcher call the action and revalidate the route data automatically. +If you submit the form now, the fetcher will call the action and revalidate the route data automatically. ### 4. Render pending state @@ -299,4 +299,4 @@ Fetchers can be submitted programmatically with `fetcher.submit`: ``` -Note the input event's form is passed as the first argument to `fetcher.submit`. The fetcher will use that form to submit the request, reading it's attributes and serializing the data from its elements. +Note the input event's form is passed as the first argument to `fetcher.submit`. The fetcher will use that form to submit the request, reading its attributes and serializing the data from its elements. diff --git a/docs/how-to/file-uploads.md b/docs/how-to/file-uploads.md index 86ffd46ac0..369f7ece60 100644 --- a/docs/how-to/file-uploads.md +++ b/docs/how-to/file-uploads.md @@ -6,11 +6,11 @@ title: File Uploads Handle file uploads in your React Router applications. This guide uses some packages from the [Remix The Web][remix-the-web] project to make file uploads easier. -_Thank you to David Adams for [writing an original guide](https://programmingarehard.com/2024/09/06/remix-file-uploads-updated.html/) which this doc is based on. You can refer to it for even more examples._ +_Thank you to David Adams for [writing an original guide](https://programmingarehard.com/2024/09/06/remix-file-uploads-updated.html/) on which this doc is based. You can refer to it for even more examples._ ## Basic File Upload -👉 **Setup some routes** +### 1. Setup some routes You can setup your routes however you like. This example uses the following structure: @@ -28,7 +28,7 @@ export default [ ] satisfies RouteConfig; ``` -👉 **Add the form data parser** +### 2. Add the form data parser `form-data-parser` is a wrapper around `request.formData()` that provides streaming support for handling file uploads. @@ -38,7 +38,7 @@ npm i @mjackson/form-data-parser [See the `form-data-parser` docs for more information][form-data-parser] -👉 **Create a route with an upload action** +### 3. Create a route with an upload action The `parseFormData` function takes an `uploadHandler` function as an argument. This function will be called for each file upload in the form. @@ -83,7 +83,7 @@ export default function Component() { ## Local Storage Implementation -👉 **Add the storage package** +### 1. Add the storage package `file-storage` is a key/value interface for storing [File objects][file] in JavaScript. Similar to how `localStorage` allows you to store key/value pairs of strings in the browser, file-storage allows you to store key/value pairs of files on the server. @@ -93,7 +93,7 @@ npm i @mjackson/file-storage [See the `file-storage` docs for more information][file-storage] -👉 **Create a storage configuration** +### 2. Create a storage configuration Create a file that exports a `LocalFileStorage` instance to be used by different routes. @@ -109,7 +109,7 @@ export function getStorageKey(userId: string) { } ``` -👉 **Implement the upload handler** +### 3. Implement the upload handler Update the form's `action` to store files in the `fileStorage` instance. @@ -177,7 +177,7 @@ export default function UserPage({ } ``` -👉 **Add a route to serve the uploaded file** +### 4. Add a route to serve the uploaded file Create a [resource route][resource-route] that streams the file as a response. diff --git a/docs/how-to/headers.md b/docs/how-to/headers.md index dc5bf1f393..5591494880 100644 --- a/docs/how-to/headers.md +++ b/docs/how-to/headers.md @@ -39,7 +39,7 @@ export async function loader({ params }: LoaderArgs) { return data(page, { headers: { - "Server-Timing': `page;dur=${ms};desc=`Page query"', + "Server-Timing": `page;dur=${ms};desc="Page query"`, }, }); } diff --git a/docs/how-to/pre-rendering.md b/docs/how-to/pre-rendering.md index a4441e57c6..a221b5f336 100644 --- a/docs/how-to/pre-rendering.md +++ b/docs/how-to/pre-rendering.md @@ -4,7 +4,7 @@ title: Pre-Rendering # Pre-Rendering -Pre-rendering allows you to render a pages at build time instead of on a server to speed up pages loads for static content. +Pre-rendering allows you to render pages at build time instead of on a server to speed up pages loads for static content. ## Configuration diff --git a/docs/how-to/suspense.md b/docs/how-to/suspense.md index 392d0e9cb1..54064831d5 100644 --- a/docs/how-to/suspense.md +++ b/docs/how-to/suspense.md @@ -4,7 +4,7 @@ title: Streaming with Suspense # Streaming with Suspense -Streaming with React Suspense allows apps to speed up initial renders by unblocking initial UI by deferring non-critical data. +Streaming with React Suspense allows apps to speed up initial renders by deferring non-critical data and unblocking UI rendering. React Router supports React Suspense by returning promises from loaders and actions. diff --git a/docs/how-to/view-transitions.md b/docs/how-to/view-transitions.md index 2fbb5032e4..8d87515fb2 100644 --- a/docs/how-to/view-transitions.md +++ b/docs/how-to/view-transitions.md @@ -8,7 +8,7 @@ Enable smooth animations between page transitions in your React Router applicati ## Basic View Transition -👉 **Enable view transitions on navigation** +### 1. Enable view transitions on navigation The simplest way to enable view transitions is by adding the `viewTransition` prop to your `Link`, `NavLink`, or `Form` components. This automatically wraps the navigation update in `document.startViewTransition()`. @@ -26,7 +26,7 @@ For more information on using the View Transitions API, please refer to the ["Sm Let's build an image gallery that demonstrates how to trigger and use view transitions. We'll create a list of images that expand into a detail view with smooth animations. -👉 **Create the image gallery route** +### 2. Create the image gallery route ```tsx filename=routes/image-gallery.tsx import { NavLink } from "react-router"; @@ -62,7 +62,7 @@ export default function ImageGalleryRoute() { } ``` -👉 **Add transition styles** +### 3. Add transition styles Define view transition names and animations for elements that should transition smoothly between routes. @@ -98,7 +98,7 @@ Define view transition names and animations for elements that should transition } ``` -👉 **Create the image detail route** +### 4. Create the image detail route The detail view needs to use the same view transition names to create a seamless animation. @@ -122,7 +122,7 @@ export default function ImageDetailsRoute({ } ``` -👉 **Add matching transition styles for the detail view** +### 5. Add matching transition styles for the detail view ```css filename=app.css /* Match transition names from the list view */ @@ -144,7 +144,7 @@ export default function ImageDetailsRoute({ You can control view transitions more precisely using either render props or the `useViewTransitionState` hook. -👉 **Using render props** +### 1. Using render props ```tsx filename=routes/image-gallery.tsx @@ -172,7 +172,7 @@ You can control view transitions more precisely using either render props or the ``` -👉 **Using the `useViewTransitionState` hook** +### 2. Using the `useViewTransitionState` hook ```tsx filename=routes/image-gallery.tsx function NavImage(props: { src: string; idx: number }) { diff --git a/docs/start/framework/rendering.md b/docs/start/framework/rendering.md index 687c701714..4b5faa8510 100644 --- a/docs/start/framework/rendering.md +++ b/docs/start/framework/rendering.md @@ -13,7 +13,7 @@ There are three rendering strategies in React Router: ## Client Side Rendering -All routes are always client side rendered as the user navigates around the app. If you're looking to build a Single Page App, disable server rendering: +Routes are always client side rendered as the user navigates around the app. If you're looking to build a Single Page App, disable server rendering: ```ts filename=react-router.config.ts import type { Config } from "@react-router/dev/config"; @@ -33,7 +33,7 @@ export default { } satisfies Config; ``` -Server side rendering requires a deployment that supports it. Though it's a global setting, individual routes can still be statically pre-rendered, and/or use client data loading with `clientLoader` to avoid server rendering/fetching of their portion of the UI. +Server side rendering requires a deployment that supports it. Though it's a global setting, individual routes can still be statically pre-rendered. Routes can also use client data loading with `clientLoader` to avoid server rendering/fetching for their portion of the UI. ## Static Pre-rendering diff --git a/docs/start/framework/routing.md b/docs/start/framework/routing.md index f5c4372334..89aec2c1b1 100644 --- a/docs/start/framework/routing.md +++ b/docs/start/framework/routing.md @@ -7,7 +7,7 @@ order: 2 ## Configuring Routes -Routes are configured in `app/routes.ts`. Routes have a url pattern to match the URL and a file path to the route module to define its behavior. +Routes are configured in `app/routes.ts`. Each route has two required parts: a URL pattern to match the URL, and a file path to the route module that defines its behavior. ```ts filename=app/routes.ts import { diff --git a/docs/upgrading/component-routes.md b/docs/upgrading/component-routes.md index 37dcb1ec7b..2c34a65d15 100644 --- a/docs/upgrading/component-routes.md +++ b/docs/upgrading/component-routes.md @@ -21,7 +21,7 @@ The Vite plugin adds: - Optional Static pre-rendering - Optional Server rendering -The initial setup will require the most work, but once complete, adopting the new features is incremental, you can do one route at a time. +The initial setup requires the most work. However, once complete, you can adopt new features incrementally, one route at a time. ## Prerequisites @@ -40,7 +40,7 @@ npm install -D @react-router/dev **👉 Install a runtime adapter** -We will assume you are using Node as your runtime +We will assume you are using Node as your runtime. ```shellscript nonumber npm install @react-router/node diff --git a/docs/upgrading/remix.md b/docs/upgrading/remix.md index 438e05f7d3..a779d14baa 100644 --- a/docs/upgrading/remix.md +++ b/docs/upgrading/remix.md @@ -5,9 +5,9 @@ order: 2 # Upgrading from Remix -React Router v7 is the next major version of Remix after v2 (see our ["Incremental Path to React 19" blog post][incremental-path-to-react-19]) for more information). +React Router v7 is the next major version of Remix after v2 (see our ["Incremental Path to React 19" blog post][incremental-path-to-react-19] for more information). -The Remix v2 -> React Router v7 upgrade requires mostly updates to dependencies if you are caught up on all [Remix v2 future flags][v2-future-flags] (step 1). +If you have enabled all [Remix v2 future flags][v2-future-flags], upgrading from Remix v2 to React Router v7 mainly involves updating dependencies. @@ -239,7 +239,7 @@ export default defineConfig({ -If you're not using TypeScript, you can skip this step. +If you are not using TypeScript, you can skip this step. diff --git a/docs/upgrading/router-provider.md b/docs/upgrading/router-provider.md index 06aa951eb5..341acaa045 100644 --- a/docs/upgrading/router-provider.md +++ b/docs/upgrading/router-provider.md @@ -29,7 +29,7 @@ The Vite plugin adds: - Optional Static pre-rendering - Optional Server rendering -The initial setup will require the most work, but once complete, adopting the new features is incremental, you can do one route at a time. +The initial setup requires the most work. However, once complete, you can adopt new features incrementally, one route at a time. ## Prerequisites @@ -48,7 +48,7 @@ npm install -D @react-router/dev **👉 Install a runtime adapter** -We will assume you are using Node as your runtime +We will assume you are using Node as your runtime. ```shellscript nonumber npm install @react-router/node diff --git a/docs/upgrading/v6.md b/docs/upgrading/v6.md index 0e7a69be7b..1bf2bdc03d 100644 --- a/docs/upgrading/v6.md +++ b/docs/upgrading/v6.md @@ -5,7 +5,7 @@ order: 1 # Upgrading from v6 -The v7 upgrade is non-breaking if you are caught up on all future flags. These flags allow you to update your app one change at a time. We highly recommend you make a commit after each step and ship it instead of doing everything all at once. +The v7 upgrade has no breaking changes if you have enabled all future flags. These flags allow you to update your app one change at a time. We highly recommend you make a commit after each step and ship it instead of doing everything all at once. ## Update to latest v6.x @@ -303,7 +303,7 @@ Now that your app is caught up, you can simply update to v7 (theoretically!) wit npm install react-router-dom@latest ``` -👉 **Uninstall react-router-dom, install react-router** +👉 **Replace react-router-dom with react-router** In v7 we no longer need `"react-router-dom"` as the packages have been simplified. You can import everything from `"react-router"`: @@ -316,7 +316,7 @@ Note you only need `"react-router"` in your package.json. 👉 **Update imports** -Now you can update you imports to use `react-router`: +Now you should update your imports to use `react-router`: ```diff -import { useLocation } from "react-router-dom";