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";