docs: cleanup small grammar mistakes and make how-tos more similar

Author: brookslybrand

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
 

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:
 

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`:
 </fetcher.Form>
 ```
 
-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.

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.
 

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"`,
     },
   });
 }

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
 

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.
 

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
 <NavLink to={`/image/${idx}`} viewTransition>
@@ -172,7 +172,7 @@ You can control view transitions more precisely using either render props or the
 </NavLink>
 ```
 
-👉 **Using the `useViewTransitionState` hook**
+### 2. Using the `useViewTransitionState` hook
 
 ```tsx filename=routes/image-gallery.tsx
 function NavImage(props: { src: string; idx: number }) {

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
 

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 {