From 59b319feaa12745a434afdef5cadfcabd01206f9 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Tue, 22 Feb 2022 13:37:17 -0800
Subject: [PATCH] chore: Format `main` with Prettier defaults  (#8678)

* chore: use prettier defaults
* chore: format with prettier
* chore: update prettier
---
 FAQ.md                                        |   2 +-
 docs/api.md                                   |  34 +--
 docs/faq.md                                   |   4 +-
 docs/getting-started/concepts.md              |  56 ++---
 docs/getting-started/installation.md          |   2 +-
 docs/getting-started/overview.md              |   8 +-
 docs/getting-started/tutorial.md              |  50 ++--
 docs/prettier.config.js                       |   2 +-
 docs/upgrading/reach.md                       |  12 +-
 docs/upgrading/v5.md                          |  26 +--
 examples/auth/src/App.tsx                     |   2 +-
 examples/auth/src/auth.ts                     |   2 +-
 examples/auth/vite.config.ts                  |  12 +-
 examples/basic/vite.config.ts                 |  12 +-
 examples/custom-filter-link/src/App.tsx       |  14 +-
 examples/custom-filter-link/src/snkrs.ts      |  22 +-
 examples/custom-filter-link/vite.config.ts    |  12 +-
 examples/custom-link/src/App.tsx              |   2 +-
 examples/custom-link/vite.config.ts           |  12 +-
 examples/custom-query-parsing/src/App.tsx     |   2 +-
 examples/custom-query-parsing/vite.config.ts  |  12 +-
 examples/lazy-loading/vite.config.ts          |  12 +-
 examples/modal/src/App.tsx                    |  12 +-
 examples/modal/src/images.ts                  |  12 +-
 examples/modal/vite.config.ts                 |  12 +-
 examples/multi-app/inbox/App.jsx              |   8 +-
 examples/multi-app/inbox/messages.js          |  22 +-
 examples/multi-app/server.js                  |   4 +-
 examples/multi-app/vite.config.js             |  18 +-
 examples/route-objects/src/App.tsx            |  10 +-
 examples/route-objects/vite.config.ts         |  12 +-
 examples/search-params/src/App.tsx            |   4 +-
 examples/search-params/vite.config.ts         |  12 +-
 examples/ssr/server.js                        |   6 +-
 examples/ssr/vite.config.js                   |  12 +-
 package.json                                  |   2 +-
 .../__tests__/link-click-test.tsx             |   2 +-
 .../__tests__/link-push-test.tsx              |  10 +-
 .../__tests__/navigate-encode-params-test.tsx |   2 +-
 .../__tests__/static-location-test.tsx        |   4 +-
 .../__tests__/useLinkClickHandler-test.tsx    |  10 +-
 packages/react-router-dom/index.tsx           |  22 +-
 packages/react-router-dom/jest-transformer.js |   4 +-
 packages/react-router-dom/jest.config.js      |   6 +-
 packages/react-router-dom/server.tsx          |   6 +-
 .../__tests__/deep-linking-test.tsx           |   4 +-
 .../__tests__/link-press-test.tsx             |   2 +-
 .../__tests__/search-params-test.tsx          |   4 +-
 .../react-router-native/__tests__/setup.ts    |   2 +-
 .../__tests__/useLinkPressHandler-test.tsx    |   2 +-
 .../react-router-native/__tests__/utils.ts    |   2 +-
 packages/react-router-native/index.tsx        |  18 +-
 packages/react-router-native/jest.config.js   |   8 +-
 .../__tests__/Routes-location-test.tsx        |   2 +-
 .../__tests__/absolute-path-matching-test.tsx |  20 +-
 .../__tests__/gh-issue-8165-test.tsx          |   2 +-
 .../__tests__/index-routes-test.tsx           |   8 +-
 .../react-router/__tests__/matchPath-test.tsx |  74 +++---
 .../__tests__/matchRoutes-test.tsx            |  30 +--
 .../__tests__/path-matching-test.tsx          |  80 +++----
 .../__tests__/resolvePath-test.tsx            |  16 +-
 .../__tests__/route-matching-test.tsx         |  18 +-
 .../__tests__/useNavigate-test.tsx            |   2 +-
 .../react-router/__tests__/useOutlet-test.tsx |   6 +-
 .../__tests__/useResolvedPath-test.tsx        |   2 +-
 .../react-router/__tests__/useRoutes-test.tsx |  14 +-
 packages/react-router/index.tsx               |  54 ++---
 packages/react-router/jest-transformer.js     |   4 +-
 packages/react-router/jest.config.js          |   6 +-
 prettier.config.js                            |   5 +-
 rollup.config.js                              | 220 +++++++++---------
 scripts/publish.js                            |   2 +-
 scripts/version.js                            |  12 +-
 tutorial/src/data.js                          |  16 +-
 tutorial/vite.config.js                       |  12 +-
 yarn.lock                                     |   8 +-
 76 files changed, 589 insertions(+), 590 deletions(-)

diff --git a/FAQ.md b/FAQ.md
index 7c598e3cb5..3c6a46c616 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -120,7 +120,7 @@ const App = () => {
   return (
     <Route
       path="/somewhere"
-      render={props => <MyComponent {...props} color={color} />}
+      render={(props) => <MyComponent {...props} color={color} />}
     />
   );
 };
diff --git a/docs/api.md b/docs/api.md
index 833c212cfa..79b39a0064 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -214,7 +214,7 @@ import { create } from "react-test-renderer";
 import {
   MemoryRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 
 describe("My app", () => {
@@ -313,7 +313,7 @@ function UsersIndexPage({ users }) {
     <div>
       <h1>Users</h1>
       <ul>
-        {users.map(user => (
+        {users.map((user) => (
           <li key={user.id}>
             <Link to={user.id}>{user.name}</Link>
           </li>
@@ -481,14 +481,14 @@ const NavLink = React.forwardRef(
         className={({ isActive }) =>
           [
             props.className,
-            isActive ? activeClassName : null
+            isActive ? activeClassName : null,
           ]
             .filter(Boolean)
             .join(" ")
         }
         style={({ isActive }) => ({
           ...props.style,
-          ...(isActive ? activeStyle : null)
+          ...(isActive ? activeStyle : null),
         })}
       />
     );
@@ -554,7 +554,9 @@ class LoginForm extends React.Component {
         {user && (
           <Navigate to="/dashboard" replace={true} />
         )}
-        <form onSubmit={event => this.handleSubmit(event)}>
+        <form
+          onSubmit={(event) => this.handleSubmit(event)}
+        >
           <input type="text" name="username" />
           <input type="password" name="password" />
         </form>
@@ -638,7 +640,7 @@ import { useOutletContext } from "react-router-dom";
 
 function Child() {
   const [count, setCount] = useOutletContext();
-  const increment = () => setCount(c => c + 1);
+  const increment = () => setCount((c) => c + 1);
   return <button onClick={increment}>{count}</button>;
 }
 ```
@@ -862,7 +864,7 @@ declare function generatePath(
 generatePath("/users/:id", { id: 42 }); // "/users/42"
 generatePath("/files/:type/*", {
   type: "img",
-  "*": "cat.jpg"
+  "*": "cat.jpg",
 }); // "/files/img/cat.jpg"
 ```
 
@@ -1019,7 +1021,7 @@ The `useLinkClickHandler` hook returns a click event handler to for navigation w
 ```tsx
 import {
   useHref,
-  useLinkClickHandler
+  useLinkClickHandler,
 } from "react-router-dom";
 
 const StyledLink = styled("a", { color: "fuchsia" });
@@ -1040,14 +1042,14 @@ const Link = React.forwardRef(
     let handleClick = useLinkClickHandler(to, {
       replace,
       state,
-      target
+      target,
     });
 
     return (
       <StyledLink
         {...rest}
         href={href}
-        onClick={event => {
+        onClick={(event) => {
           onClick?.(event);
           if (!event.defaultPrevented) {
             handleClick(event);
@@ -1093,13 +1095,13 @@ function Link({
 }) {
   let handlePress = useLinkPressHandler(to, {
     replace,
-    state
+    state,
   });
 
   return (
     <TouchableHighlight
       {...rest}
-      onPress={event => {
+      onPress={(event) => {
         onPress?.(event);
         if (!event.defaultPrevented) {
           handlePress(event);
@@ -1329,12 +1331,12 @@ function App() {
       children: [
         {
           path: "messages",
-          element: <DashboardMessages />
+          element: <DashboardMessages />,
         },
-        { path: "tasks", element: <DashboardTasks /> }
-      ]
+        { path: "tasks", element: <DashboardTasks /> },
+      ],
     },
-    { path: "team", element: <AboutPage /> }
+    { path: "team", element: <AboutPage /> },
   ]);
 
   return element;
diff --git a/docs/faq.md b/docs/faq.md
index dea01feba5..50f3927630 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -15,7 +15,7 @@ This question usually stems from the fact that you're using React class componen
 import {
   useLocation,
   useNavigate,
-  useParams
+  useParams,
 } from "react-router-dom";
 
 function withRouter(Component) {
@@ -406,7 +406,7 @@ export async function loader({ params }) {
   }
 
   let user = await fakeDb.user.find({
-    where: { id: params.id }
+    where: { id: params.id },
   });
   if (!user) {
     throw new Response("", { status: 404 });
diff --git a/docs/getting-started/concepts.md b/docs/getting-started/concepts.md
index f7f0686bae..5b810304d9 100644
--- a/docs/getting-started/concepts.md
+++ b/docs/getting-started/concepts.md
@@ -100,7 +100,7 @@ With **client side routing**, developers are able to manipulate the browser [his
 ```jsx
 <a
   href="/contact"
-  onClick={event => {
+  onClick={(event) => {
     // stop the browser from changing the URL and requesting the new document
     event.preventDefault();
     // push an entry into the browser history stack and change the URL
@@ -191,7 +191,7 @@ let location = {
   search: "?campaign=instagram&popular=true",
   hash: "",
   state: null,
-  key: "aefz24ie"
+  key: "aefz24ie",
 };
 
 // we can turn the location.search into URLSearchParams
@@ -279,8 +279,8 @@ function useFakeFetch(URL) {
     if (state === "loading") {
       let controller = new AbortController();
       fetch(URL, { signal: controller.signal })
-        .then(res => res.json())
-        .then(data => {
+        .then((res) => res.json())
+        .then((data) => {
           if (controller.aborted) return;
           // set the cache
           cache.set(cacheKey, data);
@@ -335,7 +335,7 @@ let routes = [
     children: [
       {
         index: true,
-        element: <Home />
+        element: <Home />,
       },
       {
         path: "teams",
@@ -343,41 +343,41 @@ let routes = [
         children: [
           {
             index: true,
-            element: <LeagueStandings />
+            element: <LeagueStandings />,
           },
           {
             path: ":teamId",
-            element: <Team />
+            element: <Team />,
           },
           {
             path: ":teamId/edit",
-            element: <EditTeam />
+            element: <EditTeam />,
           },
           {
             path: "new",
-            element: <NewTeamForm />
-          }
-        ]
-      }
-    ]
+            element: <NewTeamForm />,
+          },
+        ],
+      },
+    ],
   },
   {
     element: <PageLayout />,
     children: [
       {
         element: <Privacy />,
-        path: "/privacy"
+        path: "/privacy",
       },
       {
         element: <Tos />,
-        path: "/tos"
-      }
-    ]
+        path: "/tos",
+      },
+    ],
   },
   {
     element: <Contact />,
-    path: "/contact-us"
-  }
+    path: "/contact-us",
+  },
 ];
 ```
 
@@ -402,7 +402,7 @@ If we add up all the segments of all the branches of our [route config](#route-c
   "/teams/new",
   "/privacy",
   "/tos",
-  "/contact-us"
+  "/contact-us",
 ];
 ```
 
@@ -480,27 +480,27 @@ React Router will create an array of [matches](#match) from these routes and the
     params: null,
     route: {
       element: <App />,
-      path: "/"
-    }
+      path: "/",
+    },
   },
   {
     pathname: "/teams",
     params: null,
     route: {
       element: <Teams />,
-      path: "teams"
-    }
+      path: "teams",
+    },
   },
   {
     pathname: "/teams/firebirds",
     params: {
-      teamId: "firebirds"
+      teamId: "firebirds",
     },
     route: {
       element: <Team />,
-      path: ":teamId"
-    }
-  }
+      path: ":teamId",
+    },
+  },
 ];
 ```
 
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 05d5b8c741..a08c1b211e 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -245,7 +245,7 @@ Once you have webpack configured and the necessary dependencies installed, somew
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 
 function App() {
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index cd86861f71..14e6f18b3d 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -24,7 +24,7 @@ import { render } from "react-dom";
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 // import your route components too
 
@@ -82,7 +82,7 @@ function Invoices() {
   return (
     <div>
       <NewInvoiceForm
-        onSubmit={async event => {
+        onSubmit={async (event) => {
           let newInvoice = await createInvoice(
             event.target
           );
@@ -225,7 +225,7 @@ import {
   Routes,
   Route,
   Link,
-  Outlet
+  Outlet,
 } from "react-router-dom";
 
 function App() {
@@ -339,7 +339,7 @@ import {
   Routes,
   Route,
   Link,
-  Outlet
+  Outlet,
 } from "react-router-dom";
 
 function Home() {
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index fc551e23ba..08b983d2b8 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -124,7 +124,7 @@ export default function App() {
       <nav
         style={{
           borderBottom: "solid 1px",
-          paddingBottom: "1rem"
+          paddingBottom: "1rem",
         }}
       >
         <Link to="/invoices">Invoices</Link> |{" "}
@@ -177,7 +177,7 @@ import { render } from "react-dom";
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 import App from "./App";
 import Expenses from "./routes/expenses";
@@ -216,7 +216,7 @@ import { render } from "react-dom";
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 import App from "./App";
 import Expenses from "./routes/expenses";
@@ -253,7 +253,7 @@ export default function App() {
       <nav
         style={{
           borderBottom: "solid 1px",
-          paddingBottom: "1rem"
+          paddingBottom: "1rem",
         }}
       >
         <Link to="/invoices">Invoices</Link> |{" "}
@@ -281,32 +281,32 @@ let invoices = [
     name: "Santa Monica",
     number: 1995,
     amount: "$10,800",
-    due: "12/05/1995"
+    due: "12/05/1995",
   },
   {
     name: "Stankonia",
     number: 2000,
     amount: "$8,000",
-    due: "10/31/2000"
+    due: "10/31/2000",
   },
   {
     name: "Ocean Avenue",
     number: 2003,
     amount: "$9,500",
-    due: "07/22/2003"
+    due: "07/22/2003",
   },
   {
     name: "Tubthumper",
     number: 1997,
     amount: "$14,000",
-    due: "09/01/1997"
+    due: "09/01/1997",
   },
   {
     name: "Wide Open Spaces",
     number: 1998,
     amount: "$4,600",
-    due: "01/27/1998"
-  }
+    due: "01/27/1998",
+  },
 ];
 
 export function getInvoices() {
@@ -327,10 +327,10 @@ export default function Invoices() {
       <nav
         style={{
           borderRight: "solid 1px",
-          padding: "1rem"
+          padding: "1rem",
         }}
       >
-        {invoices.map(invoice => (
+        {invoices.map((invoice) => (
           <Link
             style={{ display: "block", margin: "1rem 0" }}
             to={`/invoices/${invoice.number}`}
@@ -429,10 +429,10 @@ export default function Invoices() {
       <nav
         style={{
           borderRight: "solid 1px",
-          padding: "1rem"
+          padding: "1rem",
         }}
       >
-        {invoices.map(invoice => (
+        {invoices.map((invoice) => (
           <Link
             style={{ display: "block", margin: "1rem 0" }}
             to={`/invoices/${invoice.number}`}
@@ -476,7 +476,7 @@ export function getInvoices() {
 
 export function getInvoice(number) {
   return invoices.find(
-    invoice => invoice.number === number
+    (invoice) => invoice.number === number
   );
 }
 ```
@@ -563,16 +563,16 @@ export default function Invoices() {
       <nav
         style={{
           borderRight: "solid 1px",
-          padding: "1rem"
+          padding: "1rem",
         }}
       >
-        {invoices.map(invoice => (
+        {invoices.map((invoice) => (
           <NavLink
             style={({ isActive }) => {
               return {
                 display: "block",
                 margin: "1rem 0",
-                color: isActive ? "red" : ""
+                color: isActive ? "red" : "",
               };
             }}
             to={`/invoices/${invoice.number}`}
@@ -616,7 +616,7 @@ Let's see it in action by adding a little filter on the invoices nav list.
 import {
   NavLink,
   Outlet,
-  useSearchParams
+  useSearchParams,
 } from "react-router-dom";
 import { getInvoices } from "../data";
 
@@ -629,12 +629,12 @@ export default function Invoices() {
       <nav
         style={{
           borderRight: "solid 1px",
-          padding: "1rem"
+          padding: "1rem",
         }}
       >
         <input
           value={searchParams.get("filter") || ""}
-          onChange={event => {
+          onChange={(event) => {
             let filter = event.target.value;
             if (filter) {
               setSearchParams({ filter });
@@ -644,18 +644,18 @@ export default function Invoices() {
           }}
         />
         {invoices
-          .filter(invoice => {
+          .filter((invoice) => {
             let filter = searchParams.get("filter");
             if (!filter) return true;
             let name = invoice.name.toLowerCase();
             return name.startsWith(filter.toLowerCase());
           })
-          .map(invoice => (
+          .map((invoice) => (
             <NavLink
               style={({ isActive }) => ({
                 display: "block",
                 margin: "1rem 0",
-                color: isActive ? "red" : ""
+                color: isActive ? "red" : "",
               })}
               to={`/invoices/${invoice.number}`}
               key={invoice.number}
@@ -799,7 +799,7 @@ First you can copy and paste this function that deletes an invoice from our fake
 ```js filename=src/data.js
 export function deleteInvoice(number) {
   invoices = invoices.filter(
-    invoice => invoice.number !== number
+    (invoice) => invoice.number !== number
   );
 }
 ```
diff --git a/docs/prettier.config.js b/docs/prettier.config.js
index c0a7dd9d40..0b8c6ae987 100644
--- a/docs/prettier.config.js
+++ b/docs/prettier.config.js
@@ -3,5 +3,5 @@
  */
 module.exports = {
   ...require("../prettier.config"),
-  printWidth: 60
+  printWidth: 60,
 };
diff --git a/docs/upgrading/reach.md b/docs/upgrading/reach.md
index 6f033918dc..26fb1be0a8 100644
--- a/docs/upgrading/reach.md
+++ b/docs/upgrading/reach.md
@@ -95,7 +95,7 @@ function User(props) {
 
     // as well as location and navigate
     location,
-    navigate
+    navigate,
   } = props;
 
   // ...
@@ -105,7 +105,7 @@ function User(props) {
 import {
   useParams,
   useLocation,
-  useNavigate
+  useNavigate,
 } from "@reach/router";
 
 function User() {
@@ -329,12 +329,12 @@ function SomeCustomLink() {
   return (
     <Link
       to="/some/where/cool"
-      getProps={obj => {
+      getProps={(obj) => {
         let {
           isCurrent,
           isPartiallyCurrent,
           href,
-          location
+          location,
         } = obj;
         // do what you will
       }}
@@ -432,7 +432,7 @@ let {
   path,
 
   // params are merged into the object with uri and path
-  eventId
+  eventId,
 } = useMatch("/events/:eventId");
 
 // React Router v6
@@ -441,7 +441,7 @@ let {
   path,
 
   // params get their own key on the match
-  params: { eventId }
+  params: { eventId },
 } = useMatch("/events/:eventId");
 ```
 
diff --git a/docs/upgrading/v5.md b/docs/upgrading/v5.md
index 6c66ffe615..1724296e28 100644
--- a/docs/upgrading/v5.md
+++ b/docs/upgrading/v5.md
@@ -178,7 +178,7 @@ import {
   Switch,
   Route,
   Link,
-  useRouteMatch
+  useRouteMatch,
 } from "react-router-dom";
 
 function App() {
@@ -229,7 +229,7 @@ import {
   BrowserRouter,
   Routes,
   Route,
-  Link
+  Link,
 } from "react-router-dom";
 
 function App() {
@@ -361,7 +361,7 @@ import {
   Routes,
   Route,
   Link,
-  Outlet
+  Outlet,
 } from "react-router-dom";
 
 function App() {
@@ -461,7 +461,7 @@ function Users() {
       </h2>
 
       <ul>
-        {users.map(user => (
+        {users.map((user) => (
           <li>
             {/* This links to /users/:id - the child route */}
             <Link to={user.id}>{user.name}</Link>
@@ -579,11 +579,11 @@ function App() {
       // the same as <Route>
       children: [
         { path: ":id", element: <Invoice /> },
-        { path: "sent", element: <SentInvoices /> }
-      ]
+        { path: "sent", element: <SentInvoices /> },
+      ],
     },
     // Not found routes work as you'd expect
-    { path: "*", element: <NotFound /> }
+    { path: "*", element: <NotFound /> },
   ]);
 
   // The returned element will render the entire element
@@ -734,7 +734,7 @@ function SomeForm() {
   let navigate = useNavigate();
   return (
     <form
-      onSubmit={async event => {
+      onSubmit={async (event) => {
         let newRecord = await saveDataFromForm(
           event.target
         );
@@ -762,7 +762,7 @@ That being said, maybe your app uses a CSS-in-JS library, or maybe you have a cu
 import { FancyPantsLink } from "@fancy-pants/design-system";
 import {
   useHref,
-  useLinkClickHandler
+  useLinkClickHandler,
 } from "react-router-dom";
 
 const Link = React.forwardRef(
@@ -781,14 +781,14 @@ const Link = React.forwardRef(
     let handleClick = useLinkClickHandler(to, {
       replace,
       state,
-      target
+      target,
     });
 
     return (
       <FancyPantsLink
         {...rest}
         href={href}
-        onClick={event => {
+        onClick={(event) => {
           onClick?.(event);
           if (!event.defaultPrevented) {
             handleClick(event);
@@ -849,14 +849,14 @@ const NavLink = React.forwardRef(
         className={({ isActive }) =>
           [
             props.className,
-            isActive ? activeClassName : null
+            isActive ? activeClassName : null,
           ]
             .filter(Boolean)
             .join(" ")
         }
         style={({ isActive }) => ({
           ...props.style,
-          ...(isActive ? activeStyle : null)
+          ...(isActive ? activeStyle : null),
         })}
       />
     );
diff --git a/examples/auth/src/App.tsx b/examples/auth/src/App.tsx
index ad277f6327..49d949d19e 100644
--- a/examples/auth/src/App.tsx
+++ b/examples/auth/src/App.tsx
@@ -6,7 +6,7 @@ import {
   useNavigate,
   useLocation,
   Navigate,
-  Outlet
+  Outlet,
 } from "react-router-dom";
 import { fakeAuthProvider } from "./auth";
 
diff --git a/examples/auth/src/auth.ts b/examples/auth/src/auth.ts
index a3b4d4a294..87b042c078 100644
--- a/examples/auth/src/auth.ts
+++ b/examples/auth/src/auth.ts
@@ -10,7 +10,7 @@ const fakeAuthProvider = {
   signout(callback: VoidFunction) {
     fakeAuthProvider.isAuthenticated = false;
     setTimeout(callback, 100);
-  }
+  },
 };
 
 export { fakeAuthProvider };
diff --git a/examples/auth/vite.config.ts b/examples/auth/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/auth/vite.config.ts
+++ b/examples/auth/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/basic/vite.config.ts
+++ b/examples/basic/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/custom-filter-link/src/App.tsx b/examples/custom-filter-link/src/App.tsx
index 24ef36ca4e..b53c53dbaa 100644
--- a/examples/custom-filter-link/src/App.tsx
+++ b/examples/custom-filter-link/src/App.tsx
@@ -5,7 +5,7 @@ import {
   Outlet,
   Link,
   useSearchParams,
-  useParams
+  useParams,
 } from "react-router-dom";
 import type { LinkProps } from "react-router-dom";
 import VisuallyHidden from "@reach/visually-hidden";
@@ -50,7 +50,7 @@ function BrandLink({ brand, children, ...props }: BrandLinkProps) {
       {...props}
       style={{
         ...props.style,
-        color: isActive ? "red" : "black"
+        color: isActive ? "red" : "black",
       }}
     >
       {children}
@@ -67,7 +67,7 @@ function Layout() {
           <li>
             <Link to="/">All</Link>
           </li>
-          {brands.map(brand => (
+          {brands.map((brand) => (
             <li key={brand}>
               <BrandLink brand={brand}>{brand}</BrandLink>
             </li>
@@ -99,10 +99,10 @@ function SneakerGrid() {
         style={{
           display: "grid",
           gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
-          gap: "12px 24px"
+          gap: "12px 24px",
         }}
       >
-        {sneakers.map(snkr => {
+        {sneakers.map((snkr) => {
           let name = `${snkr.brand} ${snkr.model} ${snkr.colorway}`;
           return (
             <div key={snkr.id} style={{ position: "relative" }}>
@@ -115,7 +115,7 @@ function SneakerGrid() {
                   borderRadius: "8px",
                   width: "100%",
                   height: "auto",
-                  aspectRatio: "1 / 1"
+                  aspectRatio: "1 / 1",
                 }}
               />
               <Link
@@ -159,7 +159,7 @@ function SneakerView() {
         style={{
           borderRadius: "8px",
           maxWidth: "100%",
-          aspectRatio: "1 / 1"
+          aspectRatio: "1 / 1",
         }}
         src={snkr.imageUrl}
         alt={name}
diff --git a/examples/custom-filter-link/src/snkrs.ts b/examples/custom-filter-link/src/snkrs.ts
index 283b59c909..61889f070a 100644
--- a/examples/custom-filter-link/src/snkrs.ts
+++ b/examples/custom-filter-link/src/snkrs.ts
@@ -13,7 +13,7 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/bkkj0lqzlwlwdwtofqxs",
     model: "Blazer Low 77 Vintage",
-    brand: "Nike"
+    brand: "Nike",
   },
   {
     id: "2",
@@ -21,7 +21,7 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/RPlzC_CBHjiMM4dr90gdU",
     model: "Air Max 90",
-    brand: "Nike"
+    brand: "Nike",
   },
   {
     id: "3",
@@ -29,7 +29,7 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/0bf9336b-03c9-4cbd-b482-f4e80b770582",
     model: "Court Legacy",
-    brand: "Nike"
+    brand: "Nike",
   },
   {
     id: "5",
@@ -37,7 +37,7 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/irxakb1ij0uzmcvn9szo",
     model: "Yeezy 350 v2",
-    brand: "Adidas"
+    brand: "Adidas",
   },
   {
     id: "6",
@@ -45,7 +45,7 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/g9tjjjdn476nhou1c1dj",
     model: "Grid SD",
-    brand: "Saucony"
+    brand: "Saucony",
   },
   {
     id: "7",
@@ -53,7 +53,7 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/erg1lxa8x29h1wtbog9a",
     model: "Checkerboard Slip-On",
-    brand: "Vans"
+    brand: "Vans",
   },
   {
     id: "8",
@@ -61,20 +61,20 @@ let SNEAKERS: Sneaker[] = [
     imageUrl:
       "https://images.mcan.sh/b_auto,c_pad,f_auto,h_400,q_auto,w_400/v1/shoes/u4z27k4wyzr7bxatlfgj",
     model: "Air Max 1",
-    brand: "Nike"
-  }
+    brand: "Nike",
+  },
 ];
 
 function filterByBrand(brand: string) {
   return SNEAKERS.filter(
-    sneaker => sneaker.brand.toLowerCase() === brand.toLowerCase()
+    (sneaker) => sneaker.brand.toLowerCase() === brand.toLowerCase()
   );
 }
 
 function getSneakerById(id: string) {
-  return SNEAKERS.find(sneaker => sneaker.id === id);
+  return SNEAKERS.find((sneaker) => sneaker.id === id);
 }
 
-let brands = [...new Set(SNEAKERS.map(sneaker => sneaker.brand))];
+let brands = [...new Set(SNEAKERS.map((sneaker) => sneaker.brand))];
 
 export { brands, SNEAKERS, filterByBrand, getSneakerById };
diff --git a/examples/custom-filter-link/vite.config.ts b/examples/custom-filter-link/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/custom-filter-link/vite.config.ts
+++ b/examples/custom-filter-link/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/custom-link/src/App.tsx b/examples/custom-link/src/App.tsx
index f610bdf3c2..aee8e0bf1d 100644
--- a/examples/custom-link/src/App.tsx
+++ b/examples/custom-link/src/App.tsx
@@ -5,7 +5,7 @@ import {
   Outlet,
   Link,
   useMatch,
-  useResolvedPath
+  useResolvedPath,
 } from "react-router-dom";
 import type { LinkProps } from "react-router-dom";
 
diff --git a/examples/custom-link/vite.config.ts b/examples/custom-link/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/custom-link/vite.config.ts
+++ b/examples/custom-link/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/custom-query-parsing/src/App.tsx b/examples/custom-query-parsing/src/App.tsx
index 56cf8c5f41..f8ed4c2d98 100644
--- a/examples/custom-query-parsing/src/App.tsx
+++ b/examples/custom-query-parsing/src/App.tsx
@@ -83,7 +83,7 @@ function Home() {
     let pizza: Pizza = {
       toppings: formData.getAll("toppings") as string[],
       crust: formData.get("crust") as string,
-      extraSauce: formData.get("extraSauce") === "on"
+      extraSauce: formData.get("extraSauce") === "on",
     };
 
     setPizza(pizza, { replace: true });
diff --git a/examples/custom-query-parsing/vite.config.ts b/examples/custom-query-parsing/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/custom-query-parsing/vite.config.ts
+++ b/examples/custom-query-parsing/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/lazy-loading/vite.config.ts b/examples/lazy-loading/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/lazy-loading/vite.config.ts
+++ b/examples/lazy-loading/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/modal/src/App.tsx b/examples/modal/src/App.tsx
index 67423d8b75..50aece0aa0 100644
--- a/examples/modal/src/App.tsx
+++ b/examples/modal/src/App.tsx
@@ -6,7 +6,7 @@ import {
   Link,
   useLocation,
   useNavigate,
-  useParams
+  useParams,
 } from "react-router-dom";
 import { Dialog } from "@reach/dialog";
 import "@reach/dialog/styles.css";
@@ -121,10 +121,10 @@ function Gallery() {
         style={{
           display: "grid",
           gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-          gap: "24px"
+          gap: "24px",
         }}
       >
-        {IMAGES.map(image => (
+        {IMAGES.map((image) => (
           <Link
             key={image.id}
             to={`/img/${image.id}`}
@@ -140,7 +140,7 @@ function Gallery() {
                 width: "100%",
                 aspectRatio: "1 / 1",
                 height: "auto",
-                borderRadius: "8px"
+                borderRadius: "8px",
               }}
               src={image.src}
               alt={image.title}
@@ -188,7 +188,7 @@ function Modal() {
         style={{
           display: "grid",
           justifyContent: "center",
-          padding: "8px 8px"
+          padding: "8px 8px",
         }}
       >
         <h1 id="label" style={{ margin: 0 }}>
@@ -199,7 +199,7 @@ function Modal() {
             margin: "16px 0",
             borderRadius: "8px",
             width: "100%",
-            height: "auto"
+            height: "auto",
           }}
           width={400}
           height={400}
diff --git a/examples/modal/src/images.ts b/examples/modal/src/images.ts
index 2036859628..0bf8957c65 100644
--- a/examples/modal/src/images.ts
+++ b/examples/modal/src/images.ts
@@ -2,27 +2,27 @@ let IMAGES = [
   {
     id: 0,
     title: "Enjoying a cup of coffee",
-    src: "https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2Mzg4Ng&ixlib=rb-1.2.1&q=80&w=400"
+    src: "https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2Mzg4Ng&ixlib=rb-1.2.1&q=80&w=400",
   },
   {
     id: 1,
     title: "Magical winter sunrise",
-    src: "https://images.unsplash.com/photo-1618824834718-92f8469a4dd1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDAzMw&ixlib=rb-1.2.1&q=80&w=400"
+    src: "https://images.unsplash.com/photo-1618824834718-92f8469a4dd1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDAzMw&ixlib=rb-1.2.1&q=80&w=400",
   },
   {
     id: 2,
     title: "Dalmatian and pumpkins",
-    src: "https://images.unsplash.com/photo-1633289944756-6295be214e16?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDA3Nw&ixlib=rb-1.2.1&q=80&w=400"
+    src: "https://images.unsplash.com/photo-1633289944756-6295be214e16?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDA3Nw&ixlib=rb-1.2.1&q=80&w=400",
   },
   {
     id: 3,
     title: "Fall into Autumn 🍂🐶",
-    src: "https://images.unsplash.com/photo-1633172905740-2eb6730c95b4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDEwMg&ixlib=rb-1.2.1&q=80&w=400"
-  }
+    src: "https://images.unsplash.com/photo-1633172905740-2eb6730c95b4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDEwMg&ixlib=rb-1.2.1&q=80&w=400",
+  },
 ];
 
 function getImageById(id: number) {
-  return IMAGES.find(image => image.id === id);
+  return IMAGES.find((image) => image.id === id);
 }
 
 export { IMAGES, getImageById };
diff --git a/examples/modal/vite.config.ts b/examples/modal/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/modal/vite.config.ts
+++ b/examples/modal/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/multi-app/inbox/App.jsx b/examples/multi-app/inbox/App.jsx
index d0eb572600..f11a48fb0a 100644
--- a/examples/multi-app/inbox/App.jsx
+++ b/examples/multi-app/inbox/App.jsx
@@ -52,7 +52,7 @@ function Inbox() {
   return (
     <div>
       <div style={{ maxWidth: 800, margin: "0 auto" }}>
-        {messages.map(message => (
+        {messages.map((message) => (
           <Link
             to={message.id}
             key={message.id}
@@ -62,13 +62,13 @@ function Inbox() {
               padding: "10px",
               width: "100%",
               textDecoration: "none",
-              color: "#000"
+              color: "#000",
             }}
           >
             <span
               style={{
                 flexBasis: 100,
-                marginRight: "1rem"
+                marginRight: "1rem",
               }}
             >
               {message.from.name}
@@ -80,7 +80,7 @@ function Inbox() {
                 width: "100%",
                 whiteSpace: "nowrap",
                 overflow: "hidden",
-                marginRight: "1rem"
+                marginRight: "1rem",
               }}
             >
               <span>{message.subject}</span>
diff --git a/examples/multi-app/inbox/messages.js b/examples/multi-app/inbox/messages.js
index b4a83102c5..b98db86d24 100644
--- a/examples/multi-app/inbox/messages.js
+++ b/examples/multi-app/inbox/messages.js
@@ -21,44 +21,44 @@ let messages = [
     id: "1",
     from: {
       name: "GitHub",
-      email: "noreply@github.com"
+      email: "noreply@github.com",
     },
     to: {
       name: "Logan McAnsh",
-      email: "logan@remix.run"
+      email: "logan@remix.run",
     },
     subject: "[GitHub] A personal access token has been added to your account",
     body: "Hey mcansh!\n\nA personal access token.....................",
-    date: "2021-10-12T15:30:33.566Z"
+    date: "2021-10-12T15:30:33.566Z",
   },
   {
     id: "2",
     from: {
       name: "Remix",
-      email: "news@github.com"
+      email: "news@github.com",
     },
     to: {
       name: "Logan McAnsh",
-      email: "logan@remix.run"
+      email: "logan@remix.run",
     },
     subject: "Remix Goes Open Source, Raises Seed Funding",
     body: "Thanks for following our journey as we built Remix",
-    date: "2021-10-11T19:26:00.000Z"
+    date: "2021-10-11T19:26:00.000Z",
   },
   {
     id: "3",
     from: {
       name: "GitHub",
-      email: "noreply@github.com"
+      email: "noreply@github.com",
     },
     to: {
       name: "Logan McAnsh",
-      email: "logan@remix.run"
+      email: "logan@remix.run",
     },
     subject: "[GitHub] Payment Receipt for mcansh",
     body: "We received payment for your GitHub.com subscription. Thanks for your business!",
-    date: "2021-10-05T15:30:33.566Z"
-  }
+    date: "2021-10-05T15:30:33.566Z",
+  },
 ];
 
 /**
@@ -67,7 +67,7 @@ let messages = [
  * @returns {Message | undefined}
  */
 function getMessageById(id) {
-  return messages.find(message => message.id === id);
+  return messages.find((message) => message.id === id);
 }
 
 export { messages, getMessageById };
diff --git a/examples/multi-app/server.js b/examples/multi-app/server.js
index fa776bb5e1..acc99e5525 100644
--- a/examples/multi-app/server.js
+++ b/examples/multi-app/server.js
@@ -14,7 +14,7 @@ async function createServer() {
   if (!isProduction) {
     vite = await require("vite").createServer({
       root: process.cwd(),
-      server: { middlewareMode: "ssr" }
+      server: { middlewareMode: "ssr" },
     });
 
     app.use(vite.middlewares);
@@ -58,7 +58,7 @@ async function createServer() {
   return app;
 }
 
-createServer().then(app => {
+createServer().then((app) => {
   app.listen(3000, () => {
     console.log("HTTP server is running at http://localhost:3000");
   });
diff --git a/examples/multi-app/vite.config.js b/examples/multi-app/vite.config.js
index 5f77fc4e31..acd1229c4d 100644
--- a/examples/multi-app/vite.config.js
+++ b/examples/multi-app/vite.config.js
@@ -10,19 +10,19 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   build: {
     rollupOptions: {
       // Build two separate bundles, one for each app.
       input: {
         main: path.resolve(__dirname, "index.html"),
-        inbox: path.resolve(__dirname, "inbox/index.html")
-      }
-    }
+        inbox: path.resolve(__dirname, "inbox/index.html"),
+      },
+    },
   },
   resolve: process.env.USE_SOURCE
     ? {
@@ -34,8 +34,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/route-objects/src/App.tsx b/examples/route-objects/src/App.tsx
index 455cbe17ae..ea7a18661a 100644
--- a/examples/route-objects/src/App.tsx
+++ b/examples/route-objects/src/App.tsx
@@ -14,12 +14,12 @@ export default function App() {
           element: <Courses />,
           children: [
             { index: true, element: <CoursesIndex /> },
-            { path: "/courses/:id", element: <Course /> }
-          ]
+            { path: "/courses/:id", element: <Course /> },
+          ],
         },
-        { path: "*", element: <NoMatch /> }
-      ]
-    }
+        { path: "*", element: <NoMatch /> },
+      ],
+    },
   ];
 
   // The useRoutes() hook allows you to define your routes as JavaScript objects
diff --git a/examples/route-objects/vite.config.ts b/examples/route-objects/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/route-objects/vite.config.ts
+++ b/examples/route-objects/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/search-params/src/App.tsx b/examples/search-params/src/App.tsx
index 8f4d9e17e0..04a4eb69a9 100644
--- a/examples/search-params/src/App.tsx
+++ b/examples/search-params/src/App.tsx
@@ -40,7 +40,7 @@ function Home() {
 
     async function getGitHubUser() {
       let response = await fetch(`https://api.github.com/users/${user}`, {
-        signal: abortController.signal
+        signal: abortController.signal,
       });
       if (!abortController.signal.aborted) {
         let data = await response.json();
@@ -99,7 +99,7 @@ function Home() {
             borderTop: "1px solid #eaeaea",
             display: "flex",
             alignItems: "center",
-            gap: "16px"
+            gap: "16px",
           }}
         >
           <img
diff --git a/examples/search-params/vite.config.ts b/examples/search-params/vite.config.ts
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/search-params/vite.config.ts
+++ b/examples/search-params/vite.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
index d1dbf9f14f..c131d0df3f 100644
--- a/examples/ssr/server.js
+++ b/examples/ssr/server.js
@@ -19,7 +19,7 @@ async function createServer() {
   if (!isProduction) {
     vite = await require("vite").createServer({
       root,
-      server: { middlewareMode: "ssr" }
+      server: { middlewareMode: "ssr" },
     });
 
     app.use(vite.middlewares);
@@ -40,7 +40,7 @@ async function createServer() {
         template = await vite.transformIndexHtml(url, template);
         render = await vite
           .ssrLoadModule("src/entry.server.tsx")
-          .then(m => m.render);
+          .then((m) => m.render);
       } else {
         template = await fsp.readFile(
           resolve("dist/client/index.html"),
@@ -64,7 +64,7 @@ async function createServer() {
   return app;
 }
 
-createServer().then(app => {
+createServer().then((app) => {
   app.listen(3000, () => {
     console.log("HTTP server is running at http://localhost:3000");
   });
diff --git a/examples/ssr/vite.config.js b/examples/ssr/vite.config.js
index aaf3acc427..5c4d1cdd51 100644
--- a/examples/ssr/vite.config.js
+++ b/examples/ssr/vite.config.js
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/package.json b/package.json
index 7ee13d1ef6..114460c1d4 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "jsonfile": "^6.1.0",
     "metro-react-native-babel-preset": "^0.57.0",
     "node-fetch": "^2.6.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "prompt-confirm": "^2.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/packages/react-router-dom/__tests__/link-click-test.tsx b/packages/react-router-dom/__tests__/link-click-test.tsx
index 0b4878895d..e5d9f8bfae 100644
--- a/packages/react-router-dom/__tests__/link-click-test.tsx
+++ b/packages/react-router-dom/__tests__/link-click-test.tsx
@@ -8,7 +8,7 @@ function click(anchor: HTMLAnchorElement, eventInit?: MouseEventInit) {
     view: window,
     bubbles: true,
     cancelable: true,
-    ...eventInit
+    ...eventInit,
   });
   anchor.dispatchEvent(event);
   return event;
diff --git a/packages/react-router-dom/__tests__/link-push-test.tsx b/packages/react-router-dom/__tests__/link-push-test.tsx
index b1e0d5ec22..564ee9e8b2 100644
--- a/packages/react-router-dom/__tests__/link-push-test.tsx
+++ b/packages/react-router-dom/__tests__/link-push-test.tsx
@@ -5,7 +5,7 @@ import {
   Routes,
   Route,
   Link,
-  useNavigationType
+  useNavigationType,
 } from "react-router-dom";
 
 function ShowNavigationType() {
@@ -43,7 +43,7 @@ describe("Link push and replace", () => {
           new MouseEvent("click", {
             view: window,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
           })
         );
       });
@@ -86,7 +86,7 @@ describe("Link push and replace", () => {
           new MouseEvent("click", {
             view: window,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
           })
         );
       });
@@ -140,7 +140,7 @@ describe("Link push and replace", () => {
           new MouseEvent("click", {
             view: window,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
           })
         );
       });
@@ -199,7 +199,7 @@ describe("Link push and replace", () => {
           new MouseEvent("click", {
             view: window,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
           })
         );
       });
diff --git a/packages/react-router-dom/__tests__/navigate-encode-params-test.tsx b/packages/react-router-dom/__tests__/navigate-encode-params-test.tsx
index 000b9c97fb..79a56a1236 100644
--- a/packages/react-router-dom/__tests__/navigate-encode-params-test.tsx
+++ b/packages/react-router-dom/__tests__/navigate-encode-params-test.tsx
@@ -6,7 +6,7 @@ import {
   Routes,
   Route,
   useNavigate,
-  useParams
+  useParams,
 } from "react-router-dom";
 
 describe("navigate with params", () => {
diff --git a/packages/react-router-dom/__tests__/static-location-test.tsx b/packages/react-router-dom/__tests__/static-location-test.tsx
index f712759a87..d8186e4a49 100644
--- a/packages/react-router-dom/__tests__/static-location-test.tsx
+++ b/packages/react-router-dom/__tests__/static-location-test.tsx
@@ -25,7 +25,7 @@ describe("A <StaticRouter>", () => {
         search: "?the=query",
         hash: "#the-hash",
         state: {},
-        key: expect.any(String)
+        key: expect.any(String),
       });
     });
   });
@@ -53,7 +53,7 @@ describe("A <StaticRouter>", () => {
         search: "?the=query",
         hash: "",
         state: {},
-        key: expect.any(String)
+        key: expect.any(String),
       });
     });
   });
diff --git a/packages/react-router-dom/__tests__/useLinkClickHandler-test.tsx b/packages/react-router-dom/__tests__/useLinkClickHandler-test.tsx
index 46bffef865..43925c9a20 100644
--- a/packages/react-router-dom/__tests__/useLinkClickHandler-test.tsx
+++ b/packages/react-router-dom/__tests__/useLinkClickHandler-test.tsx
@@ -7,7 +7,7 @@ import {
   Routes,
   Route,
   useHref,
-  useLinkClickHandler
+  useLinkClickHandler,
 } from "react-router-dom";
 
 function CustomLink({ to, replace, state, target, ...rest }: LinkProps) {
@@ -60,7 +60,7 @@ describe("Custom link with useLinkClickHandler", () => {
         new MouseEvent("click", {
           view: window,
           bubbles: true,
-          cancelable: true
+          cancelable: true,
         })
       );
     });
@@ -103,7 +103,7 @@ describe("Custom link with useLinkClickHandler", () => {
             view: window,
             bubbles: true,
             cancelable: true,
-            button: RightMouseButton
+            button: RightMouseButton,
           })
         );
       });
@@ -146,7 +146,7 @@ describe("Custom link with useLinkClickHandler", () => {
           new MouseEvent("click", {
             view: window,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
           })
         );
       });
@@ -189,7 +189,7 @@ describe("Custom link with useLinkClickHandler", () => {
             bubbles: true,
             cancelable: true,
             // The Ctrl key is pressed
-            ctrlKey: true
+            ctrlKey: true,
           })
         );
       });
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index 40cbe72d2f..94f8b9675d 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -24,7 +24,7 @@ import {
   useParams,
   useResolvedPath,
   useRoutes,
-  useOutletContext
+  useOutletContext,
 } from "react-router";
 import type { To } from "react-router";
 
@@ -73,7 +73,7 @@ export {
   useParams,
   useResolvedPath,
   useRoutes,
-  useOutletContext
+  useOutletContext,
 };
 
 export type {
@@ -96,7 +96,7 @@ export type {
   LayoutRouteProps,
   IndexRouteProps,
   RouterProps,
-  RoutesProps
+  RoutesProps,
 } from "react-router";
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -116,7 +116,7 @@ export type {
 export {
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
-  UNSAFE_RouteContext
+  UNSAFE_RouteContext,
 } from "react-router";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -135,7 +135,7 @@ export interface BrowserRouterProps {
 export function BrowserRouter({
   basename,
   children,
-  window
+  window,
 }: BrowserRouterProps) {
   let historyRef = React.useRef<BrowserHistory>();
   if (historyRef.current == null) {
@@ -145,7 +145,7 @@ export function BrowserRouter({
   let history = historyRef.current;
   let [state, setState] = React.useState({
     action: history.action,
-    location: history.location
+    location: history.location,
   });
 
   React.useLayoutEffect(() => history.listen(setState), [history]);
@@ -180,7 +180,7 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
   let history = historyRef.current;
   let [state, setState] = React.useState({
     action: history.action,
-    location: history.location
+    location: history.location,
   });
 
   React.useLayoutEffect(() => history.listen(setState), [history]);
@@ -211,7 +211,7 @@ export interface HistoryRouterProps {
 function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
   const [state, setState] = React.useState({
     action: history.action,
-    location: history.location
+    location: history.location,
   });
 
   React.useLayoutEffect(() => history.listen(setState), [history]);
@@ -379,7 +379,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
   {
     target,
     replace: replaceProp,
-    state
+    state,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
@@ -436,7 +436,7 @@ export function useSearchParams(defaultInit?: URLSearchParamsInit) {
 
     for (let key of defaultSearchParamsRef.current.keys()) {
       if (!searchParams.has(key)) {
-        defaultSearchParamsRef.current.getAll(key).forEach(value => {
+        defaultSearchParamsRef.current.getAll(key).forEach((value) => {
           searchParams.append(key, value);
         });
       }
@@ -499,7 +499,7 @@ export function createSearchParams(
       : Object.keys(init).reduce((memo, key) => {
           let value = init[key];
           return memo.concat(
-            Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]
+            Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]
           );
         }, [] as ParamKeyValuePair[])
   );
diff --git a/packages/react-router-dom/jest-transformer.js b/packages/react-router-dom/jest-transformer.js
index 241de5b39f..7658127ad4 100644
--- a/packages/react-router-dom/jest-transformer.js
+++ b/packages/react-router-dom/jest-transformer.js
@@ -4,7 +4,7 @@ module.exports = babelJest.createTransformer({
   presets: [
     ["@babel/preset-env", { loose: true }],
     "@babel/preset-react",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
   ],
-  plugins: ["babel-plugin-dev-expression"]
+  plugins: ["babel-plugin-dev-expression"],
 });
diff --git a/packages/react-router-dom/jest.config.js b/packages/react-router-dom/jest.config.js
index 49b53030a8..42f4816c69 100644
--- a/packages/react-router-dom/jest.config.js
+++ b/packages/react-router-dom/jest.config.js
@@ -1,9 +1,9 @@
 module.exports = {
   testMatch: ["**/__tests__/*-test.[jt]s?(x)"],
   transform: {
-    "\\.[jt]sx?$": "./jest-transformer.js"
+    "\\.[jt]sx?$": "./jest-transformer.js",
   },
   globals: {
-    __DEV__: true
-  }
+    __DEV__: true,
+  },
 };
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
index b9399312eb..14f74ccb17 100644
--- a/packages/react-router-dom/server.tsx
+++ b/packages/react-router-dom/server.tsx
@@ -15,7 +15,7 @@ export interface StaticRouterProps {
 export function StaticRouter({
   basename,
   children,
-  location: locationProp = "/"
+  location: locationProp = "/",
 }: StaticRouterProps) {
   if (typeof locationProp === "string") {
     locationProp = parsePath(locationProp);
@@ -27,7 +27,7 @@ export function StaticRouter({
     search: locationProp.search || "",
     hash: locationProp.hash || "",
     state: locationProp.state || null,
-    key: locationProp.key || "default"
+    key: locationProp.key || "default",
   };
 
   let staticNavigator = {
@@ -67,7 +67,7 @@ export function StaticRouter({
         `You cannot use navigator.forward() on the server because it is a stateless ` +
           `environment.`
       );
-    }
+    },
   };
 
   return (
diff --git a/packages/react-router-native/__tests__/deep-linking-test.tsx b/packages/react-router-native/__tests__/deep-linking-test.tsx
index 959b7cefe8..d7b454d0a1 100644
--- a/packages/react-router-native/__tests__/deep-linking-test.tsx
+++ b/packages/react-router-native/__tests__/deep-linking-test.tsx
@@ -6,7 +6,7 @@ import {
   NativeRouter,
   Routes,
   Route,
-  useDeepLinking
+  useDeepLinking,
 } from "react-router-native";
 import { MockEvent, mockPromiseThatResolvesImmediatelyWith } from "./utils";
 
@@ -110,7 +110,7 @@ describe("deep linking", () => {
 
       function changeURL(url: string) {
         let event = new MockEvent("url", { url });
-        listeners.forEach(listener => listener(event));
+        listeners.forEach((listener) => listener(event));
       }
 
       function Home() {
diff --git a/packages/react-router-native/__tests__/link-press-test.tsx b/packages/react-router-native/__tests__/link-press-test.tsx
index 697d30514c..a66ed5de49 100644
--- a/packages/react-router-native/__tests__/link-press-test.tsx
+++ b/packages/react-router-native/__tests__/link-press-test.tsx
@@ -103,7 +103,7 @@ describe("A <Link> press", () => {
             <Text>Home</Text>
             <Link
               to="../about"
-              onPress={event => {
+              onPress={(event) => {
                 event.preventDefault();
               }}
             >
diff --git a/packages/react-router-native/__tests__/search-params-test.tsx b/packages/react-router-native/__tests__/search-params-test.tsx
index 9f059a6e41..61bce250d8 100644
--- a/packages/react-router-native/__tests__/search-params-test.tsx
+++ b/packages/react-router-native/__tests__/search-params-test.tsx
@@ -4,13 +4,13 @@ import {
   NativeRouter,
   Routes,
   Route,
-  useSearchParams
+  useSearchParams,
 } from "react-router-native";
 import * as TestRenderer from "react-test-renderer";
 
 describe("useSearchParams", () => {
   function SearchForm({
-    children
+    children,
   }: {
     children: React.ReactNode;
     onSubmit?: any;
diff --git a/packages/react-router-native/__tests__/setup.ts b/packages/react-router-native/__tests__/setup.ts
index 9d04d9f6dd..af30a0afd4 100644
--- a/packages/react-router-native/__tests__/setup.ts
+++ b/packages/react-router-native/__tests__/setup.ts
@@ -4,6 +4,6 @@ jest.mock("react-native/Libraries/Linking/Linking", () => {
     removeEventListener: jest.fn(),
     openURL: jest.fn(),
     canOpenURL: jest.fn(),
-    getInitialURL: jest.fn()
+    getInitialURL: jest.fn(),
   };
 });
diff --git a/packages/react-router-native/__tests__/useLinkPressHandler-test.tsx b/packages/react-router-native/__tests__/useLinkPressHandler-test.tsx
index 933d45b0ba..ce0755b34a 100644
--- a/packages/react-router-native/__tests__/useLinkPressHandler-test.tsx
+++ b/packages/react-router-native/__tests__/useLinkPressHandler-test.tsx
@@ -5,7 +5,7 @@ import {
   NativeRouter,
   Route,
   Routes,
-  useLinkPressHandler
+  useLinkPressHandler,
 } from "react-router-native";
 import * as TestRenderer from "react-test-renderer";
 
diff --git a/packages/react-router-native/__tests__/utils.ts b/packages/react-router-native/__tests__/utils.ts
index 62ca571232..821f78310f 100644
--- a/packages/react-router-native/__tests__/utils.ts
+++ b/packages/react-router-native/__tests__/utils.ts
@@ -31,6 +31,6 @@ export function mockPromiseThatResolvesImmediatelyWith<T = void>(value?: T) {
   return {
     then(callback: (val?: T | undefined) => any) {
       callback(value);
-    }
+    },
   } as Promise<T>;
 }
diff --git a/packages/react-router-native/index.tsx b/packages/react-router-native/index.tsx
index 1660ba1e3d..6e860c08ec 100644
--- a/packages/react-router-native/index.tsx
+++ b/packages/react-router-native/index.tsx
@@ -4,7 +4,7 @@ import {
   GestureResponderEvent,
   Linking,
   TouchableHighlight,
-  TouchableHighlightProps
+  TouchableHighlightProps,
 } from "react-native";
 import {
   MemoryRouter,
@@ -31,7 +31,7 @@ import {
   useParams,
   useResolvedPath,
   useRoutes,
-  useOutletContext
+  useOutletContext,
 } from "react-router";
 import type { To } from "react-router";
 
@@ -65,7 +65,7 @@ export {
   useParams,
   useResolvedPath,
   useRoutes,
-  useOutletContext
+  useOutletContext,
 };
 
 export type {
@@ -88,7 +88,7 @@ export type {
   RouteProps,
   RouterProps,
   RoutesProps,
-  To
+  To,
 } from "react-router";
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -108,7 +108,7 @@ export type {
 export {
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
-  UNSAFE_RouteContext
+  UNSAFE_RouteContext,
 } from "react-router";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -169,7 +169,7 @@ export function useLinkPressHandler(
   to: To,
   {
     replace,
-    state
+    state,
   }: {
     replace?: boolean;
     state?: any;
@@ -224,7 +224,7 @@ export function useDeepLinking() {
   React.useEffect(() => {
     let current = true;
 
-    Linking.getInitialURL().then(url => {
+    Linking.getInitialURL().then((url) => {
       if (current) {
         if (url) navigate(trimScheme(url));
       }
@@ -268,7 +268,7 @@ export function useSearchParams(
 
     for (let key of defaultSearchParamsRef.current.keys()) {
       if (!searchParams.has(key)) {
-        defaultSearchParamsRef.current.getAll(key).forEach(value => {
+        defaultSearchParamsRef.current.getAll(key).forEach((value) => {
           searchParams.append(key, value);
         });
       }
@@ -333,7 +333,7 @@ export function createSearchParams(
       : Object.keys(init).reduce((memo, key) => {
           let value = init[key];
           return memo.concat(
-            Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]
+            Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]
           );
         }, [] as ParamKeyValuePair[])
   );
diff --git a/packages/react-router-native/jest.config.js b/packages/react-router-native/jest.config.js
index a8c7924f73..88cd4b5cc9 100644
--- a/packages/react-router-native/jest.config.js
+++ b/packages/react-router-native/jest.config.js
@@ -2,13 +2,13 @@ module.exports = {
   preset: "react-native",
   testMatch: ["**/__tests__/*-test.[jt]s?(x)"],
   transform: {
-    "\\.[jt]sx?$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
+    "\\.[jt]sx?$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
   },
   globals: {
-    __DEV__: true
+    __DEV__: true,
   },
   modulePaths: [
-    "<rootDir>/node_modules" // for react-native
+    "<rootDir>/node_modules", // for react-native
   ],
-  setupFiles: ["<rootDir>/__tests__/setup.ts"]
+  setupFiles: ["<rootDir>/__tests__/setup.ts"],
 };
diff --git a/packages/react-router/__tests__/Routes-location-test.tsx b/packages/react-router/__tests__/Routes-location-test.tsx
index 5b33be009c..b5aafe8c7a 100644
--- a/packages/react-router/__tests__/Routes-location-test.tsx
+++ b/packages/react-router/__tests__/Routes-location-test.tsx
@@ -22,7 +22,7 @@ describe("<Routes> with a location", () => {
       search: "",
       hash: "",
       state: null,
-      key: "r9qntrej"
+      key: "r9qntrej",
     };
 
     let renderer: TestRenderer.ReactTestRenderer;
diff --git a/packages/react-router/__tests__/absolute-path-matching-test.tsx b/packages/react-router/__tests__/absolute-path-matching-test.tsx
index f064130ac1..9d64b69578 100644
--- a/packages/react-router/__tests__/absolute-path-matching-test.tsx
+++ b/packages/react-router/__tests__/absolute-path-matching-test.tsx
@@ -3,7 +3,7 @@ import { matchRoutes } from "react-router";
 
 function pickPaths(routes: RouteObject[], pathname: string): string[] | null {
   let matches = matchRoutes(routes, pathname);
-  return matches && matches.map(match => match.route.path || "");
+  return matches && matches.map((match) => match.route.path || "");
 }
 
 describe("absolute path matching", () => {
@@ -15,9 +15,9 @@ describe("absolute path matching", () => {
           { index: true },
           { path: "add" },
           { path: "remove" },
-          { path: "/users/:id" }
-        ]
-      }
+          { path: "/users/:id" },
+        ],
+      },
     ];
 
     expect(pickPaths(routes, "/users")).toEqual(["/users", ""]);
@@ -30,14 +30,14 @@ describe("absolute path matching", () => {
     let routes = [
       {
         path: "/users",
-        children: [{ path: "/users/*" }]
-      }
+        children: [{ path: "/users/*" }],
+      },
     ];
 
     expect(pickPaths(routes, "/users")).toEqual(["/users"]);
     expect(pickPaths(routes, "/users/not-found")).toEqual([
       "/users",
-      "/users/*"
+      "/users/*",
     ]);
   });
 
@@ -50,9 +50,9 @@ describe("absolute path matching", () => {
             children: [
               { path: ":id" },
               // This one should throw because it doesn't begin with /users
-              { path: "/not/users" }
-            ]
-          }
+              { path: "/not/users" },
+            ],
+          },
         ],
         "/users/123"
       );
diff --git a/packages/react-router/__tests__/gh-issue-8165-test.tsx b/packages/react-router/__tests__/gh-issue-8165-test.tsx
index 59cb6ef9a2..0a6f1740a6 100644
--- a/packages/react-router/__tests__/gh-issue-8165-test.tsx
+++ b/packages/react-router/__tests__/gh-issue-8165-test.tsx
@@ -6,7 +6,7 @@ import {
   Route,
   useParams,
   useNavigate,
-  Navigate
+  Navigate,
 } from "react-router-dom";
 
 describe("GH Issue #8165", () => {
diff --git a/packages/react-router/__tests__/index-routes-test.tsx b/packages/react-router/__tests__/index-routes-test.tsx
index 3f5b57b61c..6190989b71 100644
--- a/packages/react-router/__tests__/index-routes-test.tsx
+++ b/packages/react-router/__tests__/index-routes-test.tsx
@@ -11,11 +11,11 @@ describe("index route matching", () => {
               {
                 index: true,
                 // This config is not valid because index routes cannot have children
-                children: [{ path: "not-valid" }]
+                children: [{ path: "not-valid" }],
               },
-              { path: ":id" }
-            ]
-          }
+              { path: ":id" },
+            ],
+          },
         ],
         "/users/mj"
       );
diff --git a/packages/react-router/__tests__/matchPath-test.tsx b/packages/react-router/__tests__/matchPath-test.tsx
index fdcc5809bf..795e889ce4 100644
--- a/packages/react-router/__tests__/matchPath-test.tsx
+++ b/packages/react-router/__tests__/matchPath-test.tsx
@@ -4,7 +4,7 @@ describe("matchPath", () => {
   it("matches the root / URL", () => {
     expect(matchPath("/", "/")).toMatchObject({
       pathname: "/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 
@@ -16,28 +16,28 @@ describe("matchPath", () => {
     it("matches a pathname", () => {
       expect(matchPath("users", "/users")).toMatchObject({
         pathname: "/users",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
     it("matches a pathname with multiple segments", () => {
       expect(matchPath("users/mj", "/users/mj")).toMatchObject({
         pathname: "/users/mj",
-        pathnameBase: "/users/mj"
+        pathnameBase: "/users/mj",
       });
     });
 
     it("matches a pathname with a trailing slash", () => {
       expect(matchPath("users", "/users/")).toMatchObject({
         pathname: "/users/",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
     it("matches a pathname with multiple segments and a trailing slash", () => {
       expect(matchPath("users/mj", "/users/mj/")).toMatchObject({
         pathname: "/users/mj/",
-        pathnameBase: "/users/mj"
+        pathnameBase: "/users/mj",
       });
     });
   });
@@ -50,28 +50,28 @@ describe("matchPath", () => {
     it("matches a pathname", () => {
       expect(matchPath("/users", "/users")).toMatchObject({
         pathname: "/users",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
     it("matches a pathname with multiple segments", () => {
       expect(matchPath("/users/mj", "/users/mj")).toMatchObject({
         pathname: "/users/mj",
-        pathnameBase: "/users/mj"
+        pathnameBase: "/users/mj",
       });
     });
 
     it("matches a pathname with a trailing slash", () => {
       expect(matchPath("/users", "/users/")).toMatchObject({
         pathname: "/users/",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
     it("matches a pathname with multiple segments and a trailing slash", () => {
       expect(matchPath("/users/mj", "/users/mj/")).toMatchObject({
         pathname: "/users/mj/",
-        pathnameBase: "/users/mj"
+        pathnameBase: "/users/mj",
       });
     });
   });
@@ -84,28 +84,28 @@ describe("matchPath", () => {
     it("matches a pathname", () => {
       expect(matchPath("users/", "/users")).toMatchObject({
         pathname: "/users",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
     it("matches a pathname with multiple segments", () => {
       expect(matchPath("users/mj/", "/users/mj")).toMatchObject({
         pathname: "/users/mj",
-        pathnameBase: "/users/mj"
+        pathnameBase: "/users/mj",
       });
     });
 
     it("matches a pathname with a trailing slash", () => {
       expect(matchPath("users/", "/users/")).toMatchObject({
         pathname: "/users/",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
     it("matches a pathname with multiple segments and a trailing slash", () => {
       expect(matchPath("users/mj/", "/users/mj/")).toMatchObject({
         pathname: "/users/mj/",
-        pathnameBase: "/users/mj"
+        pathnameBase: "/users/mj",
       });
     });
   });
@@ -119,7 +119,7 @@ describe("matchPath", () => {
         matchPath({ path: "/users/", end: false }, "/users")
       ).toMatchObject({
         pathname: "/users",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
@@ -131,7 +131,7 @@ describe("matchPath", () => {
         matchPath({ path: "/users/", end: false }, "/users/")
       ).toMatchObject({
         pathname: "/users",
-        pathnameBase: "/users"
+        pathnameBase: "/users",
       });
     });
 
@@ -166,28 +166,28 @@ describe("matchPath", () => {
     it("matches a pathname", () => {
       expect(matchPath({ path: "/", end: false }, "/users")).toMatchObject({
         pathname: "/",
-        pathnameBase: "/"
+        pathnameBase: "/",
       });
     });
 
     it("matches a pathname with multiple segments", () => {
       expect(matchPath({ path: "/", end: false }, "/users/mj")).toMatchObject({
         pathname: "/",
-        pathnameBase: "/"
+        pathnameBase: "/",
       });
     });
 
     it("matches a pathname with a trailing slash", () => {
       expect(matchPath({ path: "/", end: false }, "/users/")).toMatchObject({
         pathname: "/",
-        pathnameBase: "/"
+        pathnameBase: "/",
       });
     });
 
     it("matches a pathname with multiple segments and a trailing slash", () => {
       expect(matchPath({ path: "/", end: false }, "/users/mj/")).toMatchObject({
         pathname: "/",
-        pathnameBase: "/"
+        pathnameBase: "/",
       });
     });
   });
@@ -195,7 +195,7 @@ describe("matchPath", () => {
   it("is not case-sensitive by default", () => {
     expect(matchPath("/SystemDashboard", "/systemdashboard")).toMatchObject({
       pathname: "/systemdashboard",
-      pathnameBase: "/systemdashboard"
+      pathnameBase: "/systemdashboard",
     });
   });
 
@@ -207,7 +207,7 @@ describe("matchPath", () => {
       )
     ).toMatchObject({
       pathname: "/SystemDashboard",
-      pathnameBase: "/SystemDashboard"
+      pathnameBase: "/SystemDashboard",
     });
   });
 
@@ -225,17 +225,17 @@ describe("matchPath", () => {
       expect(matchPath("/files/*", "/files/mj.jpg")).toMatchObject({
         params: { "*": "mj.jpg" },
         pathname: "/files/mj.jpg",
-        pathnameBase: "/files"
+        pathnameBase: "/files",
       });
       expect(matchPath("/files/*", "/files/")).toMatchObject({
         params: { "*": "" },
         pathname: "/files/",
-        pathnameBase: "/files"
+        pathnameBase: "/files",
       });
       expect(matchPath("/files/*", "/files")).toMatchObject({
         params: { "*": "" },
         pathname: "/files",
-        pathnameBase: "/files"
+        pathnameBase: "/files",
       });
     });
   });
@@ -245,55 +245,55 @@ describe("matchPath *", () => {
   it("matches the root URL", () => {
     expect(matchPath("*", "/")).toMatchObject({
       pathname: "/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(matchPath("/*", "/")).toMatchObject({
       pathname: "/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 
   it("matches a URL with a segment", () => {
     expect(matchPath("*", "/users")).toMatchObject({
       pathname: "/users",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(matchPath("/*", "/users")).toMatchObject({
       pathname: "/users",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 
   it("matches a URL with a segment and a trailing slash", () => {
     expect(matchPath("*", "/users/")).toMatchObject({
       pathname: "/users/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(matchPath("/*", "/users/")).toMatchObject({
       pathname: "/users/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 
   it("matches a URL with multiple segments", () => {
     expect(matchPath("*", "/users/mj")).toMatchObject({
       pathname: "/users/mj",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(matchPath("/*", "/users/mj")).toMatchObject({
       pathname: "/users/mj",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 
   it("matches a URL with multiple segments and a trailing slash", () => {
     expect(matchPath("*", "/users/mj/")).toMatchObject({
       pathname: "/users/mj/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(matchPath("/*", "/users/mj/")).toMatchObject({
       pathname: "/users/mj/",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 });
@@ -313,21 +313,21 @@ describe("matchPath warnings", () => {
       expect(matchPath("/files*", "/files/mj.jpg")).toMatchObject({
         params: { "*": "mj.jpg" },
         pathname: "/files/mj.jpg",
-        pathnameBase: "/files"
+        pathnameBase: "/files",
       });
       expect(consoleWarn).toHaveBeenCalledTimes(1);
 
       expect(matchPath("/files*", "/files/")).toMatchObject({
         params: { "*": "" },
         pathname: "/files/",
-        pathnameBase: "/files"
+        pathnameBase: "/files",
       });
       expect(consoleWarn).toHaveBeenCalledTimes(2);
 
       expect(matchPath("/files*", "/files")).toMatchObject({
         params: { "*": "" },
         pathname: "/files",
-        pathnameBase: "/files"
+        pathnameBase: "/files",
       });
       expect(consoleWarn).toHaveBeenCalledTimes(3);
     });
diff --git a/packages/react-router/__tests__/matchRoutes-test.tsx b/packages/react-router/__tests__/matchRoutes-test.tsx
index 3e2ecfb569..2e9866d597 100644
--- a/packages/react-router/__tests__/matchRoutes-test.tsx
+++ b/packages/react-router/__tests__/matchRoutes-test.tsx
@@ -8,40 +8,40 @@ function pickPaths(
   basename?: string
 ): string[] | null {
   let matches = matchRoutes(routes, pathname, basename);
-  return matches && matches.map(match => match.route.path || "");
+  return matches && matches.map((match) => match.route.path || "");
 }
 
 describe("matchRoutes", () => {
   let userEditRoute: RouteObject = {
     path: "edit",
-    element: <h1>User Edit</h1>
+    element: <h1>User Edit</h1>,
   };
   let userProfileRoute: RouteObject = {
     path: ":id",
     element: <h1>User Profile</h1>,
-    children: [userEditRoute]
+    children: [userEditRoute],
   };
   let usersRoute: RouteObject = {
     path: "/users",
     element: <h1>Users</h1>,
-    children: [{ index: true, element: <h1>Index</h1> }, userProfileRoute]
+    children: [{ index: true, element: <h1>Index</h1> }, userProfileRoute],
   };
   let indexWithPathRoute: RouteObject = {
     path: "/withpath",
-    index: true
+    index: true,
   };
   let layoutRouteIndex: RouteObject = {
     path: "/layout",
     index: true,
-    element: <h1>Layout</h1>
+    element: <h1>Layout</h1>,
   };
   let layoutRoute: RouteObject = {
     path: "/layout",
     children: [
       { path: "item", element: <h1>Item</h1> },
       { path: ":id", element: <h1>ID</h1> },
-      { path: "*", element: <h1>Not Found</h1> }
-    ]
+      { path: "*", element: <h1>Not Found</h1> },
+    ],
   };
 
   let routes = [
@@ -51,14 +51,14 @@ describe("matchRoutes", () => {
       element: <h1>Home</h1>,
       children: [
         { index: true, element: <h1>Index</h1> },
-        { path: "*", element: <h1>Not Found</h1> }
-      ]
+        { path: "*", element: <h1>Not Found</h1> },
+      ],
     },
     indexWithPathRoute,
     layoutRoute,
     layoutRouteIndex,
     usersRoute,
-    { path: "*", element: <h1>Not Found</h1> }
+    { path: "*", element: <h1>Not Found</h1> },
   ];
 
   it("matches root * routes correctly", () => {
@@ -96,7 +96,7 @@ describe("matchRoutes", () => {
     expect(pickPaths(routes, "/users/mj/edit")).toEqual([
       "/users",
       ":id",
-      "edit"
+      "edit",
     ]);
   });
 
@@ -105,7 +105,7 @@ describe("matchRoutes", () => {
     expect(pickPaths(routes, "/users/VXNlcnM6MQ==/edit")).toEqual([
       "/users",
       ":id",
-      "edit"
+      "edit",
     ]);
   });
 
@@ -123,13 +123,13 @@ describe("matchRoutes", () => {
     it("matches a pathname that starts with the basename", () => {
       expect(pickPaths(routes, "/app/users/mj", "/app")).toEqual([
         "/users",
-        ":id"
+        ":id",
       ]);
 
       // basename should not be case-sensitive
       expect(pickPaths(routes, "/APP/users/mj", "/app")).toEqual([
         "/users",
-        ":id"
+        ":id",
       ]);
     });
 
diff --git a/packages/react-router/__tests__/path-matching-test.tsx b/packages/react-router/__tests__/path-matching-test.tsx
index feae708dfc..f23b68d6cd 100644
--- a/packages/react-router/__tests__/path-matching-test.tsx
+++ b/packages/react-router/__tests__/path-matching-test.tsx
@@ -3,7 +3,7 @@ import { matchRoutes } from "react-router";
 
 function pickPaths(routes: RouteObject[], pathname: string): string[] | null {
   let matches = matchRoutes(routes, pathname);
-  return matches && matches.map(match => match.route.path || "");
+  return matches && matches.map((match) => match.route.path || "");
 }
 
 describe("path matching", () => {
@@ -28,26 +28,26 @@ describe("path matching", () => {
       { path: "/files" },
       { path: "/:one/:two/:three/:four/:five" },
       { path: "/" },
-      { path: "*" }
+      { path: "*" },
     ];
 
     expect(pickPaths(routes, "/groups/main/users/me")).toEqual([
-      "/groups/main/users/me"
+      "/groups/main/users/me",
     ]);
     expect(pickPaths(routes, "/groups/other/users/me")).toEqual([
-      "/groups/:groupId/users/me"
+      "/groups/:groupId/users/me",
     ]);
     expect(pickPaths(routes, "/groups/123/users/456")).toEqual([
-      "/groups/:groupId/users/:userId"
+      "/groups/:groupId/users/:userId",
     ]);
     expect(pickPaths(routes, "/groups/main/users/a/b")).toEqual([
-      "/groups/:groupId/users/*"
+      "/groups/:groupId/users/*",
     ]);
     expect(pickPaths(routes, "/groups/main/users")).toEqual([
-      "/groups/main/users"
+      "/groups/main/users",
     ]);
     expect(pickPaths(routes, "/groups/123/users")).toEqual([
-      "/groups/:groupId/users"
+      "/groups/:groupId/users",
     ]);
     expect(pickPaths(routes, "/groups/main")).toEqual(["/groups/main"]);
     expect(pickPaths(routes, "/groups/123")).toEqual(["/groups/:groupId"]);
@@ -55,7 +55,7 @@ describe("path matching", () => {
     expect(pickPaths(routes, "/files/some/long/path")).toEqual(["/files/*"]);
     expect(pickPaths(routes, "/files")).toEqual(["/files"]);
     expect(pickPaths(routes, "/one/two/three/four/five")).toEqual([
-      "/:one/:two/:three/:four/:five"
+      "/:one/:two/:three/:four/:five",
     ]);
     expect(pickPaths(routes, "/")).toEqual(["/"]);
     expect(pickPaths(routes, "/no/where")).toEqual(["*"]);
@@ -68,19 +68,19 @@ describe("path matching", () => {
         children: [
           {
             path: ":id",
-            children: [{ path: "subjects" }]
+            children: [{ path: "subjects" }],
           },
           { path: "new" },
           { index: true },
-          { path: "*" }
-        ]
+          { path: "*" },
+        ],
       },
       {
         path: "courses",
-        children: [{ path: "react-fundamentals" }, { path: "advanced-react" }]
+        children: [{ path: "react-fundamentals" }, { path: "advanced-react" }],
       },
       { path: "/" },
-      { path: "*" }
+      { path: "*" },
     ];
 
     expect(pickPaths(routes, "/courses")).toEqual(["courses", ""]);
@@ -88,20 +88,20 @@ describe("path matching", () => {
     expect(pickPaths(routes, "/courses/routing/subjects")).toEqual([
       "courses",
       ":id",
-      "subjects"
+      "subjects",
     ]);
     expect(pickPaths(routes, "/courses/new")).toEqual(["courses", "new"]);
     expect(pickPaths(routes, "/courses/whatever/path")).toEqual([
       "courses",
-      "*"
+      "*",
     ]);
     expect(pickPaths(routes, "/courses/react-fundamentals")).toEqual([
       "courses",
-      "react-fundamentals"
+      "react-fundamentals",
     ]);
     expect(pickPaths(routes, "/courses/advanced-react")).toEqual([
       "courses",
-      "advanced-react"
+      "advanced-react",
     ]);
     expect(pickPaths(routes, "/")).toEqual(["/"]);
     expect(pickPaths(routes, "/whatever")).toEqual(["*"]);
@@ -111,9 +111,9 @@ describe("path matching", () => {
     let routes = [
       {
         path: ":page",
-        children: [{ index: true }]
+        children: [{ index: true }],
       },
-      { path: "page" }
+      { path: "page" },
     ];
 
     expect(pickPaths(routes, "/page")).toEqual(["page"]);
@@ -129,12 +129,12 @@ describe("path matching with a basename", () => {
           path: "subjects",
           children: [
             {
-              path: ":courseId"
-            }
-          ]
-        }
-      ]
-    }
+              path: ":courseId",
+            },
+          ],
+        },
+      ],
+    },
   ];
 
   test("top-level route", () => {
@@ -147,8 +147,8 @@ describe("path matching with a basename", () => {
       {
         params: { userId: "michael" },
         pathname: "/users/michael",
-        pathnameBase: "/users/michael"
-      }
+        pathnameBase: "/users/michael",
+      },
     ]);
   });
 
@@ -162,18 +162,18 @@ describe("path matching with a basename", () => {
       {
         params: { userId: "michael", courseId: "react" },
         pathname: "/users/michael",
-        pathnameBase: "/users/michael"
+        pathnameBase: "/users/michael",
       },
       {
         params: { userId: "michael", courseId: "react" },
         pathname: "/users/michael/subjects",
-        pathnameBase: "/users/michael/subjects"
+        pathnameBase: "/users/michael/subjects",
       },
       {
         params: { userId: "michael", courseId: "react" },
         pathname: "/users/michael/subjects/react",
-        pathnameBase: "/users/michael/subjects/react"
-      }
+        pathnameBase: "/users/michael/subjects/react",
+      },
     ]);
   });
 });
@@ -189,7 +189,7 @@ describe("path matching with splats", () => {
       expect(match[0]).toMatchObject({
         params: { id: "mj", "*": "secrets.txt" },
         pathname: "/users/mj/files/secrets.txt",
-        pathnameBase: "/users/mj/files"
+        pathnameBase: "/users/mj/files",
       });
     });
 
@@ -203,7 +203,7 @@ describe("path matching with splats", () => {
 
   test("parent route with splat", () => {
     let routes = [
-      { path: "users/:id/files/*", children: [{ path: "secrets.txt" }] }
+      { path: "users/:id/files/*", children: [{ path: "secrets.txt" }] },
     ];
     let match = matchRoutes(routes, "/users/mj/files/secrets.txt")!;
 
@@ -211,17 +211,17 @@ describe("path matching with splats", () => {
     expect(match[0]).toMatchObject({
       params: { id: "mj", "*": "secrets.txt" },
       pathname: "/users/mj/files/secrets.txt",
-      pathnameBase: "/users/mj/files"
+      pathnameBase: "/users/mj/files",
     });
     expect(match[1]).toMatchObject({
       params: { id: "mj", "*": "secrets.txt" },
-      pathname: "/users/mj/files/secrets.txt"
+      pathname: "/users/mj/files/secrets.txt",
     });
   });
 
   test("multiple nested routes", () => {
     let routes = [
-      { path: "*", children: [{ path: "*", children: [{ path: "*" }] }] }
+      { path: "*", children: [{ path: "*", children: [{ path: "*" }] }] },
     ];
     let match = matchRoutes(routes, "/one/two/three")!;
 
@@ -229,17 +229,17 @@ describe("path matching with splats", () => {
     expect(match[0]).toMatchObject({
       params: { "*": "one/two/three" },
       pathname: "/one/two/three",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(match[1]).toMatchObject({
       params: { "*": "one/two/three" },
       pathname: "/one/two/three",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
     expect(match[2]).toMatchObject({
       params: { "*": "one/two/three" },
       pathname: "/one/two/three",
-      pathnameBase: "/"
+      pathnameBase: "/",
     });
   });
 });
diff --git a/packages/react-router/__tests__/resolvePath-test.tsx b/packages/react-router/__tests__/resolvePath-test.tsx
index a15bb3838a..09a5a00ecf 100644
--- a/packages/react-router/__tests__/resolvePath-test.tsx
+++ b/packages/react-router/__tests__/resolvePath-test.tsx
@@ -3,38 +3,38 @@ import { resolvePath } from "react-router";
 describe("resolvePath", () => {
   it('resolves absolute paths irrespective of the "from" pathname', () => {
     expect(resolvePath("/search", "/inbox")).toMatchObject({
-      pathname: "/search"
+      pathname: "/search",
     });
   });
 
   it("resolves relative paths", () => {
     expect(resolvePath("../search", "/inbox")).toMatchObject({
-      pathname: "/search"
+      pathname: "/search",
     });
 
     expect(resolvePath("./search", "/inbox")).toMatchObject({
-      pathname: "/inbox/search"
+      pathname: "/inbox/search",
     });
 
     expect(resolvePath("./search/../123", "/inbox")).toMatchObject({
-      pathname: "/inbox/123"
+      pathname: "/inbox/123",
     });
 
     expect(resolvePath("search", "/inbox")).toMatchObject({
-      pathname: "/inbox/search"
+      pathname: "/inbox/search",
     });
   });
 
   it('ignores trailing slashes on the "from" pathname when resolving relative paths', () => {
     expect(resolvePath("../search", "/inbox/")).toMatchObject({
-      pathname: "/search"
+      pathname: "/search",
     });
   });
 
   it('uses the "from" pathname when the "to" value has no pathname', () => {
     expect(resolvePath("?q=react", "/search")).toMatchObject({
       pathname: "/search",
-      search: "?q=react"
+      search: "?q=react",
     });
   });
 
@@ -44,7 +44,7 @@ describe("resolvePath", () => {
     ).toEqual({
       pathname: "/search",
       search: "?q=react",
-      hash: "#results"
+      hash: "#results",
     });
   });
 });
diff --git a/packages/react-router/__tests__/route-matching-test.tsx b/packages/react-router/__tests__/route-matching-test.tsx
index af9757750d..88e4241a07 100644
--- a/packages/react-router/__tests__/route-matching-test.tsx
+++ b/packages/react-router/__tests__/route-matching-test.tsx
@@ -7,7 +7,7 @@ import {
   Routes,
   Route,
   useParams,
-  useRoutes
+  useRoutes,
 } from "react-router";
 
 describe("route matching", () => {
@@ -21,10 +21,10 @@ describe("route matching", () => {
       "/courses/react-fundamentals",
       "/courses/advanced-react",
       "/",
-      "/not-found"
+      "/not-found",
     ];
 
-    testPaths.forEach(path => {
+    testPaths.forEach((path) => {
       it(`renders the right elements at ${path}`, () => {
         let renderer: TestRenderer.ReactTestRenderer;
         TestRenderer.act(() => {
@@ -48,11 +48,11 @@ describe("route matching", () => {
           {
             path: ":id",
             element: <Course />,
-            children: [{ path: "grades", element: <CourseGrades /> }]
+            children: [{ path: "grades", element: <CourseGrades /> }],
           },
           { path: "new", element: <NewCourse /> },
-          { path: "*", element: <CoursesNotFound /> }
-        ]
+          { path: "*", element: <CoursesNotFound /> },
+        ],
       },
       {
         path: "courses",
@@ -60,11 +60,11 @@ describe("route matching", () => {
         children: [
           { path: "react-fundamentals", element: <ReactFundamentals /> },
           { path: "advanced-react", element: <AdvancedReact /> },
-          { path: "*", element: <NeverRender /> }
-        ]
+          { path: "*", element: <NeverRender /> },
+        ],
       },
       { index: true, element: <Home /> },
-      { path: "*", element: <NotFound /> }
+      { path: "*", element: <NotFound /> },
     ];
 
     function RoutesRenderer({ routes }: { routes: RouteObject[] }) {
diff --git a/packages/react-router/__tests__/useNavigate-test.tsx b/packages/react-router/__tests__/useNavigate-test.tsx
index 6db1954ce6..8502fea9b8 100644
--- a/packages/react-router/__tests__/useNavigate-test.tsx
+++ b/packages/react-router/__tests__/useNavigate-test.tsx
@@ -5,7 +5,7 @@ import {
   Routes,
   Route,
   useNavigate,
-  useLocation
+  useLocation,
 } from "react-router";
 
 describe("useNavigate", () => {
diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx
index f488f975bc..036297072f 100644
--- a/packages/react-router/__tests__/useOutlet-test.tsx
+++ b/packages/react-router/__tests__/useOutlet-test.tsx
@@ -5,7 +5,7 @@ import {
   Routes,
   Route,
   useOutlet,
-  useOutletContext
+  useOutletContext,
 } from "react-router";
 
 describe("useOutlet", () => {
@@ -207,7 +207,7 @@ describe("useOutlet", () => {
           "Michael",
           "Bert",
           "Winifred",
-          "George"
+          "George",
         ]);
       }
 
@@ -218,7 +218,7 @@ describe("useOutlet", () => {
           <div>
             <h1>Profile</h1>
             <ul>
-              {outletContext.map(name => (
+              {outletContext.map((name) => (
                 <li key={name}>{name}</li>
               ))}
             </ul>
diff --git a/packages/react-router/__tests__/useResolvedPath-test.tsx b/packages/react-router/__tests__/useResolvedPath-test.tsx
index bee9c1514e..f66df595ac 100644
--- a/packages/react-router/__tests__/useResolvedPath-test.tsx
+++ b/packages/react-router/__tests__/useResolvedPath-test.tsx
@@ -43,7 +43,7 @@ describe("useResolvedPath", () => {
                   path={{
                     pathname: "/home",
                     search: new URLSearchParams({ user: "mj" }).toString(),
-                    hash: "#welcome"
+                    hash: "#welcome",
                   }}
                 />
               }
diff --git a/packages/react-router/__tests__/useRoutes-test.tsx b/packages/react-router/__tests__/useRoutes-test.tsx
index 04989e328f..89cf99a0da 100644
--- a/packages/react-router/__tests__/useRoutes-test.tsx
+++ b/packages/react-router/__tests__/useRoutes-test.tsx
@@ -7,7 +7,7 @@ describe("useRoutes", () => {
   it("returns the matching element from a route config", () => {
     let routes = [
       { path: "home", element: <h1>home</h1> },
-      { path: "about", element: <h1>about</h1> }
+      { path: "about", element: <h1>about</h1> },
     ];
 
     let renderer: TestRenderer.ReactTestRenderer;
@@ -31,9 +31,9 @@ describe("useRoutes", () => {
       let routes = [
         {
           path: "users",
-          children: [{ path: ":id", element: <h1>user profile</h1> }]
+          children: [{ path: ":id", element: <h1>user profile</h1> }],
         },
-        { path: "about", element: <h1>about</h1> }
+        { path: "about", element: <h1>about</h1> },
       ];
 
       let renderer: TestRenderer.ReactTestRenderer;
@@ -56,7 +56,7 @@ describe("useRoutes", () => {
   it("Uses the `location` prop instead of context location`", () => {
     let routes = [
       { path: "one", element: <h1>one</h1> },
-      { path: "two", element: <h1>two</h1> }
+      { path: "two", element: <h1>two</h1> },
     ];
 
     let renderer: TestRenderer.ReactTestRenderer;
@@ -89,8 +89,8 @@ describe("useRoutes", () => {
       let routes = [
         {
           path: "layout",
-          children: [{ path: "two", element: <h1>two</h1> }]
-        }
+          children: [{ path: "two", element: <h1>two</h1> }],
+        },
       ];
 
       TestRenderer.act(() => {
@@ -113,7 +113,7 @@ describe("useRoutes", () => {
 
 function RoutesRenderer({
   routes,
-  location
+  location,
 }: {
   routes: RouteObject[];
   location?: Partial<Location> & { pathname: string };
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index 135d2e6bae..d233710be5 100644
--- a/packages/react-router/index.tsx
+++ b/packages/react-router/index.tsx
@@ -5,12 +5,12 @@ import type {
   Location,
   MemoryHistory,
   Path,
-  To
+  To,
 } from "history";
 import {
   Action as NavigationType,
   createMemoryHistory,
-  parsePath
+  parsePath,
 } from "history";
 
 export type { Location, Path, To, NavigationType };
@@ -89,7 +89,7 @@ interface RouteContextObject {
 
 const RouteContext = React.createContext<RouteContextObject>({
   outlet: null,
-  matches: []
+  matches: [],
 });
 
 if (__DEV__) {
@@ -116,7 +116,7 @@ export function MemoryRouter({
   basename,
   children,
   initialEntries,
-  initialIndex
+  initialIndex,
 }: MemoryRouterProps): React.ReactElement {
   let historyRef = React.useRef<MemoryHistory>();
   if (historyRef.current == null) {
@@ -126,7 +126,7 @@ export function MemoryRouter({
   let history = historyRef.current;
   let [state, setState] = React.useState({
     action: history.action,
-    location: history.location
+    location: history.location,
   });
 
   React.useLayoutEffect(() => history.listen(setState), [history]);
@@ -258,7 +258,7 @@ export function Router({
   location: locationProp,
   navigationType = NavigationType.Pop,
   navigator,
-  static: staticProp = false
+  static: staticProp = false,
 }: RouterProps): React.ReactElement | null {
   invariant(
     !useInRouterContext(),
@@ -281,7 +281,7 @@ export function Router({
     search = "",
     hash = "",
     state = null,
-    key = "default"
+    key = "default",
   } = locationProp;
 
   let location = React.useMemo(() => {
@@ -296,7 +296,7 @@ export function Router({
       search,
       hash,
       state,
-      key
+      key,
     };
   }, [basename, pathname, search, hash, state, key]);
 
@@ -334,7 +334,7 @@ export interface RoutesProps {
  */
 export function Routes({
   children,
-  location
+  location,
 }: RoutesProps): React.ReactElement | null {
   return useRoutes(createRoutesFromChildren(children), location);
 }
@@ -516,7 +516,7 @@ export function useNavigate(): NavigateFunction {
   let { pathname: locationPathname } = useLocation();
 
   let routePathnamesJson = JSON.stringify(
-    matches.map(match => match.pathnameBase)
+    matches.map((match) => match.pathnameBase)
   );
 
   let activeRef = React.useRef(false);
@@ -613,7 +613,7 @@ export function useResolvedPath(to: To): Path {
   let { pathname: locationPathname } = useLocation();
 
   let routePathnamesJson = JSON.stringify(
-    matches.map(match => match.pathnameBase)
+    matches.map((match) => match.pathnameBase)
   );
 
   return React.useMemo(
@@ -727,14 +727,14 @@ export function useRoutes(
 
   return _renderMatches(
     matches &&
-      matches.map(match =>
+      matches.map((match) =>
         Object.assign({}, match, {
           params: Object.assign({}, parentParams, match.params),
           pathname: joinPaths([parentPathnameBase, match.pathname]),
           pathnameBase:
             match.pathnameBase === "/"
               ? parentPathnameBase
-              : joinPaths([parentPathnameBase, match.pathnameBase])
+              : joinPaths([parentPathnameBase, match.pathnameBase]),
         })
       ),
     parentMatches
@@ -757,7 +757,7 @@ export function createRoutesFromChildren(
 ): RouteObject[] {
   let routes: RouteObject[] = [];
 
-  React.Children.forEach(children, element => {
+  React.Children.forEach(children, (element) => {
     if (!React.isValidElement(element)) {
       // Ignore non-elements. This allows people to more easily inline
       // conditionals in their route config.
@@ -784,7 +784,7 @@ export function createRoutesFromChildren(
       caseSensitive: element.props.caseSensitive,
       element: element.props.element,
       index: element.props.index,
-      path: element.props.path
+      path: element.props.path,
     };
 
     if (element.props.children) {
@@ -827,7 +827,7 @@ export function generatePath(path: string, params: Params = {}): string {
       invariant(params[key] != null, `Missing ":${key}" param`);
       return params[key]!;
     })
-    .replace(/\/*\*$/, _ =>
+    .replace(/\/*\*$/, (_) =>
       params["*"] == null ? "" : params["*"].replace(/^\/*/, "/")
     );
 }
@@ -908,7 +908,7 @@ function flattenRoutes(
       relativePath: route.path || "",
       caseSensitive: route.caseSensitive === true,
       childrenIndex: index,
-      route
+      route,
     };
 
     if (meta.relativePath.startsWith("/")) {
@@ -955,8 +955,8 @@ function rankRouteBranches(branches: RouteBranch[]): void {
     a.score !== b.score
       ? b.score - a.score // Higher score first
       : compareIndexes(
-          a.routesMeta.map(meta => meta.childrenIndex),
-          b.routesMeta.map(meta => meta.childrenIndex)
+          a.routesMeta.map((meta) => meta.childrenIndex),
+          b.routesMeta.map((meta) => meta.childrenIndex)
         )
   );
 }
@@ -981,7 +981,7 @@ function computeScore(path: string, index: boolean | undefined): number {
   }
 
   return segments
-    .filter(s => !isSplat(s))
+    .filter((s) => !isSplat(s))
     .reduce(
       (score, segment) =>
         score +
@@ -1040,7 +1040,7 @@ function matchRouteBranch<ParamKey extends string = string>(
       params: matchedParams,
       pathname: joinPaths([matchedPathname, match.pathname]),
       pathnameBase: joinPaths([matchedPathname, match.pathnameBase]),
-      route
+      route,
     });
 
     if (match.pathnameBase !== "/") {
@@ -1074,7 +1074,7 @@ function _renderMatches(
         }
         value={{
           outlet,
-          matches: parentMatches.concat(matches.slice(0, index + 1))
+          matches: parentMatches.concat(matches.slice(0, index + 1)),
         }}
       />
     );
@@ -1181,7 +1181,7 @@ export function matchPath<
     params,
     pathname: matchedPathname,
     pathnameBase,
-    pattern
+    pattern,
   };
 }
 
@@ -1254,7 +1254,7 @@ export function resolvePath(to: To, fromPathname = "/"): Path {
   let {
     pathname: toPathname,
     search = "",
-    hash = ""
+    hash = "",
   } = typeof to === "string" ? parsePath(to) : to;
 
   let pathname = toPathname
@@ -1266,7 +1266,7 @@ export function resolvePath(to: To, fromPathname = "/"): Path {
   return {
     pathname,
     search: normalizeSearch(search),
-    hash: normalizeHash(hash)
+    hash: normalizeHash(hash),
   };
 }
 
@@ -1274,7 +1274,7 @@ function resolvePathname(relativePath: string, fromPathname: string): string {
   let segments = fromPathname.replace(/\/+$/, "").split("/");
   let relativeSegments = relativePath.split("/");
 
-  relativeSegments.forEach(segment => {
+  relativeSegments.forEach((segment) => {
     if (segment === "..") {
       // Keep the root "" segment so the pathname starts at /
       if (segments.length > 1) segments.pop();
@@ -1399,5 +1399,5 @@ const normalizeHash = (hash: string): string =>
 export {
   NavigationContext as UNSAFE_NavigationContext,
   LocationContext as UNSAFE_LocationContext,
-  RouteContext as UNSAFE_RouteContext
+  RouteContext as UNSAFE_RouteContext,
 };
diff --git a/packages/react-router/jest-transformer.js b/packages/react-router/jest-transformer.js
index 241de5b39f..7658127ad4 100644
--- a/packages/react-router/jest-transformer.js
+++ b/packages/react-router/jest-transformer.js
@@ -4,7 +4,7 @@ module.exports = babelJest.createTransformer({
   presets: [
     ["@babel/preset-env", { loose: true }],
     "@babel/preset-react",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
   ],
-  plugins: ["babel-plugin-dev-expression"]
+  plugins: ["babel-plugin-dev-expression"],
 });
diff --git a/packages/react-router/jest.config.js b/packages/react-router/jest.config.js
index 49b53030a8..42f4816c69 100644
--- a/packages/react-router/jest.config.js
+++ b/packages/react-router/jest.config.js
@@ -1,9 +1,9 @@
 module.exports = {
   testMatch: ["**/__tests__/*-test.[jt]s?(x)"],
   transform: {
-    "\\.[jt]sx?$": "./jest-transformer.js"
+    "\\.[jt]sx?$": "./jest-transformer.js",
   },
   globals: {
-    __DEV__: true
-  }
+    __DEV__: true,
+  },
 };
diff --git a/prettier.config.js b/prettier.config.js
index b60479c29d..6588ba1fea 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,4 @@
 /**
  * @type {import('prettier').Options}
  */
-module.exports = {
-  arrowParens: "avoid",
-  trailingComma: "none"
-};
+module.exports = {};
diff --git a/rollup.config.js b/rollup.config.js
index 86793a38bc..592f05af28 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -37,7 +37,7 @@ function reactRouter() {
         file: `${OUTPUT_DIR}/index.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router", version)
+        banner: createBanner("React Router", version),
       },
       external: ["history", "react"],
       plugins: [
@@ -46,21 +46,21 @@ function reactRouter() {
           presets: [
             ["@babel/preset-env", { loose: true }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         copy({
           targets: [
             { src: `${SOURCE_DIR}/package.json`, dest: OUTPUT_DIR },
             { src: `${SOURCE_DIR}/README.md`, dest: OUTPUT_DIR },
-            { src: "LICENSE.md", dest: OUTPUT_DIR }
+            { src: "LICENSE.md", dest: OUTPUT_DIR },
           ],
-          verbose: true
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+          verbose: true,
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   // JS modules for <script type=module>
@@ -71,7 +71,7 @@ function reactRouter() {
         file: `${OUTPUT_DIR}/react-router.development.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router", version)
+        banner: createBanner("React Router", version),
       },
       external: ["history", "react"],
       plugins: [
@@ -80,16 +80,16 @@ function reactRouter() {
           presets: [
             "@babel/preset-modules",
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("development") }
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
+          values: { "process.env.NODE_ENV": JSON.stringify("development") },
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
     {
       input: `${SOURCE_DIR}/index.tsx`,
@@ -97,7 +97,7 @@ function reactRouter() {
         file: `${OUTPUT_DIR}/react-router.production.min.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router", version)
+        banner: createBanner("React Router", version),
       },
       external: ["history", "react"],
       plugins: [
@@ -108,29 +108,29 @@ function reactRouter() {
               "@babel/preset-modules",
               {
                 // Don't spoof `.name` for Arrow Functions, which breaks when minified anyway.
-                loose: true
-              }
+                loose: true,
+              },
             ],
             [
               "@babel/preset-react",
               {
                 // Compile JSX Spread to Object.assign(), which is reliable in ESM browsers.
-                useBuiltIns: true
-              }
+                useBuiltIns: true,
+              },
             ],
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("production") }
+          values: { "process.env.NODE_ENV": JSON.stringify("production") },
         }),
         // compiler(),
-        terser({ ecma: 8, safari10: true })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+        terser({ ecma: 8, safari10: true }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   // UMD modules for <script> tags and CommonJS (node)
@@ -143,7 +143,7 @@ function reactRouter() {
         sourcemap: !PRETTY,
         banner: createBanner("React Router", version),
         globals: { history: "HistoryLibrary", react: "React" },
-        name: "ReactRouter"
+        name: "ReactRouter",
       },
       external: ["history", "react"],
       plugins: [
@@ -152,16 +152,16 @@ function reactRouter() {
           presets: [
             ["@babel/preset-env", { loose: true }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("development") }
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
+          values: { "process.env.NODE_ENV": JSON.stringify("development") },
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
     {
       input: `${SOURCE_DIR}/index.tsx`,
@@ -171,7 +171,7 @@ function reactRouter() {
         sourcemap: !PRETTY,
         banner: createBanner("React Router", version),
         globals: { history: "HistoryLibrary", react: "React" },
-        name: "ReactRouter"
+        name: "ReactRouter",
       },
       external: ["history", "react"],
       plugins: [
@@ -180,19 +180,19 @@ function reactRouter() {
           presets: [
             ["@babel/preset-env", { loose: true }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("production") }
+          values: { "process.env.NODE_ENV": JSON.stringify("production") },
         }),
         // compiler(),
-        terser()
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+        terser(),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   // Node entry points
@@ -202,10 +202,10 @@ function reactRouter() {
       output: {
         file: `${OUTPUT_DIR}/main.js`,
         format: "cjs",
-        banner: createBanner("React Router", version)
+        banner: createBanner("React Router", version),
       },
-      plugins: [].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+      plugins: [].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   return [...modules, ...webModules, ...globals, ...node];
@@ -224,7 +224,7 @@ function reactRouterDom() {
         file: `${OUTPUT_DIR}/index.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router DOM", version)
+        banner: createBanner("React Router DOM", version),
       },
       external: ["history", "react", "react-dom", "react-router"],
       plugins: [
@@ -233,21 +233,21 @@ function reactRouterDom() {
           presets: [
             ["@babel/preset-env", { loose: true }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         copy({
           targets: [
             { src: `${SOURCE_DIR}/package.json`, dest: OUTPUT_DIR },
             { src: `${SOURCE_DIR}/README.md`, dest: OUTPUT_DIR },
-            { src: "LICENSE.md", dest: OUTPUT_DIR }
+            { src: "LICENSE.md", dest: OUTPUT_DIR },
           ],
-          verbose: true
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+          verbose: true,
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   // JS modules for <script type=module>
@@ -260,7 +260,7 @@ function reactRouterDom() {
         file: `${OUTPUT_DIR}/react-router-dom.development.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router DOM", version)
+        banner: createBanner("React Router DOM", version),
       },
       external: ["history", "react", "react-router"],
       plugins: [
@@ -269,16 +269,16 @@ function reactRouterDom() {
           presets: [
             "@babel/preset-modules",
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("development") }
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
+          values: { "process.env.NODE_ENV": JSON.stringify("development") },
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
     {
       input: `${SOURCE_DIR}/index.tsx`,
@@ -286,7 +286,7 @@ function reactRouterDom() {
         file: `${OUTPUT_DIR}/react-router-dom.production.min.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router DOM", version)
+        banner: createBanner("React Router DOM", version),
       },
       external: ["history", "react", "react-router"],
       plugins: [
@@ -297,29 +297,29 @@ function reactRouterDom() {
               "@babel/preset-modules",
               {
                 // Don't spoof `.name` for Arrow Functions, which breaks when minified anyway.
-                loose: true
-              }
+                loose: true,
+              },
             ],
             [
               "@babel/preset-react",
               {
                 // Compile JSX Spread to Object.assign(), which is reliable in ESM browsers.
-                useBuiltIns: true
-              }
+                useBuiltIns: true,
+              },
             ],
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("production") }
+          values: { "process.env.NODE_ENV": JSON.stringify("production") },
         }),
         // compiler(),
-        terser({ ecma: 8, safari10: true })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+        terser({ ecma: 8, safari10: true }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   // UMD modules for <script> tags and CommonJS (node)
@@ -334,9 +334,9 @@ function reactRouterDom() {
         globals: {
           history: "HistoryLibrary",
           react: "React",
-          "react-router": "ReactRouter"
+          "react-router": "ReactRouter",
         },
-        name: "ReactRouterDOM"
+        name: "ReactRouterDOM",
       },
       external: ["history", "react", "react-router"],
       plugins: [
@@ -345,16 +345,16 @@ function reactRouterDom() {
           presets: [
             ["@babel/preset-env", { loose: true }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("development") }
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
+          values: { "process.env.NODE_ENV": JSON.stringify("development") },
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
     {
       input: `${SOURCE_DIR}/index.tsx`,
@@ -366,9 +366,9 @@ function reactRouterDom() {
         globals: {
           history: "HistoryLibrary",
           react: "React",
-          "react-router": "ReactRouter"
+          "react-router": "ReactRouter",
         },
-        name: "ReactRouterDOM"
+        name: "ReactRouterDOM",
       },
       external: ["history", "react", "react-router"],
       plugins: [
@@ -377,19 +377,19 @@ function reactRouterDom() {
           presets: [
             ["@babel/preset-env", { loose: true }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         replace({
           preventAssignment: true,
-          values: { "process.env.NODE_ENV": JSON.stringify("production") }
+          values: { "process.env.NODE_ENV": JSON.stringify("production") },
         }),
         // compiler(),
-        terser()
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+        terser(),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   // Node entry points
@@ -399,22 +399,22 @@ function reactRouterDom() {
       output: {
         file: `${OUTPUT_DIR}/main.js`,
         format: "cjs",
-        banner: createBanner("React Router DOM", version)
+        banner: createBanner("React Router DOM", version),
       },
-      plugins: [].concat(PRETTY ? prettier({ parser: "babel" }) : [])
+      plugins: [].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
     {
       input: `${SOURCE_DIR}/server.tsx`,
       output: {
         file: `${OUTPUT_DIR}/server.js`,
-        format: "cjs"
+        format: "cjs",
       },
       external: [
         "url",
         "history",
         "react",
         "react-dom/server",
-        "react-router-dom"
+        "react-router-dom",
       ],
       plugins: [
         babel({
@@ -422,26 +422,26 @@ function reactRouterDom() {
           presets: [
             ["@babel/preset-env", { loose: true, targets: { node: true } }],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
-        })
+          extensions: [".ts", ".tsx"],
+        }),
         // compiler()
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
     {
       input: `${SOURCE_DIR}/server.tsx`,
       output: {
         file: `${OUTPUT_DIR}/server.mjs`,
-        format: "esm"
+        format: "esm",
       },
       external: [
         "url",
         "history",
         "react",
         "react-dom/server",
-        "react-router-dom"
+        "react-router-dom",
       ],
       plugins: [
         babel({
@@ -451,18 +451,18 @@ function reactRouterDom() {
               "@babel/preset-modules",
               {
                 // Don't spoof `.name` for Arrow Functions, which breaks when minified anyway.
-                loose: true
-              }
+                loose: true,
+              },
             ],
             "@babel/preset-react",
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
-        })
+          extensions: [".ts", ".tsx"],
+        }),
         // compiler()
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   return [...modules, ...webModules, ...globals, ...node];
@@ -480,7 +480,7 @@ function reactRouterNative() {
         file: `${OUTPUT_DIR}/index.js`,
         format: "esm",
         sourcemap: !PRETTY,
-        banner: createBanner("React Router Native", version)
+        banner: createBanner("React Router Native", version),
       },
       external: [
         "@babel/runtime/helpers/esm/extends",
@@ -489,7 +489,7 @@ function reactRouterNative() {
         "history",
         "react",
         "react-native",
-        "react-router"
+        "react-router",
       ],
       plugins: [
         babel({
@@ -500,24 +500,24 @@ function reactRouterNative() {
               "module:metro-react-native-babel-preset",
               {
                 disableImportExportTransform: true,
-                enableBabelRuntime: false
-              }
+                enableBabelRuntime: false,
+              },
             ],
-            "@babel/preset-typescript"
+            "@babel/preset-typescript",
           ],
           plugins: ["babel-plugin-dev-expression"],
-          extensions: [".ts", ".tsx"]
+          extensions: [".ts", ".tsx"],
         }),
         copy({
           targets: [
             { src: `${SOURCE_DIR}/package.json`, dest: OUTPUT_DIR },
             { src: `${SOURCE_DIR}/README.md`, dest: OUTPUT_DIR },
-            { src: "LICENSE.md", dest: OUTPUT_DIR }
+            { src: "LICENSE.md", dest: OUTPUT_DIR },
           ],
-          verbose: true
-        })
-      ].concat(PRETTY ? prettier({ parser: "babel" }) : [])
-    }
+          verbose: true,
+        }),
+      ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
+    },
   ];
 
   return modules;
@@ -527,7 +527,7 @@ export default function rollup(options) {
   let builds = [
     ...reactRouter(options),
     ...reactRouterDom(options),
-    ...reactRouterNative(options)
+    ...reactRouterNative(options),
   ];
 
   return builds;
diff --git a/scripts/publish.js b/scripts/publish.js
index 3f58cdfd1a..528002f4da 100644
--- a/scripts/publish.js
+++ b/scripts/publish.js
@@ -97,6 +97,6 @@ async function run() {
   return 0;
 }
 
-run().then(code => {
+run().then((code) => {
   process.exit(code);
 });
diff --git a/scripts/version.js b/scripts/version.js
index cbc9783638..47be951d71 100644
--- a/scripts/version.js
+++ b/scripts/version.js
@@ -31,7 +31,7 @@ function ensureCleanWorkingDirectory() {
   let status = execSync(`git status --porcelain`).toString().trim();
   let lines = status.split("\n");
   invariant(
-    lines.every(line => line === "" || line.startsWith("?")),
+    lines.every((line) => line === "" || line.startsWith("?")),
     "Working directory is not clean. Please commit or stash your changes."
   );
 }
@@ -127,13 +127,13 @@ async function run() {
     if (answer === false) return 0;
 
     // 3. Update react-router version
-    await updatePackageConfig("react-router", config => {
+    await updatePackageConfig("react-router", (config) => {
       config.version = version;
     });
     console.log(chalk.green(`  Updated react-router to version ${version}`));
 
     // 4. Update react-router-dom version + react-router dep
-    await updatePackageConfig("react-router-dom", config => {
+    await updatePackageConfig("react-router-dom", (config) => {
       config.version = version;
       config.dependencies["react-router"] = version;
     });
@@ -142,7 +142,7 @@ async function run() {
     );
 
     // 5. Update react-router-native version + react-router dep
-    await updatePackageConfig("react-router-native", config => {
+    await updatePackageConfig("react-router-native", (config) => {
       config.version = version;
       config.dependencies["react-router"] = version;
     });
@@ -156,7 +156,7 @@ async function run() {
       let stat = await fsp.stat(path.join(examplesDir, example));
       if (!stat.isDirectory()) continue;
 
-      await updateExamplesPackageConfig(example, config => {
+      await updateExamplesPackageConfig(example, (config) => {
         config.dependencies["react-router"] = version;
         config.dependencies["react-router-dom"] = version;
       });
@@ -176,6 +176,6 @@ async function run() {
   return 0;
 }
 
-run().then(code => {
+run().then((code) => {
   process.exit(code);
 });
diff --git a/tutorial/src/data.js b/tutorial/src/data.js
index 591741b0e7..35c22c7a00 100644
--- a/tutorial/src/data.js
+++ b/tutorial/src/data.js
@@ -6,32 +6,32 @@ let invoices = [
     name: "Santa Monica",
     number: 1995,
     amount: "$10,800",
-    due: "12/05/1995"
+    due: "12/05/1995",
   },
   {
     name: "Stankonia",
     number: 2000,
     amount: "$8,000",
-    due: "10/31/2000"
+    due: "10/31/2000",
   },
   {
     name: "Ocean Avenue",
     number: 2003,
     amount: "$9,500",
-    due: "07/22/2003"
+    due: "07/22/2003",
   },
   {
     name: "Tubthumper",
     number: 1997,
     amount: "$14,000",
-    due: "09/01/1997"
+    due: "09/01/1997",
   },
   {
     name: "Wide Open Spaces",
     number: 1998,
     amount: "$4,600",
-    due: "01/27/2998"
-  }
+    due: "01/27/2998",
+  },
 ];
 
 export function getInvoices() {
@@ -43,7 +43,7 @@ export function getInvoices() {
  * @returns {Invoice}
  */
 export function getInvoice(number) {
-  return invoices.find(invoice => invoice.number === number);
+  return invoices.find((invoice) => invoice.number === number);
 }
 
 /**
@@ -51,7 +51,7 @@ export function getInvoice(number) {
  * @returns {void}
  */
 export function deleteInvoice(number) {
-  invoices = invoices.filter(invoice => invoice.number !== number);
+  invoices = invoices.filter((invoice) => invoice.number !== number);
 }
 
 /**
diff --git a/tutorial/vite.config.js b/tutorial/vite.config.js
index aaf3acc427..5c4d1cdd51 100644
--- a/tutorial/vite.config.js
+++ b/tutorial/vite.config.js
@@ -10,10 +10,10 @@ export default defineConfig({
       preventAssignment: true,
       values: {
         __DEV__: JSON.stringify(true),
-        "process.env.NODE_ENV": JSON.stringify("development")
-      }
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     }),
-    react()
+    react(),
   ],
   resolve: process.env.USE_SOURCE
     ? {
@@ -25,8 +25,8 @@ export default defineConfig({
           "react-router-dom": path.resolve(
             __dirname,
             "../../packages/react-router-dom/index.tsx"
-          )
-        }
+          ),
+        },
       }
-    : {}
+    : {},
 });
diff --git a/yarn.lock b/yarn.lock
index ef2732a8fa..a5f04e2e0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6952,10 +6952,10 @@ prettier@^1.0.0:
   resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-prettier@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz"
-  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
 pretty-format@^24.7.0, pretty-format@^24.9.0:
   version "24.9.0"