Fix grammar in docs (#8455)

* Fix minor grammar in `overview.md`

Possessive "its" rather than contracted "it is"

* Sign CLA: add name to `contributors.yml`

* Some more minor typos in `faq.md`

* Did a sweep of the new docs for general grammar and typos.

contributors.yml

@@ -9,6 +9,7 @@
 - noisypigeon
 - paulsmithkc
 - petersendidit
+- RobHannay
 - shivamsinghchahar
 - timdorr
 - turansky

docs/api.md

@@ -90,7 +90,7 @@ interface BrowserRouterProps {
 
 `<BrowserRouter>` is the recommended interface for running React Router in a web browser. A `<BrowserRouter>` stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.
 
-`<BrowserRouter window>` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another's window's URL, in an `<iframe>`, for example.
+`<BrowserRouter window>` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
 
 ```tsx
 import * as React from "react";

docs/contributing.md

@@ -16,7 +16,7 @@ Before you can contribute to the codebase, you will need to fork the repo. This
 - All new features, bug-fixes, or **anything that touches `react-router` code** should be branched off of and merged into the `dev` branch
 - Changes that only touch documentation can be branched off of and merged into the `main` branch
 
-The following steps will get you setup to contribute changes to this repo:
+The following steps will get you set up to contribute changes to this repo:
 
 1. Fork the repo (click the <kbd>Fork</kbd> button at the top right of [this page](https://github.com/remix-run/react-router))
 2. Clone your fork locally

docs/faq.md

@@ -43,7 +43,7 @@ In React Router v6 we switched from using v5's `<Route component>` and `<Route r
 
 For starters, we see React itself taking the lead here with the `<Suspense fallback={<Spinner />}>` API. The `fallback` prop takes a React **element**, not a **component**. This lets you easily pass whatever props you want to your `<Spinner>` from the component that renders it.
 
-Using elements instead of components means we don't have to provide a `passProps`-style API so you can get the props you need to your elements. For example, in a component-based API there is no good way to pass props to the `<Profile>` element that is rendered when `<Route path=":userId" component={Profile} />` matches. Most React libraries who take this approach end up with either an API like `<Route component={Profile} passProps={{ animate: true }} />` or use a render prop or higher-order component.
+Using elements instead of components means we don't have to provide a `passProps`-style API, so you can get the props you need to your elements. For example, in a component-based API there is no good way to pass props to the `<Profile>` element that is rendered when `<Route path=":userId" component={Profile} />` matches. Most React libraries who take this approach end up with either an API like `<Route component={Profile} passProps={{ animate: true }} />` or use a render prop or higher-order component.
 
 Also, `Route`'s rendering API in v5 was rather large. As we worked on v4/5, the conversation went something like this:
 
@@ -128,7 +128,7 @@ In v4 we would have just left the path prop off a route. In v5 we would have wra
 
 ## `<Route>` doesn't render? How do I compose?
 
-In v5 the `<Route>` component was just a normal component that was like an `if` statement that rendered when the URL matched it's path. In v6, a `<Route>` element doesn't actually ever render, it's simply there for configuration.
+In v5 the `<Route>` component was just a normal component that was like an `if` statement that rendered when the URL matched its path. In v6, a `<Route>` element doesn't actually ever render, it's simply there for configuration.
 
 In v5, since routes were just components, `MyRoute` will be rendered when the path is "/my-route".
 
@@ -146,7 +146,7 @@ let MyRoute = ({ element, ...rest }) => {
 };
 ```
 
-In v6, however, the `<Route>` is only used for it's props, so the following code will never render `<p>Hello!</p>` because `<MyRoute>` has no path that `<Routes>` can see:
+In v6, however, the `<Route>` is only used for its props, so the following code will never render `<p>Hello!</p>` because `<MyRoute>` has no path that `<Routes>` can see:
 
 ```tsx bad filename=v6-wrong.js
 let App = () => (
@@ -196,7 +196,7 @@ function MatchPath({ path, Comp }) {
 
 ## How do I nest routes deep in the tree?
 
-In v5 you could render a `<Route>` or `<Switch>` anywhere you want. You can keep doing the very same thing but you need to use `<Routes>` (`<Route>` without an 's' will not work). We call these "Descendant `<Routes>`".
+In v5 you could render a `<Route>` or `<Switch>` anywhere you want. You can keep doing the very same thing, but you need to use `<Routes>` (`<Route>` without an 's' will not work). We call these "Descendant `<Routes>`".
 
 It might have looked like this in v5
 
@@ -391,7 +391,7 @@ function App() {
 }
 ```
 
-In fact, the v5 version has all sorts of problems if your routes aren't ordered _just right_. V6 competely eliminates this problem.
+In fact, the v5 version has all sorts of problems if your routes aren't ordered _just right_. V6 completely eliminates this problem.
 
 **Remix Users**
 

docs/getting-started/concepts.md

@@ -230,7 +230,7 @@ You can think about `location.state` just like `location.hash` or `location.sear
 
 A couple great use-cases for location state are:
 
-- Telling the next page where the user came from and branching the UI. The most popular implementation here is the showing a record in a modal if the user clicked on an item in a grid view, but if they show up to the URL directly, show the record in it's own layout (pinterest, old instagram).
+- Telling the next page where the user came from and branching the UI. The most popular implementation here is the showing a record in a modal if the user clicked on an item in a grid view, but if they show up to the URL directly, show the record in its own layout (pinterest, old instagram).
 - Sending a partial record from a list to the next screen so it can render the partial data immediately and then fetching the rest of the data afterward.
 
 You set location state in two ways: on `<Link>` or `navigate`:

docs/getting-started/installation.md

@@ -122,7 +122,7 @@ function About() {
 }
 ```
 
-Go ahead and start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `<About>` route, and voila! You've successfully set up React Router using Create React App! 🥳
+Go ahead and start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `<About>` route, and voilà! You've successfully set up React Router using Create React App! 🥳
 
 When it's time to deploy your app to production, be sure to follow [Create React App's instructions](https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing) on deploying with React Router to be sure your server is configured correctly.
 
@@ -163,7 +163,7 @@ ReactDOM.render(
 );
 ```
 
-In your `index.html`, create the root div in the document body above the script tag. It's also helpful to provide a `noscript` fallback message for users who may disabled JavaScript, unless you plan on server-rendering your app later.
+In your `index.html`, create the root div in the document body above the script tag. It's also helpful to provide a `noscript` fallback message for users who may have disabled JavaScript, unless you plan on server-rendering your app later.
 
 ```html
 <body>
@@ -231,7 +231,7 @@ function About() {
 export default App;
 ```
 
-Now start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `About` route, and voila! You successfully set up React Router using Parcel! 🥳
+Now start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `About` route, and voilà! You successfully set up React Router using Parcel! 🥳
 
 ## Webpack
 

docs/getting-started/overview.md

@@ -218,7 +218,7 @@ function SentInvoices() {
 
 The nested url segments map to nested component trees. This is perfect for creating UI that has persistent navigation in layouts with an inner section that changes with the URL. If you look around the web you'll notice many websites (and especially web apps) have multiple levels of layout nesting.
 
-Here's a another example of a root layout with navigation that persists while the inner page swaps out with the URL:
+Here's another example of a root layout with navigation that persists while the inner page swaps out with the URL:
 
 ```tsx
 import {
@@ -311,7 +311,7 @@ function App() {
 
 Now at "/" the `<Activity>` element will render inside the outlet.
 
-You can have an index route at any level of the route hierarchy that will render when the parent matches but none of it's other children do.
+You can have an index route at any level of the route hierarchy that will render when the parent matches but none of its other children do.
 
 ```tsx
 function App() {
@@ -435,7 +435,7 @@ function App() {
 
 ## Descendant `<Routes>`
 
-You can render [a `<Routes>` element](../api.md#routes) anywhere you need one, including deep within the component tree of another `<Routes>`. These will work just the same as any other `<Routes>`, except they will automatically build on the path of the route that rendered them. If you do this, _make sure to put a \* at the end of the parent route's path_. Otherwise the parent route won't match the URL when it is longer than the parent route's path, and your descendant `<Routes>` won't ever show up.
+You can render [a `<Routes>` element](../api.md#routes) anywhere you need one, including deep within the component tree of another `<Routes>`. These will work just the same as any other `<Routes>`, except they will automatically build on the path of the route that rendered them. If you do this, _make sure to put a \* at the end of the parent route's path_. Otherwise, the parent route won't match the URL when it is longer than the parent route's path, and your descendant `<Routes>` won't ever show up.
 
 ```tsx [5]
 function App() {

docs/getting-started/tutorial.md

@@ -80,7 +80,7 @@ const rootElement = document.getElementById("root");
 render(<App />, rootElement);
 ```
 
-Finally start your app:
+Finally, start your app:
 
 ```sh
 # probably this
@@ -794,7 +794,7 @@ Most of the time the URL changes is in response to the user clicking a link. But
 
 Let's add a button that marks the invoice as paid and then navigates to the index route.
 
-First you can copy paste this function that deletes an invoice from our fake data store:
+First you can copy and paste this function that deletes an invoice from our fake data store:
 
 ```js filename=src/data.js
 export function deleteInvoice(number) {

docs/upgrading/reach.md

@@ -150,9 +150,9 @@ ReactDOM.render(
 
 #### Justification:
 
-`@reach/router` uses a global, default history instance that has side-effects in the module, which prevents the ability to tree-shake the module whether you use the global or not. Additionally, React Router provides other history types (like hash history) that `@reach/router` doesn't, so it always requires a top-level location provider (in React Router these are `<BrowserRouter/>` and friends).
+`@reach/router` uses a global, default history instance that has side effects in the module, which prevents the ability to tree-shake the module whether you use the global or not. Additionally, React Router provides other history types (like hash history) that `@reach/router` doesn't, so it always requires a top-level location provider (in React Router these are `<BrowserRouter/>` and friends).
 
-Also, various modules like `Router`, `Link` and `useLocation` rendered outside of a `<LocationProvider/>` set up their own URL listener. It's generally not a problem, but every little bit counts. Putting a `<LocationProvider />` at the top allows the app to have a single URL listener.
+Also, various modules like `Router`, `Link` and `useLocation` rendered outside a `<LocationProvider/>` set up their own URL listener. It's generally not a problem, but every little bit counts. Putting a `<LocationProvider />` at the top allows the app to have a single URL listener.
 
 ## Breaking updates
 
@@ -250,7 +250,7 @@ The way redirects work in `@reach/router` was a bit of an experiment. It "throws
 
 After bumping into issues (like app level `componentDidCatch`'s needing to rethrow the redirect), we've decided not to do that anymore in React Router v6.
 
-But we've gone a step farther and concluded that redirect's are not even the job of React Router. Your dynamic web server or static file server should be handling this and sending an appropriate response status code like 301 or 302.
+But we've gone a step farther and concluded that redirects are not even the job of React Router. Your dynamic web server or static file server should be handling this and sending an appropriate response status code like 301 or 302.
 
 Having the ability to redirect while matching in React Router at best requires you to configure the redirects in two places (your server and your routes) and at worst encouraged people to only do it in React Router--which doesn't send a status code at all.
 
@@ -290,7 +290,7 @@ If your app has a `<Link to="/events" />` still hanging around and the user
 clicks it, the server isn't involved since you're using a client-side router.
 You'll need to be more diligent about updating your links 😬.
 
-Alternatively, if you want to allow for outdated links, _and you realize you need to configure your redirects on both the client and the server_, go ahead and copy paste the `Redirect` component we were about to ship but then deleted.
+Alternatively, if you want to allow for outdated links, _and you realize you need to configure your redirects on both the client and the server_, go ahead and copy and paste the `Redirect` component we were about to ship but then deleted.
 
 ```jsx
 import { useEffect } from "react";
@@ -448,11 +448,11 @@ Also note the change from `uri -> url`.
 
 Just feels cleaner to have the params be separate from URL and path.
 
-Also nobody knows the difference between URL and URI, so we didn't want to start a bunch of pedantic arguments about it. React Router always called it URL, and it's got more production apps, so we used URL instead of URI.
+Also, nobody knows the difference between URL and URI, so we didn't want to start a bunch of pedantic arguments about it. React Router always called it URL, and it's got more production apps, so we used URL instead of URI.
 
 ### `<Match />`
 
-There is no `<Match/>` component in React Router v6. It used render props to compose behavior but we've got hooks now.
+There is no `<Match/>` component in React Router v6. It used render props to compose behavior, but we've got hooks now.
 
 If you like it, or just don't want to update your code, it's easy to backport:
 

docs/upgrading/v5.md

@@ -17,7 +17,7 @@ Until then, we hope this guide will help you do the upgrade all at once!
 
 React Router version 6 introduces several powerful new features, as well as improved compatibility with the latest versions of React. It also introduces a few breaking changes from version 5. This document is a comprehensive guide on how to upgrade your v4/5 app to v6 while hopefully being able to ship as often as possible as you go.
 
-If you are just getting started with React Router or you'd like to try out v6 in a new app, please see [the Getting Started guide](../getting-started/installation.md).
+If you are just getting started with React Router, or you'd like to try out v6 in a new app, please see [the Getting Started guide](../getting-started/installation.md).
 
 The examples in this guide will show code samples of how you might have built something in a v5 app, followed by how you would accomplish the same thing in v6. There will also be an explanation of why we made this change and how it's going to improve both your code and the overall user experience of people who are using your app.
 
@@ -159,7 +159,7 @@ React Router v6 introduces a `Routes` component that is kind of like `Switch`, b
   This avoids bugs due to unreachable routes because they were defined later
   in your `<Switch>`
 - Routes may be nested in one place instead of being spread out in different
-  components. In small to medium sized apps, this lets you easily see all your
+  components. In small to medium-sized apps, this lets you easily see all your
   routes at once. In large apps, you can still nest routes in bundles that you
   load dynamically via `React.lazy`