diff --git a/contributors.yml b/contributors.yml
index 7e9d8a5445..a14da780ec 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -1,5 +1,6 @@
 - abhi-kr-2100
 - Ajayff4
+- avipatel97
 - awreese
 - bhbs
 - BrianT1414
@@ -7,11 +8,13 @@
 - brophdawg11
 - chaance
 - chasinhues
+- chensokheng
 - chrisngobanh
 - christopherchudzicki
 - cvbuelow
 - edwin177
 - elylucas
+- emzoumpo
 - gijo-varghese
 - hongji00
 - hsbtr
@@ -20,6 +23,7 @@
 - Isammoc
 - JakubDrozd
 - janpaepke
+- jimniels
 - jmargeta
 - jonkoops
 - kantuni
@@ -40,16 +44,18 @@
 - paulsmithkc
 - petersendidit
 - RobHannay
-- ryanflorence
 - rtmann
+- ryanflorence
 - sanketshah19
 - sergiodxa
 - shamsup
 - shihanng
 - shivamsinghchahar
+- theostavrides
 - thisiskartik
 - ThornWu
 - timdorr
+- tkindy
 - turansky
 - underager
 - vijaypushkin
diff --git a/docs/api.md b/docs/api.md
deleted file mode 100644
index f7f12b13c2..0000000000
--- a/docs/api.md
+++ /dev/null
@@ -1,1488 +0,0 @@
----
-title: API Reference
-order: 2
----
-
-# API Reference
-
-React Router is a collection of [React components](https://reactjs.org/docs/components-and-props.html), [hooks](https://reactjs.org/docs/hooks-intro.html) and utilities that make it easy to build multi-page applications with [React](https://reactjs.org). This reference contains the function signatures and return types of the various interfaces in React Router.
-
-## Overview
-
-### Packages
-
-React Router is published to npm in three different packages:
-
-- [`react-router`](https://npm.im/react-router) contains most of the core functionality of React Router including the route matching algorithm and most of the core components and hooks
-- [`react-router-dom`](https://npm.im/react-router-dom) includes everything from `react-router` and adds a few DOM-specific APIs, including [`<BrowserRouter>`](#browserrouter), [`<HashRouter>`](#hashrouter), and [`<Link>`](#link)
-- [`react-router-native`](https://npm.im/react-router-native) includes everything from `react-router` and adds a few APIs that are specific to React Native, including [`<NativeRouter>`](#nativerouter) and [a native version of `<Link>`](#link-react-native)
-
-Both `react-router-dom` and `react-router-native` automatically include `react-router` as a dependency when you install them, and both packages re-export everything from `react-router`. **When you `import` stuff, you should always import from either `react-router-dom` or `react-router-native` and never directly from `react-router`**. Otherwise you may accidentally import mismatched versions of the library in your app.
-
-If you [installed](./getting-started/installation.md) React Router as a global (using a `<script>` tag), you can find the library on the `window.ReactRouterDOM` object. If you installed it from npm, you can [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the pieces you need. The examples in this reference all use `import` syntax.
-
-### Setup
-
-To get React Router working in your app, you need to render a router element at or near the root of your element tree. We provide several different routers depending on where your app is running.
-
-- [`<BrowserRouter>`](#browserrouter) or [`<HashRouter>`](#hashrouter) should be used when running in a web browser (which one you pick depends on the style of URL you prefer or need)
-- [`<StaticRouter>`](#staticrouter) should be used when server-rendering a website
-- [`<NativeRouter>`](#nativerouter) should be used in [React Native](https://reactnative.dev/) apps
-- [`<MemoryRouter>`](#memoryrouter) is useful in testing scenarios and as a reference implementation for the other routers
-- [`<unstable_HistoryRouter>`](#unstable_historyrouter) is used with your own [`history`](https://github.com/remix-run/history) instance.
-
-These routers provide the context that React Router needs to operate in a particular environment. Each one renders [a `<Router>`](#router) internally, which you may also do if you need more fine-grained control for some reason. But it is highly likely that one of the built-in routers is what you need.
-
-### Routing
-
-Routing is the process of deciding which React elements will be rendered on a given page of your app, and how they will be nested. React Router provides two interfaces for declaring your routes.
-
-- [`<Routes>` and `<Route>`](#routes-and-route) if you're using JSX
-- [`useRoutes`](#useroutes) if you'd prefer a JavaScript object-based config
-
-A few low-level pieces that we use internally are also exposed as public API, in case you need to build your own higher-level interfaces for some reason.
-
-- [`matchPath`](#matchpath) - matches a path pattern against a URL pathname
-- [`matchRoutes`](#matchroutes) - matches a set of routes against a [location](#location)
-- [`createRoutesFromChildren`](#createroutesfromchildren) - creates a route config from a set of React elements (i.e. [`<Route>`](#routes-and-route) elements)
-
-### Navigation
-
-React Router's navigation interfaces let you change the currently rendered page by modifying the current [location](#location). There are two main interfaces for navigating between pages in your app, depending on what you need.
-
-- [`<Link>`](#link) and [`<NavLink>`](#navlink) render an accessible `<a>` element, or a `TouchableHighlight` on React Native. This lets the user initiate navigation by clicking or tapping an element on the page.
-- [`useNavigate`](#usenavigate) and [`<Navigate>`](#navigate) let you programmatically navigate, usually in an event handler or in response to some change in state
-
-There are a few low-level APIs that we use internally that may also prove useful when building your own navigation interfaces.
-
-- [`useResolvedPath`](#useresolvedpath) - resolves a relative path against the current [location](#location)
-- [`useHref`](#usehref) - resolves a relative path suitable for use as a `<a href>`
-- [`useLocation`](#uselocation) and [`useNavigationType`](#usenavigationtype) - these describe the current [location](#location) and how we got there
-- [`useLinkClickHandler`](#uselinkclickhandler) - returns an event handler for navigation when building a custom `<Link>` in `react-router-dom`
-- [`useLinkPressHandler`](#uselinkpresshandler) - returns an event handler for navigation when building a custom `<Link>` in `react-router-native`
-- [`resolvePath`](#resolvepath) - resolves a relative path against a given URL pathname
-
-### Search Parameters
-
-Access to the URL [search parameters](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) is provided via [the `useSearchParams` hook](#usesearchparams).
-
----
-
-## Reference
-
-### `<BrowserRouter>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function BrowserRouter(
-  props: BrowserRouterProps
-): React.ReactElement;
-
-interface BrowserRouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  window?: Window;
-}
-```
-
-</details>
-
-`<BrowserRouter>` is the recommended interface for running React Router in a web browser. A `<BrowserRouter>` stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.
-
-`<BrowserRouter window>` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
-
-```tsx
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
-
-ReactDOM.render(
-  <BrowserRouter>
-    {/* The rest of your app goes here */}
-  </BrowserRouter>,
-  root
-);
-```
-
-### `<HashRouter>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function HashRouter(
-  props: HashRouterProps
-): React.ReactElement;
-
-interface HashRouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  window?: Window;
-}
-```
-
-</details>
-
-`<HashRouter>` is for use in web browsers when the URL should not (or cannot) be sent to the server for some reason. This may happen in some shared hosting scenarios where you do not have full control over the server. In these situations, `<HashRouter>` makes it possible to store the current location in the `hash` portion of the current URL, so it is never sent to the server.
-
-`<HashRouter window>` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
-
-```tsx
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { HashRouter } from "react-router-dom";
-
-ReactDOM.render(
-  <HashRouter>
-    {/* The rest of your app goes here */}
-  </HashRouter>,
-  root
-);
-```
-
-<docs-warning>We strongly recommend you do not use `HashRouter` unless you absolutely have to.</docs-warning>
-
-### `<NativeRouter>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function NativeRouter(
-  props: NativeRouterProps
-): React.ReactElement;
-
-interface NativeRouterProps extends MemoryRouterProps {}
-```
-
-</details>
-
-`<NativeRouter>` is the recommended interface for running React Router in a [React Native](https://reactnative.dev) app.
-
-- `<NativeRouter initialEntries>` defaults to `["/"]` (a single entry at the root `/` URL)
-- `<NativeRouter initialIndex>` defaults to the last index of `initialEntries`
-
-```tsx
-import * as React from "react";
-import { NativeRouter } from "react-router-native";
-
-function App() {
-  return (
-    <NativeRouter>
-      {/* The rest of your app goes here */}
-    </NativeRouter>
-  );
-}
-```
-
-### `<MemoryRouter>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function MemoryRouter(
-  props: MemoryRouterProps
-): React.ReactElement;
-
-interface MemoryRouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  initialEntries?: InitialEntry[];
-  initialIndex?: number;
-}
-```
-
-</details>
-
-A `<MemoryRouter>` stores its locations internally in an array. Unlike `<BrowserHistory>` and `<HashHistory>`, it isn't tied to an external source, like the history stack in a browser. This makes it ideal for scenarios where you need complete control over the history stack, like testing.
-
-- `<MemoryRouter initialEntries>` defaults to `["/"]` (a single entry at the root `/` URL)
-- `<MemoryRouter initialIndex>` defaults to the last index of `initialEntries`
-
-> **Tip:**
->
-> Most of React Router's tests are written using a `<MemoryRouter>` as the
-> source of truth, so you can see some great examples of using it by just
-> [browsing through our tests](https://github.com/remix-run/react-router/tree/main/packages/react-router/__tests__).
-
-```tsx
-import * as React from "react";
-import { create } from "react-test-renderer";
-import {
-  MemoryRouter,
-  Routes,
-  Route,
-} from "react-router-dom";
-
-describe("My app", () => {
-  it("renders correctly", () => {
-    let renderer = create(
-      <MemoryRouter initialEntries={["/users/mjackson"]}>
-        <Routes>
-          <Route path="users" element={<Users />}>
-            <Route path=":id" element={<UserProfile />} />
-          </Route>
-        </Routes>
-      </MemoryRouter>
-    );
-
-    expect(renderer.toJSON()).toMatchSnapshot();
-  });
-});
-```
-
-### `<unstable_HistoryRouter>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function HistoryRouter(
-  props: HistoryRouterProps
-): React.ReactElement;
-
-interface HistoryRouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  history: History;
-}
-```
-
-</details>
-
-`<unstable_HistoryRouter>` takes an instance of the [`history`](https://github.com/remix-run/history) library as prop. This allows you to use that instance in non-React contexts or as a global variable.
-
-```tsx
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
-import { createBrowserHistory } from "history";
-
-const history = createBrowserHistory({ window });
-
-ReactDOM.render(
-  <HistoryRouter history={history}>
-    {/* The rest of your app goes here */}
-  </HistoryRouter>,
-  root
-);
-```
-
-<docs-warning>This API is currently prefixed as `unstable_` because you may unintentionally add two versions of the `history` library to your app, the one you have added to your package.json and whatever version React Router uses internally. If it is allowed by your tooling, it's recommended to not add `history` as a direct dependency and instead rely on the nested dependency from the `react-router` package. Once we have a mechanism to detect mis-matched versions, this API will remove its `unstable_` prefix.</docs-warning>
-
-### `<Link>`
-
-> **Note:**
->
-> This is the web version of `<Link>`. For the React Native version,
-> [go here](#link-react-native).
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function Link(props: LinkProps): React.ReactElement;
-
-interface LinkProps
-  extends Omit<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    "href"
-  > {
-  replace?: boolean;
-  state?: any;
-  to: To;
-  reloadDocument?: boolean;
-}
-
-type To = Partial<Location> | string;
-```
-
-</details>
-
-A `<Link>` is an element that lets the user navigate to another page by clicking or tapping on it. In `react-router-dom`, a `<Link>` renders an accessible `<a>` element with a real `href` that points to the resource it's linking to. This means that things like right-clicking a `<Link>` work as you'd expect. You can use `<Link reloadDocument>` to skip client side routing and let the browser handle the transition normally (as if it were an `<a href>`).
-
-```tsx
-import * as React from "react";
-import { Link } from "react-router-dom";
-
-function UsersIndexPage({ users }) {
-  return (
-    <div>
-      <h1>Users</h1>
-      <ul>
-        {users.map((user) => (
-          <li key={user.id}>
-            <Link to={user.id}>{user.name}</Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
-A relative `<Link to>` value (that does not begin with `/`) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that `<Link>`. It may contain `..` to link to routes further up the hierarchy. In these cases, `..` works exactly like the command-line `cd` function; each `..` removes one segment of the parent path.
-
-> **Note:**
->
-> `<Link to>` with a `..` behaves differently from a normal `<a href>` when the
-> current URL ends with `/`. `<Link to>` ignores the trailing slash, and removes
-> one URL segment for each `..`. But an `<a href>` value handles `..`
-> differently when the current URL ends with `/` vs when it does not.
-
-### `<Link>` (React Native)
-
-> **Note:**
->
-> This is the React Native version of `<Link>`. For the web version,
-> [go here](#link).
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function Link(props: LinkProps): React.ReactElement;
-
-interface LinkProps extends TouchableHighlightProps {
-  children?: React.ReactNode;
-  onPress?(event: GestureResponderEvent): void;
-  replace?: boolean;
-  state?: any;
-  to: To;
-}
-```
-
-</details>
-
-A `<Link>` is an element that lets the user navigate to another view by tapping it, similar to how `<a>` elements work in a web app. In `react-router-native`, a `<Link>` renders a `TouchableHighlight`. To override default styling and behaviour, please refer to the [Props reference for `TouchableHighlight`](https://reactnative.dev/docs/touchablehighlight#props).
-
-```tsx
-import * as React from "react";
-import { View, Text } from "react-native";
-import { Link } from "react-router-native";
-
-function Home() {
-  return (
-    <View>
-      <Text>Welcome!</Text>
-      <Link to="/profile">Visit your profile</Link>
-    </View>
-  );
-}
-```
-
-### `<NavLink>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function NavLink(
-  props: NavLinkProps
-): React.ReactElement;
-
-interface NavLinkProps
-  extends Omit<
-    LinkProps,
-    "className" | "style" | "children"
-  > {
-  caseSensitive?: boolean;
-  children?:
-    | React.ReactNode
-    | ((props: { isActive: boolean }) => React.ReactNode);
-  className?:
-    | string
-    | ((props: {
-        isActive: boolean;
-      }) => string | undefined);
-  end?: boolean;
-  style?:
-    | React.CSSProperties
-    | ((props: {
-        isActive: boolean;
-      }) => React.CSSProperties);
-}
-```
-
-</details>
-
-A `<NavLink>` is a special kind of [`<Link>`](#link) that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
-
-By default, an `active` class is added to a `<NavLink>` component when it is active. This provides the same simple styling mechanism for most users who are upgrading from v5. One difference as of `v6.0.0-beta.3` is that `activeClassName` and `activeStyle` have been removed from `NavLinkProps`. Instead, you can pass a function to either `style` or `className` that will allow you to customize the inline styling or the class string based on the component's active state. You can also pass a function as children to customize the content of the `<NavLink>` component based on their active state, specially useful to change styles on internal elements.
-
-```tsx
-import * as React from "react";
-import { NavLink } from "react-router-dom";
-
-function NavList() {
-  // This styling will be applied to a <NavLink> when the
-  // route that it links to is currently selected.
-  let activeStyle = {
-    textDecoration: "underline",
-  };
-
-  let activeClassName = "underline";
-
-  return (
-    <nav>
-      <ul>
-        <li>
-          <NavLink
-            to="messages"
-            style={({ isActive }) =>
-              isActive ? activeStyle : undefined
-            }
-          >
-            Messages
-          </NavLink>
-        </li>
-        <li>
-          <NavLink
-            to="tasks"
-            className={({ isActive }) =>
-              isActive ? activeClassName : undefined
-            }
-          >
-            Tasks
-          </NavLink>
-        </li>
-        <li>
-          <NavLink to="tasks">
-            {({ isActive }) => (
-              <span
-                className={
-                  isActive ? activeClassName : undefined
-                }
-              >
-                Tasks
-              </span>
-            )}
-          </NavLink>
-        </li>
-      </ul>
-    </nav>
-  );
-}
-```
-
-If you prefer the v5 API, you can create your own `<NavLink />` as a wrapper component:
-
-```tsx
-import * as React from "react";
-import { NavLink as BaseNavLink } from "react-router-dom";
-
-const NavLink = React.forwardRef(
-  ({ activeClassName, activeStyle, ...props }, ref) => {
-    return (
-      <BaseNavLink
-        ref={ref}
-        {...props}
-        className={({ isActive }) =>
-          [
-            props.className,
-            isActive ? activeClassName : null,
-          ]
-            .filter(Boolean)
-            .join(" ")
-        }
-        style={({ isActive }) => ({
-          ...props.style,
-          ...(isActive ? activeStyle : null),
-        })}
-      />
-    );
-  }
-);
-```
-
-If the `end` prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use:
-
-```tsx
-<NavLink to="/" end>
-  Home
-</NavLink>
-```
-
-### `<Navigate>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function Navigate(props: NavigateProps): null;
-
-interface NavigateProps {
-  to: To;
-  replace?: boolean;
-  state?: any;
-}
-```
-
-</details>
-
-A `<Navigate>` element changes the current location when it is rendered. It's a component wrapper around [`useNavigate`](#usenavigate), and accepts all the same arguments as props.
-
-> **Note:**
->
-> Having a component-based version of the `useNavigate` hook makes it easier to
-> use this feature in a [`React.Component`](https://reactjs.org/docs/react-component.html)
-> subclass where hooks are not able to be used.
-
-```tsx
-import * as React from "react";
-import { Navigate } from "react-router-dom";
-
-class LoginForm extends React.Component {
-  state = { user: null, error: null };
-
-  async handleSubmit(event) {
-    event.preventDefault();
-    try {
-      let user = await login(event.target);
-      this.setState({ user });
-    } catch (error) {
-      this.setState({ error });
-    }
-  }
-
-  render() {
-    let { user, error } = this.state;
-    return (
-      <div>
-        {error && <p>{error.message}</p>}
-        {user && (
-          <Navigate to="/dashboard" replace={true} />
-        )}
-        <form
-          onSubmit={(event) => this.handleSubmit(event)}
-        >
-          <input type="text" name="username" />
-          <input type="password" name="password" />
-        </form>
-      </div>
-    );
-  }
-}
-```
-
-### `<Outlet>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-interface OutletProps {
-  context?: unknown;
-}
-declare function Outlet(
-  props: OutletProps
-): React.ReactElement | null;
-```
-
-</details>
-
-An `<Outlet>` should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.
-
-```tsx
-function Dashboard() {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-
-      {/* This element will render either <DashboardMessages> when the URL is
-          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
-      */}
-      <Outlet />
-    </div>
-  );
-}
-
-function App() {
-  return (
-    <Routes>
-      <Route path="/" element={<Dashboard />}>
-        <Route
-          path="messages"
-          element={<DashboardMessages />}
-        />
-        <Route path="tasks" element={<DashboardTasks />} />
-      </Route>
-    </Routes>
-  );
-}
-```
-
-### `useOutletContext`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useOutletContext<
-  Context = unknown
->(): Context;
-```
-
-</details>
-
-Often parent routes manage state or other values you want shared with child routes. You can create your own [context provider](https://reactjs.org/docs/context.html) if you like, but this is such a common situation that it's built-into `<Outlet />`:
-
-```tsx lines=[3]
-function Parent() {
-  const [count, setCount] = React.useState(0);
-  return <Outlet context={[count, setCount]} />;
-}
-```
-
-```tsx lines=[2]
-import { useOutletContext } from "react-router-dom";
-
-function Child() {
-  const [count, setCount] = useOutletContext();
-  const increment = () => setCount((c) => c + 1);
-  return <button onClick={increment}>{count}</button>;
-}
-```
-
-If you're using TypeScript, we recommend the parent component provide a custom hook for accessing the context value. This makes it easier for consumers to get nice typings, control consumers, and know who's consuming the context value. Here's a more realistic example:
-
-```tsx filename=src/routes/dashboard.tsx lines=[12,17-19]
-import * as React from "react";
-import type { User } from "./types";
-import { Outlet, useOutletContext } from "react-router-dom";
-
-type ContextType = { user: User | null };
-
-export default function Dashboard() {
-  const [user, setUser] = React.useState<User | null>(null);
-
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      <Outlet context={{ user }} />
-    </div>
-  );
-}
-
-export function useUser() {
-  return useOutletContext<ContextType>();
-}
-```
-
-```tsx filename=src/routes/dashboard/messages.tsx lines=[1,4]
-import { useUser } from "../dashboard";
-
-export default function DashboardMessages() {
-  const { user } = useUser();
-  return (
-    <div>
-      <h2>Messages</h2>
-      <p>Hello, {user.name}!</p>
-    </div>
-  );
-}
-```
-
-### `<Router>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function Router(
-  props: RouterProps
-): React.ReactElement | null;
-
-interface RouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  location: Partial<Location> | string;
-  navigationType?: NavigationType;
-  navigator: Navigator;
-  static?: boolean;
-}
-```
-
-</details>
-
-`<Router>` is the low-level interface that is shared by all router components ([`<BrowserRouter>`](#browserrouter), [`<HashRouter>`](#hashrouter), [`<StaticRouter>`](#staticrouter), [`<NativeRouter>`](#nativerouter), and [`<MemoryRouter>`](#memoryrouter)). In terms of React, `<Router>` is a [context provider](https://reactjs.org/docs/context.html#contextprovider) that supplies routing information to the rest of the app.
-
-You probably never need to render a `<Router>` manually. Instead, you should use one of the higher-level routers depending on your environment. You only ever need one router in a given app.
-
-The `<Router basename>` prop may be used to make all routes and links in your app relative to a "base" portion of the URL pathname that they all share. This is useful when rendering only a portion of a larger app with React Router or when your app has multiple entry points. Basenames are not case-sensitive.
-
-<a name="routes"></a>
-<a name="route"></a>
-<a name="routes-and-route"></a>
-
-### `<Routes>` and `<Route>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function Routes(
-  props: RoutesProps
-): React.ReactElement | null;
-
-interface RoutesProps {
-  children?: React.ReactNode;
-  location?: Partial<Location> | string;
-}
-
-declare function Route(
-  props: RouteProps
-): React.ReactElement | null;
-
-interface RouteProps {
-  caseSensitive?: boolean;
-  children?: React.ReactNode;
-  element?: React.ReactNode | null;
-  index?: boolean;
-  path?: string;
-}
-```
-
-</details>
-
-`<Routes>` and `<Route>` are the primary ways to render something in React Router based on the current [`location`](#location). You can think about a `<Route>` kind of like an `if` statement; if its `path` matches the current URL, it renders its `element`! The `<Route caseSensitive>` prop determines if the matching should be done in a case-sensitive manner (defaults to `false`).
-
-Whenever the location changes, `<Routes>` looks through all its `children` `<Route>` elements to find the best match and renders that branch of the UI. `<Route>` elements may be nested to indicate nested UI, which also correspond to nested URL paths. Parent routes render their child routes by rendering an [`<Outlet>`](#outlet).
-
-```tsx
-<Routes>
-  <Route path="/" element={<Dashboard />}>
-    <Route
-      path="messages"
-      element={<DashboardMessages />}
-    />
-    <Route path="tasks" element={<DashboardTasks />} />
-  </Route>
-  <Route path="about" element={<AboutPage />} />
-</Routes>
-```
-
-> **Note:**
->
-> If you'd prefer to define your routes as regular JavaScript objects instead
-> of using JSX, [try `useRoutes` instead](#useroutes).
-
-The default `<Route element>` is an [`<Outlet>`](#outlet). This means the route will still render its children even without an explicit `element` prop, so you can nest route paths without nesting UI around the child route elements.
-
-For example, in the following config the parent route renders an `<Outlet>` by default, so the child route will render without any surrounding UI. But the child route's path is `/users/:id` because it still builds on its parent.
-
-```tsx
-<Route path="users">
-  <Route path=":id" element={<UserProfile />} />
-</Route>
-```
-
-### `<StaticRouter>`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function StaticRouter(
-  props: StaticRouterProps
-): React.ReactElement;
-
-interface StaticRouterProps {
-  basename?: string;
-  children?: React.ReactNode;
-  location?: Path | LocationPieces;
-}
-```
-
-</details>
-
-`<StaticRouter>` is used to render a React Router web app in [node](https://nodejs.org). Provide the current location via the `location` prop.
-
-- `<StaticRouter location>` defaults to `"/"`
-
-```tsx
-import * as React from "react";
-import * as ReactDOMServer from "react-dom/server";
-import { StaticRouter } from "react-router-dom/server";
-import http from "http";
-
-function requestHandler(req, res) {
-  let html = ReactDOMServer.renderToString(
-    <StaticRouter location={req.url}>
-      {/* The rest of your app goes here */}
-    </StaticRouter>
-  );
-
-  res.write(html);
-  res.end();
-}
-
-http.createServer(requestHandler).listen(3000);
-```
-
-### `createRoutesFromChildren`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function createRoutesFromChildren(
-  children: React.ReactNode
-): RouteObject[];
-
-interface RouteObject {
-  caseSensitive?: boolean;
-  children?: RouteObject[];
-  element?: React.ReactNode;
-  index?: boolean;
-  path?: string;
-}
-```
-
-</details>
-
-`createRoutesFromChildren` is a helper that creates route objects from `<Route>` elements. It is used internally in a [`<Routes>` element](#routes-and-route) to generate a route config from its [`<Route>`](#routes-and-route) children.
-
-### `generatePath`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function generatePath(
-  path: string,
-  params?: Params
-): string;
-```
-
-</details>
-
-`generatePath` interpolates a set of params into a route path string with `:id` and `*` placeholders. This can be useful when you want to eliminate placeholders from a route path so it matches statically instead of using a dynamic parameter.
-
-```tsx
-generatePath("/users/:id", { id: 42 }); // "/users/42"
-generatePath("/files/:type/*", {
-  type: "img",
-  "*": "cat.jpg",
-}); // "/files/img/cat.jpg"
-```
-
-### `Location`
-
-The term "location" in React Router refers to [the `Location` interface](https://github.com/remix-run/history/blob/main/docs/api-reference.md#location) from the [history](https://github.com/remix-run/history) library.
-
-> **Note:**
->
-> The `history` package is React Router's only dependency and many of the
-> core types in React Router come directly from that library including
-> `Location`, `To`, `Path`, and others. You can read more about
-> the history library in [its documentation](https://github.com/remix-run/history/tree/main/docs).
-
-### `matchRoutes`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function matchRoutes(
-  routes: RouteObject[],
-  location: Partial<Location> | string,
-  basename?: string
-): RouteMatch[] | null;
-
-interface RouteMatch<ParamKey extends string = string> {
-  params: Params<ParamKey>;
-  pathname: string;
-  route: RouteObject;
-}
-```
-
-</details>
-
-`matchRoutes` runs the route matching algorithm for a set of routes against a given [`location`](#location) to see which routes (if any) match. If it finds a match, an array of `RouteMatch` objects is returned, one for each route that matched.
-
-This is the heart of React Router's matching algorithm. It is used internally by [`useRoutes`](#useroutes) and the [`<Routes>` component](#routes-and-route) to determine which routes match the current location. It can also be useful in some situations where you want to manually match a set of routes.
-
-### `renderMatches`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function renderMatches(
-  matches: RouteMatch[] | null
-): React.ReactElement | null;
-```
-
-</details>
-
-`renderMatches` renders the result of `matchRoutes()` into a React element.
-
-### `matchPath`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function matchPath<
-  ParamKey extends string = string
->(
-  pattern: PathPattern | string,
-  pathname: string
-): PathMatch<ParamKey> | null;
-
-interface PathMatch<ParamKey extends string = string> {
-  params: Params<ParamKey>;
-  pathname: string;
-  pattern: PathPattern;
-}
-
-interface PathPattern {
-  path: string;
-  caseSensitive?: boolean;
-  end?: boolean;
-}
-```
-
-</details>
-
-`matchPath` matches a route path pattern against a URL pathname and returns information about the match. This is useful whenever you need to manually run the router's matching algorithm to determine if a route path matches or not. It returns `null` if the pattern does not match the given pathname.
-
-The [`useMatch` hook](#usematch) uses this function internally to match a route path relative to the current location.
-
-### `resolvePath`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function resolvePath(
-  to: To,
-  fromPathname?: string
-): Path;
-
-type To = Partial<Location> | string;
-
-interface Path {
-  pathname: string;
-  search: string;
-  hash: string;
-}
-```
-
-</details>
-
-`resolvePath` resolves a given `To` value into an actual `Path` object with an absolute `pathname`. This is useful whenever you need to know the exact path for a relative `To` value. For example, the `<Link>` component uses this function to know the actual URL it points to.
-
-The [`useResolvedPath` hook](#useresolvedpath) uses `resolvePath` internally to resolve the pathname. If `to` contains a pathname, it is resolved against the current route pathname. Otherwise, it is resolved against the current URL (`location.pathname`).
-
-### `useHref`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useHref(to: To): string;
-```
-
-</details>
-
-The `useHref` hook returns a URL that may be used to link to the given `to` location, even outside of React Router.
-
-> **Tip:**
->
-> You may be interested in taking a look at the source for the `<Link>`
-> component in `react-router-dom` to see how it uses `useHref` internally to
-> determine its own `href` value.
-
-### `useLinkClickHandler`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useLinkClickHandler<
-  E extends Element = HTMLAnchorElement
->(
-  to: To,
-  options?: {
-    target?: React.HTMLAttributeAnchorTarget;
-    replace?: boolean;
-    state?: any;
-  }
-): (event: React.MouseEvent<E, MouseEvent>) => void;
-```
-
-</details>
-
-The `useLinkClickHandler` hook returns a click event handler for navigation when building a custom `<Link>` in `react-router-dom`.
-
-```tsx
-import {
-  useHref,
-  useLinkClickHandler,
-} from "react-router-dom";
-
-const StyledLink = styled("a", { color: "fuchsia" });
-
-const Link = React.forwardRef(
-  (
-    {
-      onClick,
-      replace = false,
-      state,
-      target,
-      to,
-      ...rest
-    },
-    ref
-  ) => {
-    let href = useHref(to);
-    let handleClick = useLinkClickHandler(to, {
-      replace,
-      state,
-      target,
-    });
-
-    return (
-      <StyledLink
-        {...rest}
-        href={href}
-        onClick={(event) => {
-          onClick?.(event);
-          if (!event.defaultPrevented) {
-            handleClick(event);
-          }
-        }}
-        ref={ref}
-        target={target}
-      />
-    );
-  }
-);
-```
-
-### `useLinkPressHandler`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useLinkPressHandler(
-  to: To,
-  options?: {
-    replace?: boolean;
-    state?: any;
-  }
-): (event: GestureResponderEvent) => void;
-```
-
-</details>
-
-The `react-router-native` counterpart to `useLinkClickHandler`, `useLinkPressHandler` returns a press event handler for custom `<Link>` navigation.
-
-```tsx
-import { TouchableHighlight } from "react-native";
-import { useLinkPressHandler } from "react-router-native";
-
-function Link({
-  onPress,
-  replace = false,
-  state,
-  to,
-  ...rest
-}) {
-  let handlePress = useLinkPressHandler(to, {
-    replace,
-    state,
-  });
-
-  return (
-    <TouchableHighlight
-      {...rest}
-      onPress={(event) => {
-        onPress?.(event);
-        if (!event.defaultPrevented) {
-          handlePress(event);
-        }
-      }}
-    />
-  );
-}
-```
-
-### `useInRouterContext`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useInRouterContext(): boolean;
-```
-
-</details>
-
-The `useInRouterContext` hooks returns `true` if the component is being rendered in the context of a `<Router>`, `false` otherwise. This can be useful for some 3rd-party extensions that need to know if they are being rendered in the context of a React Router app.
-
-### `useLocation`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useLocation(): Location;
-
-interface Location extends Path {
-  state: unknown;
-  key: Key;
-}
-```
-
-</details>
-
-This hook returns the current [`location`](#location) object. This can be useful if you'd like to perform some side effect whenever the current location changes.
-
-```tsx
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-
-function App() {
-  let location = useLocation();
-
-  React.useEffect(() => {
-    ga('send', 'pageview');
-  }, [location]);
-
-  return (
-    // ...
-  );
-}
-```
-
-### `useNavigationType`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useNavigationType(): NavigationType;
-
-type NavigationType = "POP" | "PUSH" | "REPLACE";
-```
-
-</details>
-
-This hook returns the current type of navigation or how the user came to the current page; either via a pop, push, or replace action on the history stack.
-
-### `useMatch`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useMatch<ParamKey extends string = string>(
-  pattern: PathPattern | string
-): PathMatch<ParamKey> | null;
-```
-
-</details>
-
-Returns match data about a route at the given path relative to the current location.
-
-See [`matchPath`](#matchpath) for more information.
-
-### `useNavigate`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useNavigate(): NavigateFunction;
-
-interface NavigateFunction {
-  (
-    to: To,
-    options?: { replace?: boolean; state?: any }
-  ): void;
-  (delta: number): void;
-}
-```
-
-</details>
-
-The `useNavigate` hook returns a function that lets you navigate programmatically, for example after a form is submitted.
-
-```tsx
-import { useNavigate } from "react-router-dom";
-
-function SignupForm() {
-  let navigate = useNavigate();
-
-  async function handleSubmit(event) {
-    event.preventDefault();
-    await submitForm(event.target);
-    navigate("../success", { replace: true });
-  }
-
-  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
-}
-```
-
-The `navigate` function has two signatures:
-
-- Either pass a `To` value (same type as `<Link to>`) with an optional second `{ replace, state }` arg or
-- Pass the delta you want to go in the history stack. For example, `navigate(-1)` is equivalent to hitting the back button.
-
-### `useOutlet`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useOutlet(): React.ReactElement | null;
-```
-
-</details>
-
-Returns the element for the child route at this level of the route hierarchy. This hook is used internally by [`<Outlet>`](#outlet) to render child routes.
-
-### `useParams`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useParams<
-  K extends string = string
->(): Readonly<Params<K>>;
-```
-
-</details>
-
-The `useParams` hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the `<Route path>`. Child routes inherit all params from their parent routes.
-
-```tsx
-import * as React from 'react';
-import { Routes, Route, useParams } from 'react-router-dom';
-
-function ProfilePage() {
-  // Get the userId param from the URL.
-  let { userId } = useParams();
-  // ...
-}
-
-function App() {
-  return (
-    <Routes>
-      <Route path="users">
-        <Route path=":userId" element={<ProfilePage />} />
-        <Route path="me" element={...} />
-      </Route>
-    </Routes>
-  );
-}
-```
-
-### `useResolvedPath`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useResolvedPath(to: To): Path;
-```
-
-</details>
-
-This hook resolves the `pathname` of the location in the given `to` value against the pathname of the current location.
-
-This is useful when building links from relative values. For example, check out the source to [`<NavLink>`](#navlink) which calls `useResolvedPath` internally to resolve the full pathname of the page being linked to.
-
-See [`resolvePath`](#resolvepath) for more information.
-
-### `useRoutes`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useRoutes(
-  routes: RouteObject[],
-  location?: Partial<Location> | string;
-): React.ReactElement | null;
-```
-
-</details>
-
-The `useRoutes` hook is the functional equivalent of [`<Routes>`](#routes), but it uses JavaScript objects instead of `<Route>` elements to define your routes. These objects have the same properties as normal [`<Route>` elements](#routes-and-route), but they don't require JSX.
-
-The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
-
-```tsx
-import * as React from "react";
-import { useRoutes } from "react-router-dom";
-
-function App() {
-  let element = useRoutes([
-    {
-      path: "/",
-      element: <Dashboard />,
-      children: [
-        {
-          path: "messages",
-          element: <DashboardMessages />,
-        },
-        { path: "tasks", element: <DashboardTasks /> },
-      ],
-    },
-    { path: "team", element: <AboutPage /> },
-  ]);
-
-  return element;
-}
-```
-
-### `useSearchParams`
-
-> **Note:**
->
-> This is the web version of `useSearchParams`. For the React Native version,
-> [go here](#usesearchparams-react-native).
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useSearchParams(
-  defaultInit?: URLSearchParamsInit
-): [URLSearchParams, SetURLSearchParams];
-
-type ParamKeyValuePair = [string, string];
-
-type URLSearchParamsInit =
-  | string
-  | ParamKeyValuePair[]
-  | Record<string, string | string[]>
-  | URLSearchParams;
-
-type SetURLSearchParams = (
-  nextInit?: URLSearchParamsInit,
-  navigateOpts?: : { replace?: boolean; state?: any }
-) => void;
-```
-
-</details>
-
-The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook](https://reactjs.org/docs/hooks-reference.html#usestate), `useSearchParams` returns an array of two values: the current location's [search params](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) and a function that may be used to update them.
-
-```tsx
-import * as React from "react";
-import { useSearchParams } from "react-router-dom";
-
-function App() {
-  let [searchParams, setSearchParams] = useSearchParams();
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    // The serialize function here would be responsible for
-    // creating an object of { key: value } pairs from the
-    // fields in the form that make up the query.
-    let params = serializeFormQuery(event.target);
-    setSearchParams(params);
-  }
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>{/* ... */}</form>
-    </div>
-  );
-}
-```
-
-> **Note:**
->
-> The `setSearchParams` function works like [`navigate`](#usenavigate), but
-> only for the [search portion](https://developer.mozilla.org/en-US/docs/Web/API/Location/search)
-> of the URL. Also note that the second arg to `setSearchParams` is
-> the same type as the second arg to `navigate`.
-
-### `useSearchParams` (React Native)
-
-> **Note:**
->
-> This is the React Native version of `useSearchParams`. For the web version,
-> [go here](#usesearchparams).
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function useSearchParams(
-  defaultInit?: URLSearchParamsInit
-): [URLSearchParams, SetURLSearchParams];
-
-type ParamKeyValuePair = [string, string];
-
-type URLSearchParamsInit =
-  | string
-  | ParamKeyValuePair[]
-  | Record<string, string | string[]>
-  | URLSearchParams;
-
-type SetURLSearchParams = (
-  nextInit?: URLSearchParamsInit,
-  navigateOpts?: : NavigateOptions
-) => void;
-
-interface NavigateOptions {
-  replace?: boolean;
-  state?: any;
-}
-```
-
-</details>
-
-The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook](https://reactjs.org/docs/hooks-reference.html#usestate), `useSearchParams` returns an array of two values: the current location's [search params](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) and a function that may be used to update them.
-
-```tsx
-import * as React from "react";
-import { View, SearchForm, TextInput } from "react-native";
-import { useSearchParams } from "react-router-native";
-
-function App() {
-  let [searchParams, setSearchParams] = useSearchParams();
-  let [query, setQuery] = React.useState(
-    searchParams.get("query")
-  );
-
-  function handleSubmit() {
-    setSearchParams({ query });
-  }
-
-  return (
-    <View>
-      <SearchForm onSubmit={handleSubmit}>
-        <TextInput value={query} onChangeText={setQuery} />
-      </SearchForm>
-    </View>
-  );
-}
-```
-
-### `createSearchParams`
-
-<details>
-  <summary>Type declaration</summary>
-
-```tsx
-declare function createSearchParams(
-  init?: URLSearchParamsInit
-): URLSearchParams;
-```
-
-</details>
-
-`createSearchParams` is a thin wrapper around [`new URLSearchParams(init)`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams) that adds support for using objects with array values. This is the same function that `useSearchParams` uses internally for creating `URLSearchParams` objects from `URLSearchParamsInit` values.
diff --git a/docs/components/index.md b/docs/components/index.md
new file mode 100644
index 0000000000..2499554bbb
--- /dev/null
+++ b/docs/components/index.md
@@ -0,0 +1,4 @@
+---
+title: Components
+order: 4
+---
diff --git a/docs/components/link-native.md b/docs/components/link-native.md
new file mode 100644
index 0000000000..5020c5a7d6
--- /dev/null
+++ b/docs/components/link-native.md
@@ -0,0 +1,46 @@
+---
+title: Link (React Native)
+---
+
+# `<Link>` (React Native)
+
+> **Note:**
+>
+> This is the React Native version of `<Link>`. For the web version,
+> [go here][link].
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function Link(props: LinkProps): React.ReactElement;
+
+interface LinkProps extends TouchableHighlightProps {
+  children?: React.ReactNode;
+  onPress?(event: GestureResponderEvent): void;
+  replace?: boolean;
+  state?: any;
+  to: To;
+}
+```
+
+</details>
+
+A `<Link>` is an element that lets the user navigate to another view by tapping it, similar to how `<a>` elements work in a web app. In `react-router-native`, a `<Link>` renders a `TouchableHighlight`. To override default styling and behaviour, please refer to the [Props reference for `TouchableHighlight`](https://reactnative.dev/docs/touchablehighlight#props).
+
+```tsx
+import * as React from "react";
+import { View, Text } from "react-native";
+import { Link } from "react-router-native";
+
+function Home() {
+  return (
+    <View>
+      <Text>Welcome!</Text>
+      <Link to="/profile">Visit your profile</Link>
+    </View>
+  );
+}
+```
+
+[link]: ./link-native
diff --git a/docs/components/link.md b/docs/components/link.md
new file mode 100644
index 0000000000..edad76f64c
--- /dev/null
+++ b/docs/components/link.md
@@ -0,0 +1,65 @@
+---
+title: Link
+---
+
+# `<Link>`
+
+> **Note:**
+>
+> This is the web version of `<Link>`. For the React Native version,
+> [go here][link-native].
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function Link(props: LinkProps): React.ReactElement;
+
+interface LinkProps
+  extends Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    "href"
+  > {
+  replace?: boolean;
+  state?: any;
+  to: To;
+  reloadDocument?: boolean;
+}
+
+type To = Partial<Location> | string;
+```
+
+</details>
+
+A `<Link>` is an element that lets the user navigate to another page by clicking or tapping on it. In `react-router-dom`, a `<Link>` renders an accessible `<a>` element with a real `href` that points to the resource it's linking to. This means that things like right-clicking a `<Link>` work as you'd expect. You can use `<Link reloadDocument>` to skip client side routing and let the browser handle the transition normally (as if it were an `<a href>`).
+
+```tsx
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+function UsersIndexPage({ users }) {
+  return (
+    <div>
+      <h1>Users</h1>
+      <ul>
+        {users.map((user) => (
+          <li key={user.id}>
+            <Link to={user.id}>{user.name}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+A relative `<Link to>` value (that does not begin with `/`) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that `<Link>`. It may contain `..` to link to routes further up the hierarchy. In these cases, `..` works exactly like the command-line `cd` function; each `..` removes one segment of the parent path.
+
+> **Note:**
+>
+> `<Link to>` with a `..` behaves differently from a normal `<a href>` when the
+> current URL ends with `/`. `<Link to>` ignores the trailing slash, and removes
+> one URL segment for each `..`. But an `<a href>` value handles `..`
+> differently when the current URL ends with `/` vs when it does not.
+
+[link-native]: ./link-native
diff --git a/docs/components/nav-link.md b/docs/components/nav-link.md
new file mode 100644
index 0000000000..889512412f
--- /dev/null
+++ b/docs/components/nav-link.md
@@ -0,0 +1,137 @@
+---
+title: NavLink
+---
+
+# `<NavLink>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function NavLink(
+  props: NavLinkProps
+): React.ReactElement;
+
+interface NavLinkProps
+  extends Omit<
+    LinkProps,
+    "className" | "style" | "children"
+  > {
+  caseSensitive?: boolean;
+  children?:
+    | React.ReactNode
+    | ((props: { isActive: boolean }) => React.ReactNode);
+  className?:
+    | string
+    | ((props: {
+        isActive: boolean;
+      }) => string | undefined);
+  end?: boolean;
+  style?:
+    | React.CSSProperties
+    | ((props: {
+        isActive: boolean;
+      }) => React.CSSProperties);
+}
+```
+
+</details>
+
+A `<NavLink>` is a special kind of [`<Link>`][link] that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
+
+By default, an `active` class is added to a `<NavLink>` component when it is active. This provides the same simple styling mechanism for most users who are upgrading from v5. One difference as of `v6.0.0-beta.3` is that `activeClassName` and `activeStyle` have been removed from `NavLinkProps`. Instead, you can pass a function to either `style` or `className` that will allow you to customize the inline styling or the class string based on the component's active state. You can also pass a function as children to customize the content of the `<NavLink>` component based on their active state, specially useful to change styles on internal elements.
+
+```tsx
+import * as React from "react";
+import { NavLink } from "react-router-dom";
+
+function NavList() {
+  // This styling will be applied to a <NavLink> when the
+  // route that it links to is currently selected.
+  let activeStyle = {
+    textDecoration: "underline",
+  };
+
+  let activeClassName = "underline";
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <NavLink
+            to="messages"
+            style={({ isActive }) =>
+              isActive ? activeStyle : undefined
+            }
+          >
+            Messages
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="tasks"
+            className={({ isActive }) =>
+              isActive ? activeClassName : undefined
+            }
+          >
+            Tasks
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="tasks">
+            {({ isActive }) => (
+              <span
+                className={
+                  isActive ? activeClassName : undefined
+                }
+              >
+                Tasks
+              </span>
+            )}
+          </NavLink>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+```
+
+If you prefer the v5 API, you can create your own `<NavLink />` as a wrapper component:
+
+```tsx
+import * as React from "react";
+import { NavLink as BaseNavLink } from "react-router-dom";
+
+const NavLink = React.forwardRef(
+  ({ activeClassName, activeStyle, ...props }, ref) => {
+    return (
+      <BaseNavLink
+        ref={ref}
+        {...props}
+        className={({ isActive }) =>
+          [
+            props.className,
+            isActive ? activeClassName : null,
+          ]
+            .filter(Boolean)
+            .join(" ")
+        }
+        style={({ isActive }) => ({
+          ...props.style,
+          ...(isActive ? activeStyle : null),
+        })}
+      />
+    );
+  }
+);
+```
+
+If the `end` prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use:
+
+```tsx
+<NavLink to="/" end>
+  Home
+</NavLink>
+```
+
+[link]: ./link
diff --git a/docs/components/navigate.md b/docs/components/navigate.md
new file mode 100644
index 0000000000..eb9bf32463
--- /dev/null
+++ b/docs/components/navigate.md
@@ -0,0 +1,67 @@
+---
+title: Navigate
+---
+
+# `<Navigate>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function Navigate(props: NavigateProps): null;
+
+interface NavigateProps {
+  to: To;
+  replace?: boolean;
+  state?: any;
+}
+```
+
+</details>
+
+A `<Navigate>` element changes the current location when it is rendered. It's a component wrapper around [`useNavigate`][use-navigate], and accepts all the same arguments as props.
+
+> **Note:**
+>
+> Having a component-based version of the `useNavigate` hook makes it easier to
+> use this feature in a [`React.Component`](https://reactjs.org/docs/react-component.html)
+> subclass where hooks are not able to be used.
+
+```tsx
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+
+class LoginForm extends React.Component {
+  state = { user: null, error: null };
+
+  async handleSubmit(event) {
+    event.preventDefault();
+    try {
+      let user = await login(event.target);
+      this.setState({ user });
+    } catch (error) {
+      this.setState({ error });
+    }
+  }
+
+  render() {
+    let { user, error } = this.state;
+    return (
+      <div>
+        {error && <p>{error.message}</p>}
+        {user && (
+          <Navigate to="/dashboard" replace={true} />
+        )}
+        <form
+          onSubmit={(event) => this.handleSubmit(event)}
+        >
+          <input type="text" name="username" />
+          <input type="password" name="password" />
+        </form>
+      </div>
+    );
+  }
+}
+```
+
+[use-navigate]: ../hooks/use-navigate
diff --git a/docs/components/outlet.md b/docs/components/outlet.md
new file mode 100644
index 0000000000..600cde091d
--- /dev/null
+++ b/docs/components/outlet.md
@@ -0,0 +1,50 @@
+---
+title: Outlet
+---
+
+# `<Outlet>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+interface OutletProps {
+  context?: unknown;
+}
+declare function Outlet(
+  props: OutletProps
+): React.ReactElement | null;
+```
+
+</details>
+
+An `<Outlet>` should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.
+
+```tsx
+function Dashboard() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+
+      {/* This element will render either <DashboardMessages> when the URL is
+          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
+      */}
+      <Outlet />
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Dashboard />}>
+        <Route
+          path="messages"
+          element={<DashboardMessages />}
+        />
+        <Route path="tasks" element={<DashboardTasks />} />
+      </Route>
+    </Routes>
+  );
+}
+```
diff --git a/docs/components/route.md b/docs/components/route.md
new file mode 100644
index 0000000000..4c36d5d1e4
--- /dev/null
+++ b/docs/components/route.md
@@ -0,0 +1,69 @@
+---
+title: Route
+---
+
+# `<Routes>` and `<Route>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function Routes(
+  props: RoutesProps
+): React.ReactElement | null;
+
+interface RoutesProps {
+  children?: React.ReactNode;
+  location?: Partial<Location> | string;
+}
+
+declare function Route(
+  props: RouteProps
+): React.ReactElement | null;
+
+interface RouteProps {
+  caseSensitive?: boolean;
+  children?: React.ReactNode;
+  element?: React.ReactNode | null;
+  index?: boolean;
+  path?: string;
+}
+```
+
+</details>
+
+`<Routes>` and `<Route>` are the primary ways to render something in React Router based on the current [`location`][location]. You can think about a `<Route>` kind of like an `if` statement; if its `path` matches the current URL, it renders its `element`! The `<Route caseSensitive>` prop determines if the matching should be done in a case-sensitive manner (defaults to `false`).
+
+Whenever the location changes, `<Routes>` looks through all its `children` `<Route>` elements to find the best match and renders that branch of the UI. `<Route>` elements may be nested to indicate nested UI, which also correspond to nested URL paths. Parent routes render their child routes by rendering an [`<Outlet>`][outlet].
+
+```tsx
+<Routes>
+  <Route path="/" element={<Dashboard />}>
+    <Route
+      path="messages"
+      element={<DashboardMessages />}
+    />
+    <Route path="tasks" element={<DashboardTasks />} />
+  </Route>
+  <Route path="about" element={<AboutPage />} />
+</Routes>
+```
+
+> **Note:**
+>
+> If you'd prefer to define your routes as regular JavaScript objects instead
+> of using JSX, [try `useRoutes` instead][use-routes].
+
+The default `<Route element>` is an [`<Outlet>`][outlet]. This means the route will still render its children even without an explicit `element` prop, so you can nest route paths without nesting UI around the child route elements.
+
+For example, in the following config the parent route renders an `<Outlet>` by default, so the child route will render without any surrounding UI. But the child route's path is `/users/:id` because it still builds on its parent.
+
+```tsx
+<Route path="users">
+  <Route path=":id" element={<UserProfile />} />
+</Route>
+```
+
+[location]: ../hook/location
+[outlet]: ./outlet
+[use-route]: ../hooks/use-routes
diff --git a/docs/components/routes.md b/docs/components/routes.md
new file mode 100644
index 0000000000..7f7df768c0
--- /dev/null
+++ b/docs/components/routes.md
@@ -0,0 +1,69 @@
+---
+title: Routes
+---
+
+# `<Routes>` and `<Route>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function Routes(
+  props: RoutesProps
+): React.ReactElement | null;
+
+interface RoutesProps {
+  children?: React.ReactNode;
+  location?: Partial<Location> | string;
+}
+
+declare function Route(
+  props: RouteProps
+): React.ReactElement | null;
+
+interface RouteProps {
+  caseSensitive?: boolean;
+  children?: React.ReactNode;
+  element?: React.ReactNode | null;
+  index?: boolean;
+  path?: string;
+}
+```
+
+</details>
+
+`<Routes>` and `<Route>` are the primary ways to render something in React Router based on the current [`location`][location]. You can think about a `<Route>` kind of like an `if` statement; if its `path` matches the current URL, it renders its `element`! The `<Route caseSensitive>` prop determines if the matching should be done in a case-sensitive manner (defaults to `false`).
+
+Whenever the location changes, `<Routes>` looks through all its `children` `<Route>` elements to find the best match and renders that branch of the UI. `<Route>` elements may be nested to indicate nested UI, which also correspond to nested URL paths. Parent routes render their child routes by rendering an [`<Outlet>`][outlet].
+
+```tsx
+<Routes>
+  <Route path="/" element={<Dashboard />}>
+    <Route
+      path="messages"
+      element={<DashboardMessages />}
+    />
+    <Route path="tasks" element={<DashboardTasks />} />
+  </Route>
+  <Route path="about" element={<AboutPage />} />
+</Routes>
+```
+
+> **Note:**
+>
+> If you'd prefer to define your routes as regular JavaScript objects instead
+> of using JSX, [try `useRoutes` instead][use-routes].
+
+The default `<Route element>` is an [`<Outlet>`][outlet]. This means the route will still render its children even without an explicit `element` prop, so you can nest route paths without nesting UI around the child route elements.
+
+For example, in the following config the parent route renders an `<Outlet>` by default, so the child route will render without any surrounding UI. But the child route's path is `/users/:id` because it still builds on its parent.
+
+```tsx
+<Route path="users">
+  <Route path=":id" element={<UserProfile />} />
+</Route>
+```
+
+[location]: ../hook/location
+[outlet]: ./outlet
+[use-route]: ../hooks/use-routes
diff --git a/docs/getting-started/concepts.md b/docs/getting-started/concepts.md
index 8d4f33c780..770e12ca6d 100644
--- a/docs/getting-started/concepts.md
+++ b/docs/getting-started/concepts.md
@@ -5,7 +5,7 @@ order: 4
 
 # Main Concepts
 
-<docs-warning>This document is a deep dive into the core concepts behind routing as implemented in React Router. It's pretty long, so if you're looking for a more practical guide check out our [quick start tutorial](tutorial.md).</docs-warning>
+<docs-warning>This document is a deep dive into the core concepts behind routing as implemented in React Router. It's pretty long, so if you're looking for a more practical guide check out our [quick start tutorial][tutorial].</docs-warning>
 
 You might be wondering what exactly React Router does. How can it help you build your app? What exactly is a **router**, anyway?
 
@@ -509,7 +509,10 @@ React Router will create an array of [matches](#match) from these routes and the
 The final concept is rendering. Consider that the entry to your app looks like this:
 
 ```jsx
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<App />}>
@@ -526,8 +529,7 @@ ReactDOM.render(
       </Route>
       <Route path="contact-us" element={<Contact />} />
     </Routes>
-  </BrowserRouter>,
-  document.getElementById("root")
+  </BrowserRouter>
 );
 ```
 
@@ -787,7 +789,10 @@ Let's put it all together from the top!
 1. You render your app:
 
    ```jsx
-   ReactDOM.render(
+   const root = ReactDOM.createRoot(
+     document.getElementById("root")
+   );
+   root.render(
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
@@ -804,14 +809,13 @@ Let's put it all together from the top!
          </Route>
          <Route path="contact-us" element={<Contact />} />
        </Routes>
-     </BrowserRouter>,
-     document.getElementById("root")
+     </BrowserRouter>
    );
    ```
 
 2. `<BrowserRouter>` creates a [history](#history), puts the initial [location](#location) in to state, and subscribes to the [URL](#url).
 
-3. `<Routes>` recurses it's [child routes](#child-route) to build a [route config](#route-config), matches those routes against the [location](#location), creates some route [matches](#match), and renders the first match's route element.
+3. `<Routes>` recurses its [child routes](#child-route) to build a [route config](#route-config), matches those routes against the [location](#location), creates some route [matches](#match), and renders the first match's route element.
 
 4. You render an [`<Outlet/>`](#outlet) in each [parent route](#parent-route).
 
@@ -826,3 +830,5 @@ Let's put it all together from the top!
 9. `<BrowserRouter>` rerenders, start over at (2)!
 
 That's it! We hope this guide has helped you gain a deeper understanding of the main concepts in React Router.
+
+[tutorial]: ./tutorial
diff --git a/docs/faq.md b/docs/getting-started/faq.md
similarity index 95%
rename from docs/faq.md
rename to docs/getting-started/faq.md
index 50f3927630..c7043a878c 100644
--- a/docs/faq.md
+++ b/docs/getting-started/faq.md
@@ -1,6 +1,6 @@
 ---
 title: FAQs
-order: 4
+order: 3
 ---
 
 # FAQs
@@ -37,8 +37,6 @@ function withRouter(Component) {
 
 ## Why does `<Route>` have an `element` prop instead of `render` or `component`?
 
-We mentioned this [in the migration guide from v5 to v6](./upgrading/v5.md#advantages-of-route-element), but it's worth repeating here.
-
 In React Router v6 we switched from using v5's `<Route component>` and `<Route render>` APIs to `<Route element>`. Why is that?
 
 For starters, we see React itself taking the lead here with the `<Suspense fallback={<Spinner />}>` API. The `fallback` prop takes a React **element**, not a **component**. This lets you easily pass whatever props you want to your `<Spinner>` from the component that renders it.
@@ -116,7 +114,7 @@ function DeepComponent() {
 // Aaaaaaaaand we're done here.
 ```
 
-Another important reason for using the `element` prop in v6 is that `<Route children>` is reserved for nesting routes. You can read more about this in [the guide about getting started](quick-start#nested-routes) with v6.
+Another important reason for using the `element` prop in v6 is that `<Route children>` is reserved for nesting routes. You can read more about this in [the guide about getting started][nested-routes] with v6.
 
 ## How do I add a No Match (404) Route in react-router v6?
 
@@ -395,7 +393,7 @@ In fact, the v5 version has all sorts of problems if your routes aren't ordered
 
 **Remix Users**
 
-If you're using [Remix](https://remix.run), you can send proper 40x responses to the browser by moving this work into your loader. This also decreases the size of the browser bundles sent to the user because loaders only run on the server.
+If you're using [Remix][remix], you can send proper 40x responses to the browser by moving this work into your loader. This also decreases the size of the browser bundles sent to the user because loaders only run on the server.
 
 ```tsx filename=remix-useLoaderData.js
 import { useLoaderData } from "remix";
@@ -421,4 +419,8 @@ function User() {
 }
 ```
 
-Instead of rending your component, remix will render the nearest [catch boundary](https://docs.remix.run/v0.20/api/app/#catchboundary) instead.
+Instead of rending your component, remix will render the nearest [catch boundary][remix-catchboundary] instead.
+
+[remix]: https://remix.run
+[remix-catchboundary]: https://remix.run/docs/en/v1/api/conventions#catchboundary
+[nested-routes]: ./overview#nested-routes
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
index ed9d71324a..7f67f57707 100644
--- a/docs/getting-started/index.md
+++ b/docs/getting-started/index.md
@@ -1,4 +1,4 @@
 ---
 title: Getting Started
-order: 3
+order: 1
 ---
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index a08c1b211e..f8211d6a1f 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -50,20 +50,24 @@ Follow the instructions in the [React documentation to set up a new project with
 
 Once your project is set up and React Router is installed as a dependency, open the `src/index.js` in your text editor. Import `BrowserRouter` from `react-router-dom` near the top of your file and wrap your app in a `<BrowserRouter>`:
 
-```js [3, 9-11]
+```js [3, 13-15]
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 import App from "./App";
-import * as serviceWorker from "./serviceWorker";
+import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+const root = ReactDOM.createRoot(
   document.getElementById("root")
 );
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
 ```
 
 Now you can use React Router anywhere in your app! For a simple example, open `src/App.js` and replace the default markup with some routes:
@@ -151,16 +155,20 @@ Go to the `index.js` file in your project and import the necessary functions fro
 ```js
 // index.js
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.js";
 
-ReactDOM.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+const root = ReactDOM.createRoot(
   document.getElementById("root")
 );
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
 ```
 
 In your `index.html`, create the root div in the document body above the script tag. It's also helpful to provide a `noscript` fallback message for users who may have disabled JavaScript, unless you plan on server-rendering your app later.
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 14e6f18b3d..1fd9cad255 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -1,15 +1,14 @@
 ---
-title: Overview
+title: Quick Start
 order: 2
 ---
 
-# Overview
+# Quick Start Overview
 
 If you're familiar with the JavaScript ecosystem, React, and React Router, this serves as a quick overview of React Router v6 with lots of code and minimal explanations.
 
-- For a complete introduction to React Router, do the [Tutorial](tutorial.md)
-- For extensive documentation on every API, see [API Reference](../api.md)
-- For a deeper understanding of concepts, see [Main Concepts](concepts.md)
+- For a complete introduction to React Router, do the [Tutorial][tutorial]
+- For a deeper understanding of concepts, see [Main Concepts][concepts]
 
 ## Installation
 
@@ -20,7 +19,7 @@ npm install react-router-dom@6
 ## Configuring Routes
 
 ```jsx
-import { render } from "react-dom";
+import ReactDOM from "react-dom/client";
 import {
   BrowserRouter,
   Routes,
@@ -28,7 +27,10 @@ import {
 } from "react-router-dom";
 // import your route components too
 
-render(
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<App />}>
@@ -40,8 +42,7 @@ render(
         </Route>
       </Route>
     </Routes>
-  </BrowserRouter>,
-  document.getElementById("root")
+  </BrowserRouter>
 );
 ```
 
@@ -435,7 +436,7 @@ function App() {
 
 ## Descendant `<Routes>`
 
-You can render [a `<Routes>` element](../api.md#routes) anywhere you need one, including deep within the component tree of another `<Routes>`. These will work just the same as any other `<Routes>`, except they will automatically build on the path of the route that rendered them. If you do this, _make sure to put a \* at the end of the parent route's path_. Otherwise, the parent route won't match the URL when it is longer than the parent route's path, and your descendant `<Routes>` won't ever show up.
+You can render [a `<Routes>` element][routes] anywhere you need one, including deep within the component tree of another `<Routes>`. These will work just the same as any other `<Routes>`, except they will automatically build on the path of the route that rendered them. If you do this, _make sure to put a \* at the end of the parent route's path_. Otherwise, the parent route won't match the URL when it is longer than the parent route's path, and your descendant `<Routes>` won't ever show up.
 
 ```tsx [5]
 function App() {
@@ -460,4 +461,8 @@ function Dashboard() {
 }
 ```
 
-And that's just about it! We haven't covered every API here, but these are definitely the most common ones you'll use. If you'd like to learn more, go ahead and follow [our tutorial](tutorial.md) or browse [the full API reference](../api.md).
+And that's just about it! We haven't covered every API here, but these are definitely the most common ones you'll use. If you'd like to learn more, go ahead and follow [our tutorial][tutorial].
+
+[tutorial]: ./tutorial
+[concepts]: ./concepts
+[routes]: ../components/routes
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index fcb2de69ea..c9bfff33b5 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -7,11 +7,11 @@ order: 2
 
 ## Introduction
 
-[Check out the completed version of the app here](https://stackblitz.com/edit/github-agqlf5?file=src/App.jsx).
+[Check out the completed version of the app here][stackblitz-app].
 
 React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.
 
-If you're just getting started with React generally, we recommend you follow [the excellent Getting Started guide](https://reactjs.org/docs/getting-started.html) in the official docs. There is plenty of information there to get you up and running. React Router is compatible with React >= 16.8.
+If you're just getting started with React generally, we recommend you follow [the excellent Getting Started guide][reactjs-getting-started] in the official docs. There is plenty of information there to get you up and running. React Router is compatible with React >= 16.8.
 
 We'll keep this tutorial quick and to the point. By the end you'll know the APIs you deal with day-to-day with React Router. After that, you can dig into some of the other docs to get a deeper understanding.
 
@@ -31,15 +31,15 @@ While building a little bookkeeping app we'll cover:
 
 ### Recommended: StackBlitz
 
-To do this tutorial you'll need a working React app. We recommend skipping bundlers and using [this demo on StackBlitz](https://stackblitz.com/github/remix-run/react-router/tree/main/tutorial?file=src/App.jsx) to code along in your browser:
+To do this tutorial you'll need a working React app. We recommend skipping bundlers and using [this demo on StackBlitz][stackblitz-template] to code along in your browser:
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/tutorial?file=src/App.jsx)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz-template]
 
 As you edit files, the tutorial will update live.
 
 ### Using a bundler
 
-Feel free to use your bundler of choice like [Create React App](https://create-react-app.dev/) or [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
+Feel free to use your bundler of choice like [Create React App][cra] or [Vite][vite].
 
 ```sh
 # create react app
@@ -73,11 +73,13 @@ Actually, that "!" doesn't look boring at all. This is pretty exciting. We sat o
 Finally, go make sure `index.js` or `main.jsx` (depending on the bundler you used) is actually boring:
 
 ```tsx filename=src/main.jsx
-import { render } from "react-dom";
+import ReactDOM from "react-dom/client";
 import App from "./App";
 
-const rootElement = document.getElementById("root");
-render(<App />, rootElement);
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(<App />);
 ```
 
 Finally, start your app:
@@ -94,17 +96,18 @@ npm run dev
 
 First things first, we want to connect your app to the browser's URL: import `BrowserRouter` and render it around your whole app.
 
-```tsx lines=[2,7-9] filename=src/main.jsx
-import { render } from "react-dom";
+```tsx lines=[2,9-11] filename=src/main.jsx
+import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 
-const rootElement = document.getElementById("root");
-render(
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(
   <BrowserRouter>
     <App />
-  </BrowserRouter>,
-  rootElement
+  </BrowserRouter>
 );
 ```
 
@@ -146,7 +149,7 @@ Add a couple new files:
 - `src/routes/invoices.jsx`
 - `src/routes/expenses.jsx`
 
-(The location of the files doesn't matter, but when you decide you'd like an automatic backend API, server rendering, code splitting bundler and more for this app, naming your files like this way makes it easy to port this app to our other project, [Remix](https://remix.run) 😉)
+(The location of the files doesn't matter, but when you decide you'd like an automatic backend API, server rendering, code splitting bundler and more for this app, naming your files like this way makes it easy to port this app to our other project, [Remix][remix] 😉)
 
 Now fill 'em up with some code:
 
@@ -172,8 +175,8 @@ export default function Invoices() {
 
 Finally, let's teach React Router how to render our app at different URLs by creating our first "Route Config" inside of `main.jsx` or `index.js`.
 
-```tsx lines=[2,4-5,8-9,13-19] filename=src/main.jsx
-import { render } from "react-dom";
+```tsx lines=[2,4-5,8-9,15-21] filename=src/main.jsx
+import ReactDOM from "react-dom/client";
 import {
   BrowserRouter,
   Routes,
@@ -183,16 +186,17 @@ import App from "./App";
 import Expenses from "./routes/expenses";
 import Invoices from "./routes/invoices";
 
-const rootElement = document.getElementById("root");
-render(
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<App />} />
       <Route path="expenses" element={<Expenses />} />
       <Route path="invoices" element={<Invoices />} />
     </Routes>
-  </BrowserRouter>,
-  rootElement
+  </BrowserRouter>
 );
 ```
 
@@ -211,8 +215,8 @@ Let's get some automatic, persistent layout handling by doing just two things:
 
 First let's nest the routes. Right now the expenses and invoices routes are siblings to the app, we want to make them _children_ of the app route:
 
-```jsx lines=[15-18] filename=src/main.jsx
-import { render } from "react-dom";
+```jsx lines=[17-20] filename=src/main.jsx
+import ReactDOM from "react-dom/client";
 import {
   BrowserRouter,
   Routes,
@@ -222,8 +226,10 @@ import App from "./App";
 import Expenses from "./routes/expenses";
 import Invoices from "./routes/invoices";
 
-const rootElement = document.getElementById("root");
-render(
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<App />}>
@@ -231,8 +237,7 @@ render(
         <Route path="invoices" element={<Invoices />} />
       </Route>
     </Routes>
-  </BrowserRouter>,
-  rootElement
+  </BrowserRouter>
 );
 ```
 
@@ -806,7 +811,7 @@ export function deleteInvoice(number) {
 
 Now let's add the delete button, call our new function, and navigate to the index route:
 
-```js lines=[1-6,20-29] filename=src/routes/invoice.jsx
+```js lines=[1-6,9-10,21-30] filename=src/routes/invoice.jsx
 import {
   useParams,
   useNavigate,
@@ -849,3 +854,10 @@ Notice we used `useLocation` again to persist the query string by adding `locati
 Congrats! You're all done with this tutorial. We hope it helped you get your bearings with React Router.
 
 If you're having trouble, check out the [Resources](/resources) page to get help. Good luck!
+
+[stackblitz-app]: https://stackblitz.com/edit/github-agqlf5?file=src/App.jsx
+[stackblitz-template]: https://stackblitz.com/github/remix-run/react-router/tree/main/tutorial?file=src/App.jsx
+[reactjs-getting-started]: https://reactjs.org/docs/getting-started.html
+[cra]: https://create-react-app.dev/
+[vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
+[remix]: https://remix.run
diff --git a/docs/contributing.md b/docs/guides/contributing.md
similarity index 100%
rename from docs/contributing.md
rename to docs/guides/contributing.md
diff --git a/docs/guides/data.md b/docs/guides/data.md
new file mode 100644
index 0000000000..14360b259c
--- /dev/null
+++ b/docs/guides/data.md
@@ -0,0 +1,13 @@
+---
+title: Data Synchronization
+hidden: true
+---
+
+# Data Synchronization
+
+React Router not only keeps your UI in sync with the URL, but also your data. It does this with several APIs
+
+- [loader][loader]
+- [action][action]
+- [Form][form]
+- [useFetcher][use-fetcher]
diff --git a/docs/guides/pending-ui.md b/docs/guides/pending-ui.md
new file mode 100644
index 0000000000..081c3942a5
--- /dev/null
+++ b/docs/guides/pending-ui.md
@@ -0,0 +1,12 @@
+---
+title: Pending UI
+hidden: true
+---
+
+# Pending UI
+
+React Router has APIs to help you build the user experience you're after when asynchronous things are happening with:
+
+- [useNavigation][use-navigation]
+- [useFetcher][use-navigation]
+- [Outlet][outlet]
diff --git a/docs/hooks/index.md b/docs/hooks/index.md
new file mode 100644
index 0000000000..ab285086bf
--- /dev/null
+++ b/docs/hooks/index.md
@@ -0,0 +1,4 @@
+---
+title: Hooks
+order: 4
+---
diff --git a/docs/hooks/use-href.md b/docs/hooks/use-href.md
new file mode 100644
index 0000000000..92f480c024
--- /dev/null
+++ b/docs/hooks/use-href.md
@@ -0,0 +1,22 @@
+---
+title: useHref
+---
+
+# `useHref`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useHref(to: To): string;
+```
+
+</details>
+
+The `useHref` hook returns a URL that may be used to link to the given `to` location, even outside of React Router.
+
+> **Tip:**
+>
+> You may be interested in taking a look at the source for the `<Link>`
+> component in `react-router-dom` to see how it uses `useHref` internally to
+> determine its own `href` value.
diff --git a/docs/hooks/use-in-router-context.md b/docs/hooks/use-in-router-context.md
new file mode 100644
index 0000000000..fdc6e0bd0a
--- /dev/null
+++ b/docs/hooks/use-in-router-context.md
@@ -0,0 +1,16 @@
+---
+title: useInRouterContext
+---
+
+# `useInRouterContext`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useInRouterContext(): boolean;
+```
+
+</details>
+
+The `useInRouterContext` hooks returns `true` if the component is being rendered in the context of a `<Router>`, `false` otherwise. This can be useful for some 3rd-party extensions that need to know if they are being rendered in the context of a React Router app.
diff --git a/docs/hooks/use-link-click-handler.md b/docs/hooks/use-link-click-handler.md
new file mode 100644
index 0000000000..00fb2891ae
--- /dev/null
+++ b/docs/hooks/use-link-click-handler.md
@@ -0,0 +1,70 @@
+---
+title: useLinkClickHandler
+---
+
+# `useLinkClickHandler`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useLinkClickHandler<
+  E extends Element = HTMLAnchorElement
+>(
+  to: To,
+  options?: {
+    target?: React.HTMLAttributeAnchorTarget;
+    replace?: boolean;
+    state?: any;
+  }
+): (event: React.MouseEvent<E, MouseEvent>) => void;
+```
+
+</details>
+
+The `useLinkClickHandler` hook returns a click event handler for navigation when building a custom `<Link>` in `react-router-dom`.
+
+```tsx
+import {
+  useHref,
+  useLinkClickHandler,
+} from "react-router-dom";
+
+const StyledLink = styled("a", { color: "fuchsia" });
+
+const Link = React.forwardRef(
+  (
+    {
+      onClick,
+      replace = false,
+      state,
+      target,
+      to,
+      ...rest
+    },
+    ref
+  ) => {
+    let href = useHref(to);
+    let handleClick = useLinkClickHandler(to, {
+      replace,
+      state,
+      target,
+    });
+
+    return (
+      <StyledLink
+        {...rest}
+        href={href}
+        onClick={(event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) {
+            handleClick(event);
+          }
+        }}
+        ref={ref}
+        target={target}
+      />
+    );
+  }
+);
+```
diff --git a/docs/hooks/use-link-press-handler.md b/docs/hooks/use-link-press-handler.md
new file mode 100644
index 0000000000..af6ded8c50
--- /dev/null
+++ b/docs/hooks/use-link-press-handler.md
@@ -0,0 +1,52 @@
+---
+title: useLinkPressHandler
+---
+
+# `useLinkPressHandler`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useLinkPressHandler(
+  to: To,
+  options?: {
+    replace?: boolean;
+    state?: any;
+  }
+): (event: GestureResponderEvent) => void;
+```
+
+</details>
+
+The `react-router-native` counterpart to `useLinkClickHandler`, `useLinkPressHandler` returns a press event handler for custom `<Link>` navigation.
+
+```tsx
+import { TouchableHighlight } from "react-native";
+import { useLinkPressHandler } from "react-router-native";
+
+function Link({
+  onPress,
+  replace = false,
+  state,
+  to,
+  ...rest
+}) {
+  let handlePress = useLinkPressHandler(to, {
+    replace,
+    state,
+  });
+
+  return (
+    <TouchableHighlight
+      {...rest}
+      onPress={(event) => {
+        onPress?.(event);
+        if (!event.defaultPrevented) {
+          handlePress(event);
+        }
+      }}
+    />
+  );
+}
+```
diff --git a/docs/hooks/use-location.md b/docs/hooks/use-location.md
new file mode 100644
index 0000000000..93debb5313
--- /dev/null
+++ b/docs/hooks/use-location.md
@@ -0,0 +1,40 @@
+---
+title: useLocation
+---
+
+# `useLocation`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useLocation(): Location;
+
+interface Location extends Path {
+  state: unknown;
+  key: Key;
+}
+```
+
+</details>
+
+This hook returns the current [`location`][location] object. This can be useful if you'd like to perform some side effect whenever the current location changes.
+
+```tsx
+import * as React from 'react';
+import { useLocation } from 'react-router-dom';
+
+function App() {
+  let location = useLocation();
+
+  React.useEffect(() => {
+    ga('send', 'pageview');
+  }, [location]);
+
+  return (
+    // ...
+  );
+}
+```
+
+[location]: ../utils/location
diff --git a/docs/hooks/use-match.md b/docs/hooks/use-match.md
new file mode 100644
index 0000000000..ddfa4111fb
--- /dev/null
+++ b/docs/hooks/use-match.md
@@ -0,0 +1,22 @@
+---
+title: useMatch
+---
+
+# `useMatch`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useMatch<ParamKey extends string = string>(
+  pattern: PathPattern | string
+): PathMatch<ParamKey> | null;
+```
+
+</details>
+
+Returns match data about a route at the given path relative to the current location.
+
+See [`matchPath`][matchpath] for more information.
+
+[matchpath]: ../utils/match-path
diff --git a/docs/hooks/use-navigate.md b/docs/hooks/use-navigate.md
new file mode 100644
index 0000000000..8e97cb4739
--- /dev/null
+++ b/docs/hooks/use-navigate.md
@@ -0,0 +1,45 @@
+---
+title: useNavigate
+---
+
+# `useNavigate`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useNavigate(): NavigateFunction;
+
+interface NavigateFunction {
+  (
+    to: To,
+    options?: { replace?: boolean; state?: any }
+  ): void;
+  (delta: number): void;
+}
+```
+
+</details>
+
+The `useNavigate` hook returns a function that lets you navigate programmatically, for example after a form is submitted.
+
+```tsx
+import { useNavigate } from "react-router-dom";
+
+function SignupForm() {
+  let navigate = useNavigate();
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    await submitForm(event.target);
+    navigate("../success", { replace: true });
+  }
+
+  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
+}
+```
+
+The `navigate` function has two signatures:
+
+- Either pass a `To` value (same type as `<Link to>`) with an optional second `{ replace, state }` arg or
+- Pass the delta you want to go in the history stack. For example, `navigate(-1)` is equivalent to hitting the back button.
diff --git a/docs/hooks/use-navigation-type.md b/docs/hooks/use-navigation-type.md
new file mode 100644
index 0000000000..f6100dd776
--- /dev/null
+++ b/docs/hooks/use-navigation-type.md
@@ -0,0 +1,18 @@
+---
+title: useNavigationType
+---
+
+# `useNavigationType`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useNavigationType(): NavigationType;
+
+type NavigationType = "POP" | "PUSH" | "REPLACE";
+```
+
+</details>
+
+This hook returns the current type of navigation or how the user came to the current page; either via a pop, push, or replace action on the history stack.
diff --git a/docs/hooks/use-outlet-context.md b/docs/hooks/use-outlet-context.md
new file mode 100644
index 0000000000..f55eb9b848
--- /dev/null
+++ b/docs/hooks/use-outlet-context.md
@@ -0,0 +1,74 @@
+---
+title: useOutletContext
+---
+
+# `useOutletContext`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useOutletContext<
+  Context = unknown
+>(): Context;
+```
+
+</details>
+
+Often parent routes manage state or other values you want shared with child routes. You can create your own [context provider](https://reactjs.org/docs/context.html) if you like, but this is such a common situation that it's built-into `<Outlet />`:
+
+```tsx lines=[3]
+function Parent() {
+  const [count, setCount] = React.useState(0);
+  return <Outlet context={[count, setCount]} />;
+}
+```
+
+```tsx lines=[2]
+import { useOutletContext } from "react-router-dom";
+
+function Child() {
+  const [count, setCount] = useOutletContext();
+  const increment = () => setCount((c) => c + 1);
+  return <button onClick={increment}>{count}</button>;
+}
+```
+
+If you're using TypeScript, we recommend the parent component provide a custom hook for accessing the context value. This makes it easier for consumers to get nice typings, control consumers, and know who's consuming the context value. Here's a more realistic example:
+
+```tsx filename=src/routes/dashboard.tsx lines=[12,17-19]
+import * as React from "react";
+import type { User } from "./types";
+import { Outlet, useOutletContext } from "react-router-dom";
+
+type ContextType = { user: User | null };
+
+export default function Dashboard() {
+  const [user, setUser] = React.useState<User | null>(null);
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <Outlet context={{ user }} />
+    </div>
+  );
+}
+
+export function useUser() {
+  return useOutletContext<ContextType>();
+}
+```
+
+```tsx filename=src/routes/dashboard/messages.tsx lines=[1,4]
+import { useUser } from "../dashboard";
+
+export default function DashboardMessages() {
+  const { user } = useUser();
+  return (
+    <div>
+      <h2>Messages</h2>
+      <p>Hello, {user.name}!</p>
+    </div>
+  );
+}
+```
diff --git a/docs/hooks/use-outlet.md b/docs/hooks/use-outlet.md
new file mode 100644
index 0000000000..67b123157a
--- /dev/null
+++ b/docs/hooks/use-outlet.md
@@ -0,0 +1,18 @@
+---
+title: useOutlet
+---
+
+# `useOutlet`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useOutlet(): React.ReactElement | null;
+```
+
+</details>
+
+Returns the element for the child route at this level of the route hierarchy. This hook is used internally by [`<Outlet>`][outlet] to render child routes.
+
+[outlet]: ../components/outlet
diff --git a/docs/hooks/use-params.md b/docs/hooks/use-params.md
new file mode 100644
index 0000000000..1d2d9c3bea
--- /dev/null
+++ b/docs/hooks/use-params.md
@@ -0,0 +1,40 @@
+---
+title: useParams
+---
+
+# `useParams`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useParams<
+  K extends string = string
+>(): Readonly<Params<K>>;
+```
+
+</details>
+
+The `useParams` hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the `<Route path>`. Child routes inherit all params from their parent routes.
+
+```tsx
+import * as React from 'react';
+import { Routes, Route, useParams } from 'react-router-dom';
+
+function ProfilePage() {
+  // Get the userId param from the URL.
+  let { userId } = useParams();
+  // ...
+}
+
+function App() {
+  return (
+    <Routes>
+      <Route path="users">
+        <Route path=":userId" element={<ProfilePage />} />
+        <Route path="me" element={...} />
+      </Route>
+    </Routes>
+  );
+}
+```
diff --git a/docs/hooks/use-resolved-path.md b/docs/hooks/use-resolved-path.md
new file mode 100644
index 0000000000..637c696817
--- /dev/null
+++ b/docs/hooks/use-resolved-path.md
@@ -0,0 +1,23 @@
+---
+title: useResolvedPath
+---
+
+# `useResolvedPath`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useResolvedPath(to: To): Path;
+```
+
+</details>
+
+This hook resolves the `pathname` of the location in the given `to` value against the pathname of the current location.
+
+This is useful when building links from relative values. For example, check out the source to [`<NavLink>`][navlink] which calls `useResolvedPath` internally to resolve the full pathname of the page being linked to.
+
+See [resolvePath][resolvepath] for more information.
+
+[navlink]: ../components/nav-link
+[resolvepath]: ../utils/resolve-path
diff --git a/docs/hooks/use-routes.md b/docs/hooks/use-routes.md
new file mode 100644
index 0000000000..df63c02f1d
--- /dev/null
+++ b/docs/hooks/use-routes.md
@@ -0,0 +1,48 @@
+---
+title: useRoutes
+---
+
+# `useRoutes`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useRoutes(
+  routes: RouteObject[],
+  location?: Partial<Location> | string;
+): React.ReactElement | null;
+```
+
+</details>
+
+The `useRoutes` hook is the functional equivalent of [`<Routes>`][routes], but it uses JavaScript objects instead of `<Route>` elements to define your routes. These objects have the same properties as normal [`<Route>` elements][route], but they don't require JSX.
+
+The return value of `useRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
+
+```tsx
+import * as React from "react";
+import { useRoutes } from "react-router-dom";
+
+function App() {
+  let element = useRoutes([
+    {
+      path: "/",
+      element: <Dashboard />,
+      children: [
+        {
+          path: "messages",
+          element: <DashboardMessages />,
+        },
+        { path: "tasks", element: <DashboardTasks /> },
+      ],
+    },
+    { path: "team", element: <AboutPage /> },
+  ]);
+
+  return element;
+}
+```
+
+[routes]: ../components/routes
+[route]: ../components/route
diff --git a/docs/hooks/use-search-params-rn.md b/docs/hooks/use-search-params-rn.md
new file mode 100644
index 0000000000..510fb5c5a3
--- /dev/null
+++ b/docs/hooks/use-search-params-rn.md
@@ -0,0 +1,68 @@
+---
+title: useSearchParams (React Native)
+---
+
+# `useSearchParams` (React Native)
+
+> **Note:**
+>
+> This is the React Native version of `useSearchParams`. For the web version,
+> [go here][usesearchparams].
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useSearchParams(
+  defaultInit?: URLSearchParamsInit
+): [URLSearchParams, SetURLSearchParams];
+
+type ParamKeyValuePair = [string, string];
+
+type URLSearchParamsInit =
+  | string
+  | ParamKeyValuePair[]
+  | Record<string, string | string[]>
+  | URLSearchParams;
+
+type SetURLSearchParams = (
+  nextInit?: URLSearchParamsInit,
+  navigateOpts?: : NavigateOptions
+) => void;
+
+interface NavigateOptions {
+  replace?: boolean;
+  state?: any;
+}
+```
+
+</details>
+
+The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook](https://reactjs.org/docs/hooks-reference.html#usestate), `useSearchParams` returns an array of two values: the current location's [search params](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) and a function that may be used to update them.
+
+```tsx
+import * as React from "react";
+import { View, SearchForm, TextInput } from "react-native";
+import { useSearchParams } from "react-router-native";
+
+function App() {
+  let [searchParams, setSearchParams] = useSearchParams();
+  let [query, setQuery] = React.useState(
+    searchParams.get("query")
+  );
+
+  function handleSubmit() {
+    setSearchParams({ query });
+  }
+
+  return (
+    <View>
+      <SearchForm onSubmit={handleSubmit}>
+        <TextInput value={query} onChangeText={setQuery} />
+      </SearchForm>
+    </View>
+  );
+}
+```
+
+[usesearchparams]: ./use-search-params.md
diff --git a/docs/hooks/use-search-params.md b/docs/hooks/use-search-params.md
new file mode 100644
index 0000000000..7462c4387f
--- /dev/null
+++ b/docs/hooks/use-search-params.md
@@ -0,0 +1,70 @@
+---
+title: useSearchParams
+---
+
+# `useSearchParams`
+
+> **Note:**
+>
+> This is the web version of `useSearchParams`. For the React Native version,
+> [go here][usesearchparams-native].
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function useSearchParams(
+  defaultInit?: URLSearchParamsInit
+): [URLSearchParams, SetURLSearchParams];
+
+type ParamKeyValuePair = [string, string];
+
+type URLSearchParamsInit =
+  | string
+  | ParamKeyValuePair[]
+  | Record<string, string | string[]>
+  | URLSearchParams;
+
+type SetURLSearchParams = (
+  nextInit?: URLSearchParamsInit,
+  navigateOpts?: : { replace?: boolean; state?: any }
+) => void;
+```
+
+</details>
+
+The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. Like React's own [`useState` hook](https://reactjs.org/docs/hooks-reference.html#usestate), `useSearchParams` returns an array of two values: the current location's [search params](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) and a function that may be used to update them.
+
+```tsx
+import * as React from "react";
+import { useSearchParams } from "react-router-dom";
+
+function App() {
+  let [searchParams, setSearchParams] = useSearchParams();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    // The serialize function here would be responsible for
+    // creating an object of { key: value } pairs from the
+    // fields in the form that make up the query.
+    let params = serializeFormQuery(event.target);
+    setSearchParams(params);
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>{/* ... */}</form>
+    </div>
+  );
+}
+```
+
+> **Note:**
+>
+> The `setSearchParams` function works like [`navigate`][usenavigate], but
+> only for the [search portion](https://developer.mozilla.org/en-US/docs/Web/API/Location/search)
+> of the URL. Also note that the second arg to `setSearchParams` is
+> the same type as the second arg to `navigate`.
+
+[usesearchparams-native]: ./use-search-params-rn.md
+[usenavigate]: ./use-navigate
diff --git a/docs/index.md b/docs/index.md
index 954856ce14..0a16813049 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -25,7 +25,7 @@ order: 1
       <p>Level up your understanding of React Router with the concepts, vocabulary, and design principles of React Router and routing in general. A must read for would-be contributors.</p>
     </docs-card>
   </a>
-  <a href="v6/faq" aria-label="Frequently Asked Questions">
+  <a href="v6/getting-started/faq" aria-label="Frequently Asked Questions">
     <docs-card>
       <h3>Frequently Asked Questions</h3> 
       <p>Running into a problem? Chances are, you're not the first! Explore some of the questions that people commonly have about React Router v6.</p>
diff --git a/docs/routers/browser-router.md b/docs/routers/browser-router.md
new file mode 100644
index 0000000000..d712ff5ec5
--- /dev/null
+++ b/docs/routers/browser-router.md
@@ -0,0 +1,41 @@
+---
+title: BrowserRouter
+---
+
+# `<BrowserRouter>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function BrowserRouter(
+  props: BrowserRouterProps
+): React.ReactElement;
+
+interface BrowserRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  window?: Window;
+}
+```
+
+</details>
+
+`<BrowserRouter>` is the recommended interface for running React Router in a web browser. A `<BrowserRouter>` stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.
+
+`<BrowserRouter window>` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
+
+```tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+
+ReactDOM.render(
+  <BrowserRouter>
+    {/* The rest of your app goes here */}
+  </BrowserRouter>,
+  root
+);
+```
+
+[defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
diff --git a/docs/routers/data-browser-router.md b/docs/routers/data-browser-router.md
new file mode 100644
index 0000000000..a349e1c0d6
--- /dev/null
+++ b/docs/routers/data-browser-router.md
@@ -0,0 +1,78 @@
+---
+title: DataBrowserRouter
+new: true
+hidden: true
+---
+
+# `DataBrowserRouter`
+
+This is the recommended router component for all React Router DOM applications.
+
+`DataBrowserRouter` enables the route data APIs like [loaders][loader], [actions][action], [fetchers][fetcher] and more for browser environments.
+
+```tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DataBrowserRouter } from "react-router-dom";
+import Root from "./routes/root";
+
+ReactDOM.render(
+  <DataBrowserRouter>
+    <Route element={<Root />} loader={Root.loader}>
+      <Route path="team" element={<Team />} loader={Team.loader}>
+    </Route>
+  </DataBrowserRouter>,
+  root
+);
+```
+
+## Type Declaration
+
+```tsx
+declare function DataBrowserRouter(
+  props: DataBrowserRouterProps
+): React.ReactElement;
+
+export interface DataBrowserRouterProps {
+  children?: React.ReactNode;
+  hydrationData?: HydrationState;
+  fallbackElement?: React.ReactElement;
+  window?: Window;
+}
+```
+
+## Differences from `BrowserRouter`
+
+`BrowserRouter` only keeps your UI in sync with the URL, but does nothing for data with APIs like [loader][loader], [Form][form], and [action][action].
+
+`DataBrowserRouter` keeps your UI in sync with the URL **and also your data**. When the user clicks a link, it will initiate data loading for the next set of matches, revalidate when forms are submitted, etc.
+
+`DataBrowserRouter` also functions as the `Routes` component (it needs to know your routes in order to fetch and manage data). You shouldn't use `<Routes>` with `<DataBrowserRouter>`, instead put your `<Route>` components directly inside of `<DataBrowserRouter>`.
+
+<docs-error>Do not do this</docs-error>
+
+```jsx bad lines=[2,4]
+<DataBrowserRouter>
+  <Routes>
+    <Route element={<Root />} />
+  </Routes>
+</DataBrowserRouter>
+```
+
+<docs-info>Do this</docs-info>
+
+```jsx
+<DataBrowserRouter>
+  <Route element={<Root />} />
+</DataBrowserRouter>
+```
+
+## Bundle Sizes
+
+If you are not using the data APIs in your app, it's recommended you use [`BrowserRouter`][browser-router] instead so that the extra code used to manage the internal state of the data APIs will be tree-shaken out of your bundles.
+
+[loader]: ../components/route#loader
+[action]: ../components/route#action
+[fetcher]: ../hooks/use-fetcher
+[browser-router]: ./browser-router
+[form]: ../components/form
diff --git a/docs/routers/hash-router.md b/docs/routers/hash-router.md
new file mode 100644
index 0000000000..fc12b10367
--- /dev/null
+++ b/docs/routers/hash-router.md
@@ -0,0 +1,43 @@
+---
+title: HashRouter
+---
+
+# `<HashRouter>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function HashRouter(
+  props: HashRouterProps
+): React.ReactElement;
+
+interface HashRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  window?: Window;
+}
+```
+
+</details>
+
+`<HashRouter>` is for use in web browsers when the URL should not (or cannot) be sent to the server for some reason. This may happen in some shared hosting scenarios where you do not have full control over the server. In these situations, `<HashRouter>` makes it possible to store the current location in the `hash` portion of the current URL, so it is never sent to the server.
+
+`<HashRouter window>` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
+
+```tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { HashRouter } from "react-router-dom";
+
+ReactDOM.render(
+  <HashRouter>
+    {/* The rest of your app goes here */}
+  </HashRouter>,
+  root
+);
+```
+
+<docs-warning>We strongly recommend you do not use `HashRouter` unless you absolutely have to.</docs-warning>
+
+[defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
diff --git a/docs/routers/history-router.md b/docs/routers/history-router.md
new file mode 100644
index 0000000000..91f96fe0c9
--- /dev/null
+++ b/docs/routers/history-router.md
@@ -0,0 +1,44 @@
+---
+title: HistoryRouter
+---
+
+# `<unstable_HistoryRouter>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function HistoryRouter(
+  props: HistoryRouterProps
+): React.ReactElement;
+
+interface HistoryRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  history: History;
+}
+```
+
+</details>
+
+`<unstable_HistoryRouter>` takes an instance of the [`history`][history] library as prop. This allows you to use that instance in non-React contexts or as a global variable.
+
+```tsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
+import { createBrowserHistory } from "history";
+
+const history = createBrowserHistory({ window });
+
+ReactDOM.render(
+  <HistoryRouter history={history}>
+    {/* The rest of your app goes here */}
+  </HistoryRouter>,
+  root
+);
+```
+
+<docs-warning>This API is currently prefixed as `unstable_` because you may unintentionally add two versions of the `history` library to your app, the one you have added to your package.json and whatever version React Router uses internally. If it is allowed by your tooling, it's recommended to not add `history` as a direct dependency and instead rely on the nested dependency from the `react-router` package. Once we have a mechanism to detect mis-matched versions, this API will remove its `unstable_` prefix.</docs-warning>
+
+[history]: https://github.com/remix-run/history
diff --git a/docs/routers/index.md b/docs/routers/index.md
new file mode 100644
index 0000000000..3373065ace
--- /dev/null
+++ b/docs/routers/index.md
@@ -0,0 +1,4 @@
+---
+title: Routers
+order: 1
+---
diff --git a/docs/routers/memory-router.md b/docs/routers/memory-router.md
new file mode 100644
index 0000000000..77a16d82f1
--- /dev/null
+++ b/docs/routers/memory-router.md
@@ -0,0 +1,62 @@
+---
+title: MemoryRouter
+---
+
+# `<MemoryRouter>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function MemoryRouter(
+  props: MemoryRouterProps
+): React.ReactElement;
+
+interface MemoryRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  initialEntries?: InitialEntry[];
+  initialIndex?: number;
+}
+```
+
+</details>
+
+A `<MemoryRouter>` stores its locations internally in an array. Unlike `<BrowserHistory>` and `<HashHistory>`, it isn't tied to an external source, like the history stack in a browser. This makes it ideal for scenarios where you need complete control over the history stack, like testing.
+
+- `<MemoryRouter initialEntries>` defaults to `["/"]` (a single entry at the root `/` URL)
+- `<MemoryRouter initialIndex>` defaults to the last index of `initialEntries`
+
+> **Tip:**
+>
+> Most of React Router's tests are written using a `<MemoryRouter>` as the
+> source of truth, so you can see some great examples of using it by just
+> [browsing through our tests][tests].
+
+```tsx
+import * as React from "react";
+import { create } from "react-test-renderer";
+import {
+  MemoryRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+
+describe("My app", () => {
+  it("renders correctly", () => {
+    let renderer = create(
+      <MemoryRouter initialEntries={["/users/mjackson"]}>
+        <Routes>
+          <Route path="users" element={<Users />}>
+            <Route path=":id" element={<UserProfile />} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+});
+```
+
+[tests]: https://github.com/remix-run/react-router/tree/main/packages/react-router/__tests__
diff --git a/docs/routers/native-router.md b/docs/routers/native-router.md
new file mode 100644
index 0000000000..b7a575e730
--- /dev/null
+++ b/docs/routers/native-router.md
@@ -0,0 +1,38 @@
+---
+title: NativeRouter
+---
+
+# `<NativeRouter>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function NativeRouter(
+  props: NativeRouterProps
+): React.ReactElement;
+
+interface NativeRouterProps extends MemoryRouterProps {}
+```
+
+</details>
+
+`<NativeRouter>` is the recommended interface for running React Router in a [React Native][react-native] app.
+
+- `<NativeRouter initialEntries>` defaults to `["/"]` (a single entry at the root `/` URL)
+- `<NativeRouter initialIndex>` defaults to the last index of `initialEntries`
+
+```tsx
+import * as React from "react";
+import { NativeRouter } from "react-router-native";
+
+function App() {
+  return (
+    <NativeRouter>
+      {/* The rest of your app goes here */}
+    </NativeRouter>
+  );
+}
+```
+
+[react-native]: https://reactnative.dev
diff --git a/docs/routers/router.md b/docs/routers/router.md
new file mode 100644
index 0000000000..54a506ecd1
--- /dev/null
+++ b/docs/routers/router.md
@@ -0,0 +1,33 @@
+---
+title: Router
+---
+
+# `<Router>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function Router(
+  props: RouterProps
+): React.ReactElement | null;
+
+interface RouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  location: Partial<Location> | string;
+  navigationType?: NavigationType;
+  navigator: Navigator;
+  static?: boolean;
+}
+```
+
+</details>
+
+`<Router>` is the low-level interface that is shared by all router components (like `<BrowserRouter>` and `<StaticRouter>`). In terms of React, `<Router>` is a [context provider][context] that supplies routing information to the rest of the app.
+
+You probably never need to render a `<Router>` manually. Instead, you should use one of the higher-level routers depending on your environment. You only ever need one router in a given app.
+
+The `<Router basename>` prop may be used to make all routes and links in your app relative to a "base" portion of the URL pathname that they all share. This is useful when rendering only a portion of a larger app with React Router or when your app has multiple entry points. Basenames are not case-sensitive.
+
+[context]: https://reactjs.org/docs/context.html#contextprovider
diff --git a/docs/routers/static-router.md b/docs/routers/static-router.md
new file mode 100644
index 0000000000..a72aafe86d
--- /dev/null
+++ b/docs/routers/static-router.md
@@ -0,0 +1,48 @@
+---
+title: StaticRouter
+---
+
+# `<StaticRouter>`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function StaticRouter(
+  props: StaticRouterProps
+): React.ReactElement;
+
+interface StaticRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  location?: Path | LocationPieces;
+}
+```
+
+</details>
+
+`<StaticRouter>` is used to render a React Router web app in [node][node]. Provide the current location via the `location` prop.
+
+- `<StaticRouter location>` defaults to `"/"`
+
+```tsx
+import * as React from "react";
+import * as ReactDOMServer from "react-dom/server";
+import { StaticRouter } from "react-router-dom/server";
+import http from "http";
+
+function requestHandler(req, res) {
+  let html = ReactDOMServer.renderToString(
+    <StaticRouter location={req.url}>
+      {/* The rest of your app goes here */}
+    </StaticRouter>
+  );
+
+  res.write(html);
+  res.end();
+}
+
+http.createServer(requestHandler).listen(3000);
+```
+
+[node]: https://nodejs.org
diff --git a/docs/upgrading/index.md b/docs/upgrading/index.md
index e6f3b89d65..c0bc58dfc8 100644
--- a/docs/upgrading/index.md
+++ b/docs/upgrading/index.md
@@ -1,4 +1,4 @@
 ---
-title: Upgrading to v6
-order: 5
+title: Upgrading
+order: 6
 ---
diff --git a/docs/upgrading/reach.md b/docs/upgrading/reach.md
index 26fb1be0a8..e1382b1b4f 100644
--- a/docs/upgrading/reach.md
+++ b/docs/upgrading/reach.md
@@ -125,10 +125,6 @@ Not polluting props also helps with TypeScript a bit and also prevents you from
 
 Also, as a page grows, you naturally break it into multiple components and end up "prop drilling" that data all the way down the tree. Now you can access the route data anywhere in the tree. Not only is it more convenient, but it makes creating router-centric composable abstractions possible. If a custom hook needs the location, it can now simply ask for it with `useLocation()` etc..
 
-```sh
-npm install react-router@6 react-router-dom@6
-```
-
 ### Add a LocationProvider
 
 While `@reach/router` doesn't require a location provider at the top of the application tree, React Router v6 does, so might as well get ready for that now.
@@ -163,7 +159,7 @@ You can pull a trick though and use both routers at the same time as you migrate
 ### Install React Router v6
 
 ```sh
-npm install react-router@next
+npm install react-router@6 react-router-dom@6
 ```
 
 ### Update `LocationProvider` to `BrowserRouter`
diff --git a/docs/upgrading/v5.md b/docs/upgrading/v5.md
index 1724296e28..b136e8a213 100644
--- a/docs/upgrading/v5.md
+++ b/docs/upgrading/v5.md
@@ -7,11 +7,9 @@ order: 1
 
 ## Backwards Compatibility Package
 
-We are actively working on a backwards compatibility layer that implements the v5 API on top of the v6 implementation. This will make upgrading as smooth as possible. You'll be able to upgrade to v6 with minimal changes to your application code. Then, you can incrementally update your code to the v6 API.
+Instead of upgrading and updating all of your code at once (which is incredibly difficult and prone to bugs), the backwards compatibility package enables you to upgrade one component, one hook, and one route at a time by running both v5 and v6 in parallel. Any code you haven't touched is still running the very same code it was before. Once all components are exclusively using the v6 APIs, your app no longer needs the compatibility package and is running on v6. The official guide can be found [here](../../packages/react-router-dom-v5-compat/README.md).
 
-<docs-error>We recommend waiting for the backwards compatibility package to be released before upgrading apps that have more than a few routes.</docs-error>
-
-Until then, we hope this guide will help you do the upgrade all at once!
+We recommend using the backwards compatibility package to upgrade apps that have more than a few routes. Otherwise, we hope this guide will help you do the upgrade all at once!
 
 ## Introduction
 
@@ -425,7 +423,7 @@ The following RegExp-style route paths are **not valid** in v6:
 
 We added the dependency on path-to-regexp in v4 to enable more advanced pattern matching. In v6 we are using a simpler syntax that allows us to predictably parse the path for ranking purposes. It also means we can stop depending on path-to-regexp, which is nice for bundle size.
 
-If you were using any of path-to-regexp's more advanced syntax, you'll have to remove it and simplify your route paths. If you were using the RegExp syntax to do URL param validation (e.g. to ensure an id is all numeric characters) please know that we plan to add some more advanced param validation in v6 at some point. For now, you'll need to move that logic to the component the route renders, and let it branch it's rendered tree after you parse the params.
+If you were using any of path-to-regexp's more advanced syntax, you'll have to remove it and simplify your route paths. If you were using the RegExp syntax to do URL param validation (e.g. to ensure an id is all numeric characters) please know that we plan to add some more advanced param validation in v6 at some point. For now, you'll need to move that logic to the component the route renders, and let it branch its rendered tree after you parse the params.
 
 If you were using `<Route sensitive>` you should move it to its containing `<Routes caseSensitive>` prop. Either all routes in a `<Routes>` element are case-sensitive or they are not.
 
diff --git a/docs/utils/create-routes-from-children.md b/docs/utils/create-routes-from-children.md
new file mode 100644
index 0000000000..e9ed098723
--- /dev/null
+++ b/docs/utils/create-routes-from-children.md
@@ -0,0 +1,26 @@
+---
+title: createRoutesFromChildren
+---
+
+# `createRoutesFromChildren`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function createRoutesFromChildren(
+  children: React.ReactNode
+): RouteObject[];
+
+interface RouteObject {
+  caseSensitive?: boolean;
+  children?: RouteObject[];
+  element?: React.ReactNode;
+  index?: boolean;
+  path?: string;
+}
+```
+
+</details>
+
+`createRoutesFromChildren` is a helper that creates route objects from `<Route>` elements. It is used internally in a [`<Routes>` element](#routes-and-route) to generate a route config from its [`<Route>`](#routes-and-route) children.
diff --git a/docs/utils/create-search-params.md b/docs/utils/create-search-params.md
new file mode 100644
index 0000000000..0167562b65
--- /dev/null
+++ b/docs/utils/create-search-params.md
@@ -0,0 +1,18 @@
+---
+title: createSearchParams
+---
+
+# `createSearchParams`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function createSearchParams(
+  init?: URLSearchParamsInit
+): URLSearchParams;
+```
+
+</details>
+
+`createSearchParams` is a thin wrapper around [`new URLSearchParams(init)`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams) that adds support for using objects with array values. This is the same function that `useSearchParams` uses internally for creating `URLSearchParams` objects from `URLSearchParamsInit` values.
diff --git a/docs/utils/generate-path.md b/docs/utils/generate-path.md
new file mode 100644
index 0000000000..1de10edfe9
--- /dev/null
+++ b/docs/utils/generate-path.md
@@ -0,0 +1,27 @@
+---
+title: generatePath
+---
+
+# `generatePath`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function generatePath(
+  path: string,
+  params?: Params
+): string;
+```
+
+</details>
+
+`generatePath` interpolates a set of params into a route path string with `:id` and `*` placeholders. This can be useful when you want to eliminate placeholders from a route path so it matches statically instead of using a dynamic parameter.
+
+```tsx
+generatePath("/users/:id", { id: 42 }); // "/users/42"
+generatePath("/files/:type/*", {
+  type: "img",
+  "*": "cat.jpg",
+}); // "/files/img/cat.jpg"
+```
diff --git a/docs/utils/index.md b/docs/utils/index.md
new file mode 100644
index 0000000000..17b2a770ad
--- /dev/null
+++ b/docs/utils/index.md
@@ -0,0 +1,4 @@
+---
+title: Utilities
+order: 4
+---
diff --git a/docs/utils/location.md b/docs/utils/location.md
new file mode 100644
index 0000000000..0fa27c6b7c
--- /dev/null
+++ b/docs/utils/location.md
@@ -0,0 +1,14 @@
+---
+title: Location
+---
+
+# `Location`
+
+The term "location" in React Router refers to [the `Location` interface](https://github.com/remix-run/history/blob/main/docs/api-reference.md#location) from the [history](https://github.com/remix-run/history) library.
+
+> **Note:**
+>
+> The `history` package is React Router's only dependency and many of the
+> core types in React Router come directly from that library including
+> `Location`, `To`, `Path`, and others. You can read more about
+> the history library in [its documentation](https://github.com/remix-run/history/tree/main/docs).
diff --git a/docs/utils/match-path.md b/docs/utils/match-path.md
new file mode 100644
index 0000000000..fa09e836e8
--- /dev/null
+++ b/docs/utils/match-path.md
@@ -0,0 +1,35 @@
+---
+title: matchPath
+---
+
+# `matchPath`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function matchPath<
+  ParamKey extends string = string
+>(
+  pattern: PathPattern | string,
+  pathname: string
+): PathMatch<ParamKey> | null;
+
+interface PathMatch<ParamKey extends string = string> {
+  params: Params<ParamKey>;
+  pathname: string;
+  pattern: PathPattern;
+}
+
+interface PathPattern {
+  path: string;
+  caseSensitive?: boolean;
+  end?: boolean;
+}
+```
+
+</details>
+
+`matchPath` matches a route path pattern against a URL pathname and returns information about the match. This is useful whenever you need to manually run the router's matching algorithm to determine if a route path matches or not. It returns `null` if the pattern does not match the given pathname.
+
+The [`useMatch` hook](#usematch) uses this function internally to match a route path relative to the current location.
diff --git a/docs/utils/match-routes.md b/docs/utils/match-routes.md
new file mode 100644
index 0000000000..def9dc1131
--- /dev/null
+++ b/docs/utils/match-routes.md
@@ -0,0 +1,28 @@
+---
+title: matchRoutes
+---
+
+# `matchRoutes`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function matchRoutes(
+  routes: RouteObject[],
+  location: Partial<Location> | string,
+  basename?: string
+): RouteMatch[] | null;
+
+interface RouteMatch<ParamKey extends string = string> {
+  params: Params<ParamKey>;
+  pathname: string;
+  route: RouteObject;
+}
+```
+
+</details>
+
+`matchRoutes` runs the route matching algorithm for a set of routes against a given [`location`](#location) to see which routes (if any) match. If it finds a match, an array of `RouteMatch` objects is returned, one for each route that matched.
+
+This is the heart of React Router's matching algorithm. It is used internally by [`useRoutes`](#useroutes) and the [`<Routes>` component](#routes-and-route) to determine which routes match the current location. It can also be useful in some situations where you want to manually match a set of routes.
diff --git a/docs/utils/render-matches.md b/docs/utils/render-matches.md
new file mode 100644
index 0000000000..9a54232cfe
--- /dev/null
+++ b/docs/utils/render-matches.md
@@ -0,0 +1,18 @@
+---
+title: renderMatches
+---
+
+# `renderMatches`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function renderMatches(
+  matches: RouteMatch[] | null
+): React.ReactElement | null;
+```
+
+</details>
+
+`renderMatches` renders the result of `matchRoutes()` into a React element.
diff --git a/docs/utils/resolve-path.md b/docs/utils/resolve-path.md
new file mode 100644
index 0000000000..cf136604f6
--- /dev/null
+++ b/docs/utils/resolve-path.md
@@ -0,0 +1,29 @@
+---
+title: resolvePath
+---
+
+# `resolvePath`
+
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function resolvePath(
+  to: To,
+  fromPathname?: string
+): Path;
+
+type To = Partial<Location> | string;
+
+interface Path {
+  pathname: string;
+  search: string;
+  hash: string;
+}
+```
+
+</details>
+
+`resolvePath` resolves a given `To` value into an actual `Path` object with an absolute `pathname`. This is useful whenever you need to know the exact path for a relative `To` value. For example, the `<Link>` component uses this function to know the actual URL it points to.
+
+The [`useResolvedPath` hook](#useresolvedpath) uses `resolvePath` internally to resolve the pathname. If `to` contains a pathname, it is resolved against the current route pathname. Otherwise, it is resolved against the current URL (`location.pathname`).
diff --git a/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx b/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx
index b06252f76a..5dbe7a545f 100644
--- a/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx
+++ b/packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx
@@ -184,6 +184,32 @@ describe("Descendant <Routes> splat matching", () => {
           </div>
         `);
       });
+      it("allows `@` to appear at the beginning", () => {
+        let renderer = renderNestedSplatRoute([
+          "/courses/react/@react-fundamentals",
+        ]);
+        expect(renderer.toJSON()).toMatchInlineSnapshot(`
+          <div>
+            <h1>
+              Courses
+            </h1>
+            <div>
+              <h1>
+                React
+              </h1>
+              <div>
+                <h1>
+                  React Fundamentals
+                </h1>
+                <p>
+                  The params are 
+                  {"*":"@react-fundamentals","splat":"@react-fundamentals"}
+                </p>
+              </div>
+            </div>
+          </div>
+        `);
+      });
       it("allows url-encoded entities to appear at the beginning", () => {
         let renderer = renderNestedSplatRoute([
           "/courses/react/%20react-fundamentals",
diff --git a/packages/react-router/__tests__/layout-routes-test.tsx b/packages/react-router/__tests__/layout-routes-test.tsx
index 0884451520..e01f316502 100644
--- a/packages/react-router/__tests__/layout-routes-test.tsx
+++ b/packages/react-router/__tests__/layout-routes-test.tsx
@@ -32,6 +32,47 @@ describe("A layout route", () => {
     `);
   });
   describe("matches when a nested splat route begins with a special character", () => {
+    it("allows routes starting with `@`", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/@splat"]}>
+            <Routes>
+              <Route
+                element={
+                  <div>
+                    <h1>Layout</h1>
+                    <Outlet />
+                  </div>
+                }
+              >
+                <Route
+                  path="*"
+                  element={
+                    <div>
+                      <h1>Splat</h1>
+                    </div>
+                  }
+                />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Layout
+          </h1>
+          <div>
+            <h1>
+              Splat
+            </h1>
+          </div>
+        </div>
+      `);
+    });
     it("allows routes starting with `-`", () => {
       let renderer: TestRenderer.ReactTestRenderer;
       TestRenderer.act(() => {
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
new file mode 100644
index 0000000000..ff03661a0c
--- /dev/null
+++ b/packages/react-router/index.tsx
@@ -0,0 +1,1413 @@
+import * as React from "react";
+import type {
+  Hash,
+  History,
+  InitialEntry,
+  Location,
+  MemoryHistory,
+  Path,
+  Pathname,
+  Search,
+  To,
+} from "history";
+import {
+  Action as NavigationType,
+  createMemoryHistory,
+  parsePath,
+  createPath,
+} from "history";
+
+export { parsePath, createPath, NavigationType };
+export type { Hash, Location, Path, Pathname, Search, To };
+
+function invariant(cond: any, message: string): asserts cond {
+  if (!cond) throw new Error(message);
+}
+
+function warning(cond: any, message: string): void {
+  if (!cond) {
+    // eslint-disable-next-line no-console
+    if (typeof console !== "undefined") console.warn(message);
+
+    try {
+      // Welcome to debugging React Router!
+      //
+      // This error is thrown as a convenience so you can more easily
+      // find the source for a warning that appears in the console by
+      // enabling "pause on exceptions" in your JavaScript debugger.
+      throw new Error(message);
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  }
+}
+
+const alreadyWarned: Record<string, boolean> = {};
+function warningOnce(key: string, cond: boolean, message: string) {
+  if (!cond && !alreadyWarned[key]) {
+    alreadyWarned[key] = true;
+    warning(false, message);
+  }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// CONTEXT
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * A Navigator is a "location changer"; it's how you get to different locations.
+ *
+ * Every history instance conforms to the Navigator interface, but the
+ * distinction is useful primarily when it comes to the low-level <Router> API
+ * where both the location and a navigator must be provided separately in order
+ * to avoid "tearing" that may occur in a suspense-enabled app if the action
+ * and/or location were to be read directly from the history instance.
+ */
+export type Navigator = Pick<History, "go" | "push" | "replace" | "createHref">;
+
+interface NavigationContextObject {
+  basename: string;
+  navigator: Navigator;
+  static: boolean;
+}
+
+const NavigationContext = React.createContext<NavigationContextObject>(null!);
+
+if (__DEV__) {
+  NavigationContext.displayName = "Navigation";
+}
+
+interface LocationContextObject {
+  location: Location;
+  navigationType: NavigationType;
+}
+
+const LocationContext = React.createContext<LocationContextObject>(null!);
+
+if (__DEV__) {
+  LocationContext.displayName = "Location";
+}
+
+interface RouteContextObject {
+  outlet: React.ReactElement | null;
+  matches: RouteMatch[];
+}
+
+const RouteContext = React.createContext<RouteContextObject>({
+  outlet: null,
+  matches: [],
+});
+
+if (__DEV__) {
+  RouteContext.displayName = "Route";
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// COMPONENTS
+///////////////////////////////////////////////////////////////////////////////
+
+export interface MemoryRouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  initialEntries?: InitialEntry[];
+  initialIndex?: number;
+}
+
+/**
+ * A <Router> that stores all entries in memory.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#memoryrouter
+ */
+export function MemoryRouter({
+  basename,
+  children,
+  initialEntries,
+  initialIndex,
+}: MemoryRouterProps): React.ReactElement {
+  let historyRef = React.useRef<MemoryHistory>();
+  if (historyRef.current == null) {
+    historyRef.current = createMemoryHistory({ initialEntries, initialIndex });
+  }
+
+  let history = historyRef.current;
+  let [state, setState] = React.useState({
+    action: history.action,
+    location: history.location,
+  });
+
+  React.useLayoutEffect(() => history.listen(setState), [history]);
+
+  return (
+    <Router
+      basename={basename}
+      children={children}
+      location={state.location}
+      navigationType={state.action}
+      navigator={history}
+    />
+  );
+}
+
+export interface NavigateProps {
+  to: To;
+  replace?: boolean;
+  state?: any;
+}
+
+/**
+ * Changes the current location.
+ *
+ * Note: This API is mostly useful in React.Component subclasses that are not
+ * able to use hooks. In functional components, we recommend you use the
+ * `useNavigate` hook instead.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#navigate
+ */
+export function Navigate({ to, replace, state }: NavigateProps): null {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of
+    // the router loaded. We can help them understand how to avoid that.
+    `<Navigate> may be used only in the context of a <Router> component.`
+  );
+
+  warning(
+    !React.useContext(NavigationContext).static,
+    `<Navigate> must not be used on the initial render in a <StaticRouter>. ` +
+      `This is a no-op, but you should modify your code so the <Navigate> is ` +
+      `only ever rendered in response to some user interaction or state change.`
+  );
+
+  let navigate = useNavigate();
+  React.useEffect(() => {
+    navigate(to, { replace, state });
+  });
+
+  return null;
+}
+
+export interface OutletProps {
+  context?: unknown;
+}
+
+/**
+ * Renders the child route's element, if there is one.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#outlet
+ */
+export function Outlet(props: OutletProps): React.ReactElement | null {
+  return useOutlet(props.context);
+}
+
+export interface RouteProps {
+  caseSensitive?: boolean;
+  children?: React.ReactNode;
+  element?: React.ReactNode | null;
+  index?: boolean;
+  path?: string;
+}
+
+export interface PathRouteProps {
+  caseSensitive?: boolean;
+  children?: React.ReactNode;
+  element?: React.ReactNode | null;
+  index?: false;
+  path: string;
+}
+
+export interface LayoutRouteProps {
+  children?: React.ReactNode;
+  element?: React.ReactNode | null;
+}
+
+export interface IndexRouteProps {
+  element?: React.ReactNode | null;
+  index: true;
+}
+
+/**
+ * Declares an element that should be rendered at a certain URL path.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#route
+ */
+export function Route(
+  _props: PathRouteProps | LayoutRouteProps | IndexRouteProps
+): React.ReactElement | null {
+  invariant(
+    false,
+    `A <Route> is only ever to be used as the child of <Routes> element, ` +
+      `never rendered directly. Please wrap your <Route> in a <Routes>.`
+  );
+}
+
+export interface RouterProps {
+  basename?: string;
+  children?: React.ReactNode;
+  location: Partial<Location> | string;
+  navigationType?: NavigationType;
+  navigator: Navigator;
+  static?: boolean;
+}
+
+/**
+ * Provides location context for the rest of the app.
+ *
+ * Note: You usually won't render a <Router> directly. Instead, you'll render a
+ * router that is more specific to your environment such as a <BrowserRouter>
+ * in web browsers or a <StaticRouter> for server rendering.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#router
+ */
+export function Router({
+  basename: basenameProp = "/",
+  children = null,
+  location: locationProp,
+  navigationType = NavigationType.Pop,
+  navigator,
+  static: staticProp = false,
+}: RouterProps): React.ReactElement | null {
+  invariant(
+    !useInRouterContext(),
+    `You cannot render a <Router> inside another <Router>.` +
+      ` You should never have more than one in your app.`
+  );
+
+  let basename = normalizePathname(basenameProp);
+  let navigationContext = React.useMemo(
+    () => ({ basename, navigator, static: staticProp }),
+    [basename, navigator, staticProp]
+  );
+
+  if (typeof locationProp === "string") {
+    locationProp = parsePath(locationProp);
+  }
+
+  let {
+    pathname = "/",
+    search = "",
+    hash = "",
+    state = null,
+    key = "default",
+  } = locationProp;
+
+  let location = React.useMemo(() => {
+    let trailingPathname = stripBasename(pathname, basename);
+
+    if (trailingPathname == null) {
+      return null;
+    }
+
+    return {
+      pathname: trailingPathname,
+      search,
+      hash,
+      state,
+      key,
+    };
+  }, [basename, pathname, search, hash, state, key]);
+
+  warning(
+    location != null,
+    `<Router basename="${basename}"> is not able to match the URL ` +
+      `"${pathname}${search}${hash}" because it does not start with the ` +
+      `basename, so the <Router> won't render anything.`
+  );
+
+  if (location == null) {
+    return null;
+  }
+
+  return (
+    <NavigationContext.Provider value={navigationContext}>
+      <LocationContext.Provider
+        children={children}
+        value={{ location, navigationType }}
+      />
+    </NavigationContext.Provider>
+  );
+}
+
+export interface RoutesProps {
+  children?: React.ReactNode;
+  location?: Partial<Location> | string;
+}
+
+/**
+ * A container for a nested tree of <Route> elements that renders the branch
+ * that best matches the current location.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#routes
+ */
+export function Routes({
+  children,
+  location,
+}: RoutesProps): React.ReactElement | null {
+  return useRoutes(createRoutesFromChildren(children), location);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// HOOKS
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Returns the full href for the given "to" value. This is useful for building
+ * custom links that are also accessible and preserve right-click behavior.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#usehref
+ */
+export function useHref(to: To): string {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useHref() may be used only in the context of a <Router> component.`
+  );
+
+  let { basename, navigator } = React.useContext(NavigationContext);
+  let { hash, pathname, search } = useResolvedPath(to);
+
+  let joinedPathname = pathname;
+  if (basename !== "/") {
+    let toPathname = getToPathname(to);
+    let endsWithSlash = toPathname != null && toPathname.endsWith("/");
+    joinedPathname =
+      pathname === "/"
+        ? basename + (endsWithSlash ? "/" : "")
+        : joinPaths([basename, pathname]);
+  }
+
+  return navigator.createHref({ pathname: joinedPathname, search, hash });
+}
+
+/**
+ * Returns true if this component is a descendant of a <Router>.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
+ */
+export function useInRouterContext(): boolean {
+  return React.useContext(LocationContext) != null;
+}
+
+/**
+ * Returns the current location object, which represents the current URL in web
+ * browsers.
+ *
+ * Note: If you're using this it may mean you're doing some of your own
+ * "routing" in your app, and we'd like to know what your use case is. We may
+ * be able to provide something higher-level to better suit your needs.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#uselocation
+ */
+export function useLocation(): Location {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useLocation() may be used only in the context of a <Router> component.`
+  );
+
+  return React.useContext(LocationContext).location;
+}
+
+type ParamParseFailed = { failed: true };
+
+type ParamParseSegment<Segment extends string> =
+  // Check here if there exists a forward slash in the string.
+  Segment extends `${infer LeftSegment}/${infer RightSegment}`
+    ? // If there is a forward slash, then attempt to parse each side of the
+      // forward slash.
+      ParamParseSegment<LeftSegment> extends infer LeftResult
+      ? ParamParseSegment<RightSegment> extends infer RightResult
+        ? LeftResult extends string
+          ? // If the left side is successfully parsed as a param, then check if
+            // the right side can be successfully parsed as well. If both sides
+            // can be parsed, then the result is a union of the two sides
+            // (read: "foo" | "bar").
+            RightResult extends string
+            ? LeftResult | RightResult
+            : LeftResult
+          : // If the left side is not successfully parsed as a param, then check
+          // if only the right side can be successfully parse as a param. If it
+          // can, then the result is just right, else it's a failure.
+          RightResult extends string
+          ? RightResult
+          : ParamParseFailed
+        : ParamParseFailed
+      : // If the left side didn't parse into a param, then just check the right
+      // side.
+      ParamParseSegment<RightSegment> extends infer RightResult
+      ? RightResult extends string
+        ? RightResult
+        : ParamParseFailed
+      : ParamParseFailed
+    : // If there's no forward slash, then check if this segment starts with a
+    // colon. If it does, then this is a dynamic segment, so the result is
+    // just the remainder of the string. Otherwise, it's a failure.
+    Segment extends `:${infer Remaining}`
+    ? Remaining
+    : ParamParseFailed;
+
+// Attempt to parse the given string segment. If it fails, then just return the
+// plain string type as a default fallback. Otherwise return the union of the
+// parsed string literals that were referenced as dynamic segments in the route.
+type ParamParseKey<Segment extends string> =
+  ParamParseSegment<Segment> extends string
+    ? ParamParseSegment<Segment>
+    : string;
+
+/**
+ * Returns the current navigation action which describes how the router came to
+ * the current location, either by a pop, push, or replace on the history stack.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#usenavigationtype
+ */
+export function useNavigationType(): NavigationType {
+  return React.useContext(LocationContext).navigationType;
+}
+
+/**
+ * Returns true if the URL for the given "to" value matches the current URL.
+ * This is useful for components that need to know "active" state, e.g.
+ * <NavLink>.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#usematch
+ */
+export function useMatch<
+  ParamKey extends ParamParseKey<Path>,
+  Path extends string
+>(pattern: PathPattern<Path> | Path): PathMatch<ParamKey> | null {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useMatch() may be used only in the context of a <Router> component.`
+  );
+
+  let { pathname } = useLocation();
+  return React.useMemo(
+    () => matchPath<ParamKey, Path>(pattern, pathname),
+    [pathname, pattern]
+  );
+}
+
+/**
+ * The interface for the navigate() function returned from useNavigate().
+ */
+export interface NavigateFunction {
+  (to: To, options?: NavigateOptions): void;
+  (delta: number): void;
+}
+
+export interface NavigateOptions {
+  replace?: boolean;
+  state?: any;
+}
+
+/**
+ * Returns an imperative method for changing the location. Used by <Link>s, but
+ * may also be used by other elements to change the location.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#usenavigate
+ */
+export function useNavigate(): NavigateFunction {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useNavigate() may be used only in the context of a <Router> component.`
+  );
+
+  let { basename, navigator } = React.useContext(NavigationContext);
+  let { matches } = React.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
+
+  let routePathnamesJson = JSON.stringify(
+    matches.map((match) => match.pathnameBase)
+  );
+
+  let activeRef = React.useRef(false);
+  React.useEffect(() => {
+    activeRef.current = true;
+  });
+
+  let navigate: NavigateFunction = React.useCallback(
+    (to: To | number, options: NavigateOptions = {}) => {
+      warning(
+        activeRef.current,
+        `You should call navigate() in a React.useEffect(), not when ` +
+          `your component is first rendered.`
+      );
+
+      if (!activeRef.current) return;
+
+      if (typeof to === "number") {
+        navigator.go(to);
+        return;
+      }
+
+      let path = resolveTo(
+        to,
+        JSON.parse(routePathnamesJson),
+        locationPathname
+      );
+
+      if (basename !== "/") {
+        path.pathname = joinPaths([basename, path.pathname]);
+      }
+
+      (!!options.replace ? navigator.replace : navigator.push)(
+        path,
+        options.state
+      );
+    },
+    [basename, navigator, routePathnamesJson, locationPathname]
+  );
+
+  return navigate;
+}
+
+const OutletContext = React.createContext<unknown>(null);
+
+/**
+ * Returns the context (if provided) for the child route at this level of the route
+ * hierarchy.
+ * @see https://reactrouter.com/docs/en/v6/api#useoutletcontext
+ */
+export function useOutletContext<Context = unknown>(): Context {
+  return React.useContext(OutletContext) as Context;
+}
+
+/**
+ * Returns the element for the child route at this level of the route
+ * hierarchy. Used internally by <Outlet> to render child routes.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#useoutlet
+ */
+export function useOutlet(context?: unknown): React.ReactElement | null {
+  let outlet = React.useContext(RouteContext).outlet;
+  if (outlet) {
+    return (
+      <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
+    );
+  }
+  return outlet;
+}
+
+/**
+ * Returns an object of key/value pairs of the dynamic params from the current
+ * URL that were matched by the route path.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#useparams
+ */
+export function useParams<
+  ParamsOrKey extends string | Record<string, string | undefined> = string
+>(): Readonly<
+  [ParamsOrKey] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>
+> {
+  let { matches } = React.useContext(RouteContext);
+  let routeMatch = matches[matches.length - 1];
+  return routeMatch ? (routeMatch.params as any) : {};
+}
+
+/**
+ * Resolves the pathname of the given `to` value against the current location.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#useresolvedpath
+ */
+export function useResolvedPath(to: To): Path {
+  let { matches } = React.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
+
+  let routePathnamesJson = JSON.stringify(
+    matches.map((match) => match.pathnameBase)
+  );
+
+  return React.useMemo(
+    () => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname),
+    [to, routePathnamesJson, locationPathname]
+  );
+}
+
+/**
+ * Returns the element of the route that matched the current location, prepared
+ * with the correct context to render the remainder of the route tree. Route
+ * elements in the tree must render an <Outlet> to render their child route's
+ * element.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#useroutes
+ */
+export function useRoutes(
+  routes: RouteObject[],
+  locationArg?: Partial<Location> | string
+): React.ReactElement | null {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useRoutes() may be used only in the context of a <Router> component.`
+  );
+
+  let { matches: parentMatches } = React.useContext(RouteContext);
+  let routeMatch = parentMatches[parentMatches.length - 1];
+  let parentParams = routeMatch ? routeMatch.params : {};
+  let parentPathname = routeMatch ? routeMatch.pathname : "/";
+  let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
+  let parentRoute = routeMatch && routeMatch.route;
+
+  if (__DEV__) {
+    // You won't get a warning about 2 different <Routes> under a <Route>
+    // without a trailing *, but this is a best-effort warning anyway since we
+    // cannot even give the warning unless they land at the parent route.
+    //
+    // Example:
+    //
+    // <Routes>
+    //   {/* This route path MUST end with /* because otherwise
+    //       it will never match /blog/post/123 */}
+    //   <Route path="blog" element={<Blog />} />
+    //   <Route path="blog/feed" element={<BlogFeed />} />
+    // </Routes>
+    //
+    // function Blog() {
+    //   return (
+    //     <Routes>
+    //       <Route path="post/:id" element={<Post />} />
+    //     </Routes>
+    //   );
+    // }
+    let parentPath = (parentRoute && parentRoute.path) || "";
+    warningOnce(
+      parentPathname,
+      !parentRoute || parentPath.endsWith("*"),
+      `You rendered descendant <Routes> (or called \`useRoutes()\`) at ` +
+        `"${parentPathname}" (under <Route path="${parentPath}">) but the ` +
+        `parent route path has no trailing "*". This means if you navigate ` +
+        `deeper, the parent won't match anymore and therefore the child ` +
+        `routes will never render.\n\n` +
+        `Please change the parent <Route path="${parentPath}"> to <Route ` +
+        `path="${parentPath === "/" ? "*" : `${parentPath}/*`}">.`
+    );
+  }
+
+  let locationFromContext = useLocation();
+
+  let location;
+  if (locationArg) {
+    let parsedLocationArg =
+      typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+
+    invariant(
+      parentPathnameBase === "/" ||
+        parsedLocationArg.pathname?.startsWith(parentPathnameBase),
+      `When overriding the location using \`<Routes location>\` or \`useRoutes(routes, location)\`, ` +
+        `the location pathname must begin with the portion of the URL pathname that was ` +
+        `matched by all parent routes. The current pathname base is "${parentPathnameBase}" ` +
+        `but pathname "${parsedLocationArg.pathname}" was given in the \`location\` prop.`
+    );
+
+    location = parsedLocationArg;
+  } else {
+    location = locationFromContext;
+  }
+
+  let pathname = location.pathname || "/";
+  let remainingPathname =
+    parentPathnameBase === "/"
+      ? pathname
+      : pathname.slice(parentPathnameBase.length) || "/";
+  let matches = matchRoutes(routes, { pathname: remainingPathname });
+
+  if (__DEV__) {
+    warning(
+      parentRoute || matches != null,
+      `No routes matched location "${location.pathname}${location.search}${location.hash}" `
+    );
+
+    warning(
+      matches == null ||
+        matches[matches.length - 1].route.element !== undefined,
+      `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element. ` +
+        `This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`
+    );
+  }
+
+  return _renderMatches(
+    matches &&
+      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]),
+        })
+      ),
+    parentMatches
+  );
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// UTILS
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Creates a route config from a React "children" object, which is usually
+ * either a `<Route>` element or an array of them. Used internally by
+ * `<Routes>` to create a route config from its children.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren
+ */
+export function createRoutesFromChildren(
+  children: React.ReactNode
+): RouteObject[] {
+  let routes: RouteObject[] = [];
+
+  React.Children.forEach(children, (element) => {
+    if (!React.isValidElement(element)) {
+      // Ignore non-elements. This allows people to more easily inline
+      // conditionals in their route config.
+      return;
+    }
+
+    if (element.type === React.Fragment) {
+      // Transparently support React.Fragment and its children.
+      routes.push.apply(
+        routes,
+        createRoutesFromChildren(element.props.children)
+      );
+      return;
+    }
+
+    invariant(
+      element.type === Route,
+      `[${
+        typeof element.type === "string" ? element.type : element.type.name
+      }] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>`
+    );
+
+    let route: RouteObject = {
+      caseSensitive: element.props.caseSensitive,
+      element: element.props.element,
+      index: element.props.index,
+      path: element.props.path,
+    };
+
+    if (element.props.children) {
+      route.children = createRoutesFromChildren(element.props.children);
+    }
+
+    routes.push(route);
+  });
+
+  return routes;
+}
+
+/**
+ * The parameters that were parsed from the URL path.
+ */
+export type Params<Key extends string = string> = {
+  readonly [key in Key]: string | undefined;
+};
+
+/**
+ * A route object represents a logical route, with (optionally) its child
+ * routes organized in a tree-like structure.
+ */
+export interface RouteObject {
+  caseSensitive?: boolean;
+  children?: RouteObject[];
+  element?: React.ReactNode;
+  index?: boolean;
+  path?: string;
+}
+
+/**
+ * Returns a path with params interpolated.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#generatepath
+ */
+export function generatePath(path: string, params: Params = {}): string {
+  return path
+    .replace(/:(\w+)/g, (_, key) => {
+      invariant(params[key] != null, `Missing ":${key}" param`);
+      return params[key]!;
+    })
+    .replace(/\/*\*$/, (_) =>
+      params["*"] == null ? "" : params["*"].replace(/^\/*/, "/")
+    );
+}
+
+/**
+ * A RouteMatch contains info about how a route matched a URL.
+ */
+export interface RouteMatch<ParamKey extends string = string> {
+  /**
+   * The names and values of dynamic parameters in the URL.
+   */
+  params: Params<ParamKey>;
+  /**
+   * The portion of the URL pathname that was matched.
+   */
+  pathname: string;
+  /**
+   * The portion of the URL pathname that was matched before child routes.
+   */
+  pathnameBase: string;
+  /**
+   * The route object that was used to match.
+   */
+  route: RouteObject;
+}
+
+/**
+ * Matches the given routes to a location and returns the match data.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#matchroutes
+ */
+export function matchRoutes(
+  routes: RouteObject[],
+  locationArg: Partial<Location> | string,
+  basename = "/"
+): RouteMatch[] | null {
+  let location =
+    typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+
+  let pathname = stripBasename(location.pathname || "/", basename);
+
+  if (pathname == null) {
+    return null;
+  }
+
+  let branches = flattenRoutes(routes);
+  rankRouteBranches(branches);
+
+  let matches = null;
+  for (let i = 0; matches == null && i < branches.length; ++i) {
+    matches = matchRouteBranch(branches[i], pathname);
+  }
+
+  return matches;
+}
+
+interface RouteMeta {
+  relativePath: string;
+  caseSensitive: boolean;
+  childrenIndex: number;
+  route: RouteObject;
+}
+
+interface RouteBranch {
+  path: string;
+  score: number;
+  routesMeta: RouteMeta[];
+}
+
+function flattenRoutes(
+  routes: RouteObject[],
+  branches: RouteBranch[] = [],
+  parentsMeta: RouteMeta[] = [],
+  parentPath = ""
+): RouteBranch[] {
+  routes.forEach((route, index) => {
+    let meta: RouteMeta = {
+      relativePath: route.path || "",
+      caseSensitive: route.caseSensitive === true,
+      childrenIndex: index,
+      route,
+    };
+
+    if (meta.relativePath.startsWith("/")) {
+      invariant(
+        meta.relativePath.startsWith(parentPath),
+        `Absolute route path "${meta.relativePath}" nested under path ` +
+          `"${parentPath}" is not valid. An absolute child route path ` +
+          `must start with the combined path of all its parent routes.`
+      );
+
+      meta.relativePath = meta.relativePath.slice(parentPath.length);
+    }
+
+    let path = joinPaths([parentPath, meta.relativePath]);
+    let routesMeta = parentsMeta.concat(meta);
+
+    // Add the children before adding this route to the array so we traverse the
+    // route tree depth-first and child routes appear before their parents in
+    // the "flattened" version.
+    if (route.children && route.children.length > 0) {
+      invariant(
+        route.index !== true,
+        `Index routes must not have child routes. Please remove ` +
+          `all child routes from route path "${path}".`
+      );
+
+      flattenRoutes(route.children, branches, routesMeta, path);
+    }
+
+    // Routes without a path shouldn't ever match by themselves unless they are
+    // index routes, so don't add them to the list of possible branches.
+    if (route.path == null && !route.index) {
+      return;
+    }
+
+    branches.push({ path, score: computeScore(path, route.index), routesMeta });
+  });
+
+  return branches;
+}
+
+function rankRouteBranches(branches: RouteBranch[]): void {
+  branches.sort((a, b) =>
+    a.score !== b.score
+      ? b.score - a.score // Higher score first
+      : compareIndexes(
+          a.routesMeta.map((meta) => meta.childrenIndex),
+          b.routesMeta.map((meta) => meta.childrenIndex)
+        )
+  );
+}
+
+const paramRe = /^:\w+$/;
+const dynamicSegmentValue = 3;
+const indexRouteValue = 2;
+const emptySegmentValue = 1;
+const staticSegmentValue = 10;
+const splatPenalty = -2;
+const isSplat = (s: string) => s === "*";
+
+function computeScore(path: string, index: boolean | undefined): number {
+  let segments = path.split("/");
+  let initialScore = segments.length;
+  if (segments.some(isSplat)) {
+    initialScore += splatPenalty;
+  }
+
+  if (index) {
+    initialScore += indexRouteValue;
+  }
+
+  return segments
+    .filter((s) => !isSplat(s))
+    .reduce(
+      (score, segment) =>
+        score +
+        (paramRe.test(segment)
+          ? dynamicSegmentValue
+          : segment === ""
+          ? emptySegmentValue
+          : staticSegmentValue),
+      initialScore
+    );
+}
+
+function compareIndexes(a: number[], b: number[]): number {
+  let siblings =
+    a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
+
+  return siblings
+    ? // If two routes are siblings, we should try to match the earlier sibling
+      // first. This allows people to have fine-grained control over the matching
+      // behavior by simply putting routes with identical paths in the order they
+      // want them tried.
+      a[a.length - 1] - b[b.length - 1]
+    : // Otherwise, it doesn't really make sense to rank non-siblings by index,
+      // so they sort equally.
+      0;
+}
+
+function matchRouteBranch<ParamKey extends string = string>(
+  branch: RouteBranch,
+  pathname: string
+): RouteMatch<ParamKey>[] | null {
+  let { routesMeta } = branch;
+
+  let matchedParams = {};
+  let matchedPathname = "/";
+  let matches: RouteMatch[] = [];
+  for (let i = 0; i < routesMeta.length; ++i) {
+    let meta = routesMeta[i];
+    let end = i === routesMeta.length - 1;
+    let remainingPathname =
+      matchedPathname === "/"
+        ? pathname
+        : pathname.slice(matchedPathname.length) || "/";
+    let match = matchPath(
+      { path: meta.relativePath, caseSensitive: meta.caseSensitive, end },
+      remainingPathname
+    );
+
+    if (!match) return null;
+
+    Object.assign(matchedParams, match.params);
+
+    let route = meta.route;
+
+    matches.push({
+      params: matchedParams,
+      pathname: joinPaths([matchedPathname, match.pathname]),
+      pathnameBase: normalizePathname(
+        joinPaths([matchedPathname, match.pathnameBase])
+      ),
+      route,
+    });
+
+    if (match.pathnameBase !== "/") {
+      matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+    }
+  }
+
+  return matches;
+}
+
+/**
+ * Renders the result of `matchRoutes()` into a React element.
+ */
+export function renderMatches(
+  matches: RouteMatch[] | null
+): React.ReactElement | null {
+  return _renderMatches(matches);
+}
+
+function _renderMatches(
+  matches: RouteMatch[] | null,
+  parentMatches: RouteMatch[] = []
+): React.ReactElement | null {
+  if (matches == null) return null;
+
+  return matches.reduceRight((outlet, match, index) => {
+    return (
+      <RouteContext.Provider
+        children={
+          match.route.element !== undefined ? match.route.element : outlet
+        }
+        value={{
+          outlet,
+          matches: parentMatches.concat(matches.slice(0, index + 1)),
+        }}
+      />
+    );
+  }, null as React.ReactElement | null);
+}
+
+/**
+ * A PathPattern is used to match on some portion of a URL pathname.
+ */
+export interface PathPattern<Path extends string = string> {
+  /**
+   * A string to match against a URL pathname. May contain `:id`-style segments
+   * to indicate placeholders for dynamic parameters. May also end with `/*` to
+   * indicate matching the rest of the URL pathname.
+   */
+  path: Path;
+  /**
+   * Should be `true` if the static portions of the `path` should be matched in
+   * the same case.
+   */
+  caseSensitive?: boolean;
+  /**
+   * Should be `true` if this pattern should match the entire URL pathname.
+   */
+  end?: boolean;
+}
+
+/**
+ * A PathMatch contains info about how a PathPattern matched on a URL pathname.
+ */
+export interface PathMatch<ParamKey extends string = string> {
+  /**
+   * The names and values of dynamic parameters in the URL.
+   */
+  params: Params<ParamKey>;
+  /**
+   * The portion of the URL pathname that was matched.
+   */
+  pathname: string;
+  /**
+   * The portion of the URL pathname that was matched before child routes.
+   */
+  pathnameBase: string;
+  /**
+   * The pattern that was used to match.
+   */
+  pattern: PathPattern;
+}
+
+type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+
+/**
+ * Performs pattern matching on a URL pathname and returns information about
+ * the match.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#matchpath
+ */
+export function matchPath<
+  ParamKey extends ParamParseKey<Path>,
+  Path extends string
+>(
+  pattern: PathPattern<Path> | Path,
+  pathname: string
+): PathMatch<ParamKey> | null {
+  if (typeof pattern === "string") {
+    pattern = { path: pattern, caseSensitive: false, end: true };
+  }
+
+  let [matcher, paramNames] = compilePath(
+    pattern.path,
+    pattern.caseSensitive,
+    pattern.end
+  );
+
+  let match = pathname.match(matcher);
+  if (!match) return null;
+
+  let matchedPathname = match[0];
+  let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
+  let captureGroups = match.slice(1);
+  let params: Params = paramNames.reduce<Mutable<Params>>(
+    (memo, paramName, index) => {
+      // We need to compute the pathnameBase here using the raw splat value
+      // instead of using params["*"] later because it will be decoded then
+      if (paramName === "*") {
+        let splatValue = captureGroups[index] || "";
+        pathnameBase = matchedPathname
+          .slice(0, matchedPathname.length - splatValue.length)
+          .replace(/(.)\/+$/, "$1");
+      }
+
+      memo[paramName] = safelyDecodeURIComponent(
+        captureGroups[index] || "",
+        paramName
+      );
+      return memo;
+    },
+    {}
+  );
+
+  return {
+    params,
+    pathname: matchedPathname,
+    pathnameBase,
+    pattern,
+  };
+}
+
+function compilePath(
+  path: string,
+  caseSensitive = false,
+  end = true
+): [RegExp, string[]] {
+  warning(
+    path === "*" || !path.endsWith("*") || path.endsWith("/*"),
+    `Route path "${path}" will be treated as if it were ` +
+      `"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` +
+      `always follow a \`/\` in the pattern. To get rid of this warning, ` +
+      `please change the route path to "${path.replace(/\*$/, "/*")}".`
+  );
+
+  let paramNames: string[] = [];
+  let regexpSource =
+    "^" +
+    path
+      .replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
+      .replace(/^\/*/, "/") // Make sure it has a leading /
+      .replace(/[\\.*+^$?{}|()[\]]/g, "\\$&") // Escape special regex chars
+      .replace(/:(\w+)/g, (_: string, paramName: string) => {
+        paramNames.push(paramName);
+        return "([^\\/]+)";
+      });
+
+  if (path.endsWith("*")) {
+    paramNames.push("*");
+    regexpSource +=
+      path === "*" || path === "/*"
+        ? "(.*)$" // Already matched the initial /, just match the rest
+        : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
+  } else {
+    regexpSource += end
+      ? "\\/*$" // When matching to the end, ignore trailing slashes
+      : // Otherwise, match a word boundary or a proceeding /. The word boundary restricts
+        // parent routes to matching only their own words and nothing more, e.g. parent
+        // route "/home" should not match "/home2".
+        // Additionally, allow paths starting with `.`, `-`, `~`, and url-encoded entities,
+        // but do not consume the character in the matched path so they can match against
+        // nested paths.
+        "(?:(?=[@.~-]|%[0-9A-F]{2})|\\b|\\/|$)";
+  }
+
+  let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
+
+  return [matcher, paramNames];
+}
+
+function safelyDecodeURIComponent(value: string, paramName: string) {
+  try {
+    return decodeURIComponent(value);
+  } catch (error) {
+    warning(
+      false,
+      `The value for the URL param "${paramName}" will not be decoded because` +
+        ` the string "${value}" is a malformed URL segment. This is probably` +
+        ` due to a bad percent encoding (${error}).`
+    );
+
+    return value;
+  }
+}
+
+/**
+ * Returns a resolved path object relative to the given pathname.
+ *
+ * @see https://reactrouter.com/docs/en/v6/api#resolvepath
+ */
+export function resolvePath(to: To, fromPathname = "/"): Path {
+  let {
+    pathname: toPathname,
+    search = "",
+    hash = "",
+  } = typeof to === "string" ? parsePath(to) : to;
+
+  let pathname = toPathname
+    ? toPathname.startsWith("/")
+      ? toPathname
+      : resolvePathname(toPathname, fromPathname)
+    : fromPathname;
+
+  return {
+    pathname,
+    search: normalizeSearch(search),
+    hash: normalizeHash(hash),
+  };
+}
+
+function resolvePathname(relativePath: string, fromPathname: string): string {
+  let segments = fromPathname.replace(/\/+$/, "").split("/");
+  let relativeSegments = relativePath.split("/");
+
+  relativeSegments.forEach((segment) => {
+    if (segment === "..") {
+      // Keep the root "" segment so the pathname starts at /
+      if (segments.length > 1) segments.pop();
+    } else if (segment !== ".") {
+      segments.push(segment);
+    }
+  });
+
+  return segments.length > 1 ? segments.join("/") : "/";
+}
+
+function resolveTo(
+  toArg: To,
+  routePathnames: string[],
+  locationPathname: string
+): Path {
+  let to = typeof toArg === "string" ? parsePath(toArg) : toArg;
+  let toPathname = toArg === "" || to.pathname === "" ? "/" : to.pathname;
+
+  // If a pathname is explicitly provided in `to`, it should be relative to the
+  // route context. This is explained in `Note on `<Link to>` values` in our
+  // migration guide from v5 as a means of disambiguation between `to` values
+  // that begin with `/` and those that do not. However, this is problematic for
+  // `to` values that do not provide a pathname. `to` can simply be a search or
+  // hash string, in which case we should assume that the navigation is relative
+  // to the current location's pathname and *not* the route pathname.
+  let from: string;
+  if (toPathname == null) {
+    from = locationPathname;
+  } else {
+    let routePathnameIndex = routePathnames.length - 1;
+
+    if (toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/");
+
+      // Each leading .. segment means "go up one route" instead of "go up one
+      // URL segment".  This is a key difference from how <a href> works and a
+      // major reason we call this a "to" value instead of a "href".
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        routePathnameIndex -= 1;
+      }
+
+      to.pathname = toSegments.join("/");
+    }
+
+    // If there are more ".." segments than parent routes, resolve relative to
+    // the root / URL.
+    from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+  }
+
+  let path = resolvePath(to, from);
+
+  // Ensure the pathname has a trailing slash if the original to value had one.
+  if (
+    toPathname &&
+    toPathname !== "/" &&
+    toPathname.endsWith("/") &&
+    !path.pathname.endsWith("/")
+  ) {
+    path.pathname += "/";
+  }
+
+  return path;
+}
+
+function getToPathname(to: To): string | undefined {
+  // Empty strings should be treated the same as / paths
+  return to === "" || (to as Path).pathname === ""
+    ? "/"
+    : typeof to === "string"
+    ? parsePath(to).pathname
+    : to.pathname;
+}
+
+function stripBasename(pathname: string, basename: string): string | null {
+  if (basename === "/") return pathname;
+
+  if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
+    return null;
+  }
+
+  let nextChar = pathname.charAt(basename.length);
+  if (nextChar && nextChar !== "/") {
+    // pathname does not start with basename/
+    return null;
+  }
+
+  return pathname.slice(basename.length) || "/";
+}
+
+const joinPaths = (paths: string[]): string =>
+  paths.join("/").replace(/\/\/+/g, "/");
+
+const normalizePathname = (pathname: string): string =>
+  pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
+
+const normalizeSearch = (search: string): string =>
+  !search || search === "?"
+    ? ""
+    : search.startsWith("?")
+    ? search
+    : "?" + search;
+
+const normalizeHash = (hash: string): string =>
+  !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
+
+///////////////////////////////////////////////////////////////////////////////
+// DANGER! PLEASE READ ME!
+// We provide these exports as an escape hatch in the event that you need any
+// routing data that we don't provide an explicit API for. With that said, we
+// want to cover your use case if we can, so if you feel the need to use these
+// we want to hear from you. Let us know what you're building and we'll do our
+// best to make sure we can support you!
+//
+// We consider these exports an implementation detail and do not guarantee
+// against any breaking changes, regardless of the semver release. Use with
+// extreme caution and only if you understand the consequences. Godspeed.
+///////////////////////////////////////////////////////////////////////////////
+
+/** @internal */
+export {
+  NavigationContext as UNSAFE_NavigationContext,
+  LocationContext as UNSAFE_LocationContext,
+  RouteContext as UNSAFE_RouteContext,
+};
diff --git a/packages/react-router/lib/router.ts b/packages/react-router/lib/router.ts
index f8d87eefd2..a0c668d467 100644
--- a/packages/react-router/lib/router.ts
+++ b/packages/react-router/lib/router.ts
@@ -477,7 +477,7 @@ function compilePath(
         // Additionally, allow paths starting with `.`, `-`, `~`, and url-encoded entities,
         // but do not consume the character in the matched path so they can match against
         // nested paths.
-        "(?:(?=[.~-]|%[0-9A-F]{2})|\\b|\\/|$)";
+        "(?:(?=[@.~-]|%[0-9A-F]{2})|\\b|\\/|$)";
   }
 
   let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");