From 17f8e8e977110e0f2e3b9fac0310ad2b16bb5de0 Mon Sep 17 00:00:00 2001
From: laohan <120936337@qq.com>
Date: Fri, 10 Dec 2021 10:13:03 +0800
Subject: [PATCH] Use `Pick` instead of `Omit` (#8374)

Co-authored-by: Tim Dorr <timdorr@users.noreply.github.com>
---
 .github/workflows/format.yml                  |  42 ++++++
 .github/workflows/test.yml                    |   6 -
 .github/workflows/website.yml                 |   8 +-
 contributors.yml                              |   6 +
 docs/api.md                                   |  77 ++++++++++-
 docs/contributing.md                          |   2 +-
 docs/faq.md                                   |  10 +-
 docs/getting-started/concepts.md              |   6 +-
 docs/getting-started/installation.md          |   6 +-
 docs/getting-started/overview.md              |   6 +-
 docs/getting-started/tutorial.md              |   6 +-
 docs/upgrading/reach.md                       |  12 +-
 docs/upgrading/v5.md                          |   4 +-
 packages/react-router-dom/index.tsx           |   6 +-
 packages/react-router-native/index.tsx        |   6 +-
 .../react-router/__tests__/useOutlet-test.tsx | 120 +++++++++++++++++-
 packages/react-router/index.tsx               |  31 +++--
 17 files changed, 305 insertions(+), 49 deletions(-)
 create mode 100644 .github/workflows/format.yml

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
new file mode 100644
index 0000000000..8c38503718
--- /dev/null
+++ b/.github/workflows/format.yml
@@ -0,0 +1,42 @@
+name: Format
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Format
+        run: npm run format --if-present
+
+      - name: Commit
+        run: |
+          git config --local user.email "github-actions@remix.run"
+          git config --local user.name "Remix Run Bot"
+
+          git add .
+          if [ -z "$(git status --porcelain)" ]; then
+            echo "💿 no formatting changed"
+            exit 0
+          fi
+          git commit -m "chore: format" -m "formatted $GITHUB_SHA"
+          git push
+          echo "💿 pushed formatting changes https://github.com/$GITHUB_REPOSITORY/commit/$(git rev-parse HEAD)"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b3dfb50db9..8c49cbef9f 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -22,12 +22,6 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
-      - name: Check formatting
-        run: yarn format:check
-
-      - name: Lint
-        run: yarn lint
-
       - name: Build
         run: yarn build
 
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index 2762b50ea0..f9e96bf770 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -22,4 +22,10 @@ jobs:
           url: "${{ secrets.DOCS_REFRESH_URL }}?ref=${{ github.ref }}"
           method: "POST"
           customHeaders: '{"Authorization": "${{ secrets.DOCS_REFRESH_TOKEN }}"}'
-          timeout: 60000
+
+      - name: Refresh the staging docs
+        uses: fjogeleit/http-request-action@v1.8.1
+        with:
+          url: "${{ secrets.DOCS_STAGING_REFRESH_URL }}?ref=${{ github.ref }}"
+          method: "POST"
+          customHeaders: '{"Authorization": "${{ secrets.DOCS_REFRESH_TOKEN }}"}'
diff --git a/contributors.yml b/contributors.yml
index 80f60dfc4e..9f11163d97 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -1,14 +1,20 @@
+- Ajayff4
+- brockross
 - elylucas
 - hongji00
 - JakubDrozd
 - jonkoops
+- kentcdodds
 - kddnewton
 - kkirsche
 - markivancho
 - mcansh
 - noisypigeon
+- elylucas
+- liuhanqu
 - paulsmithkc
 - petersendidit
+- RobHannay
 - shivamsinghchahar
 - timdorr
 - turansky
diff --git a/docs/api.md b/docs/api.md
index ae74e81257..09c0d70a93 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -90,7 +90,7 @@ interface BrowserRouterProps {
 
 `<BrowserRouter>` is the recommended interface for running React Router in a web browser. A `<BrowserRouter>` stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.
 
-`<BrowserRouter window>` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another's window's URL, in an `<iframe>`, for example.
+`<BrowserRouter window>` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
 
 ```tsx
 import * as React from "react";
@@ -528,7 +528,12 @@ class LoginForm extends React.Component {
   <summary>Type declaration</summary>
 
 ```tsx
-declare function Outlet(): React.ReactElement | null;
+interface OutletProps {
+  context?: unknown;
+}
+declare function Outlet(
+  props: OutletProps
+): React.ReactElement | null;
 ```
 
 </details>
@@ -564,6 +569,74 @@ function App() {
 }
 ```
 
+### `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]
+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";
+
+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>
diff --git a/docs/contributing.md b/docs/contributing.md
index 4ed58bdac6..4e34945798 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -16,7 +16,7 @@ Before you can contribute to the codebase, you will need to fork the repo. This
 - All new features, bug-fixes, or **anything that touches `react-router` code** should be branched off of and merged into the `dev` branch
 - Changes that only touch documentation can be branched off of and merged into the `main` branch
 
-The following steps will get you setup to contribute changes to this repo:
+The following steps will get you set up to contribute changes to this repo:
 
 1. Fork the repo (click the <kbd>Fork</kbd> button at the top right of [this page](https://github.com/remix-run/react-router))
 2. Clone your fork locally
diff --git a/docs/faq.md b/docs/faq.md
index ef6216f50a..da420e9a22 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -43,7 +43,7 @@ In React Router v6 we switched from using v5's `<Route component>` and `<Route r
 
 For starters, we see React itself taking the lead here with the `<Suspense fallback={<Spinner />}>` API. The `fallback` prop takes a React **element**, not a **component**. This lets you easily pass whatever props you want to your `<Spinner>` from the component that renders it.
 
-Using elements instead of components means we don't have to provide a `passProps`-style API so you can get the props you need to your elements. For example, in a component-based API there is no good way to pass props to the `<Profile>` element that is rendered when `<Route path=":userId" component={Profile} />` matches. Most React libraries who take this approach end up with either an API like `<Route component={Profile} passProps={{ animate: true }} />` or use a render prop or higher-order component.
+Using elements instead of components means we don't have to provide a `passProps`-style API, so you can get the props you need to your elements. For example, in a component-based API there is no good way to pass props to the `<Profile>` element that is rendered when `<Route path=":userId" component={Profile} />` matches. Most React libraries who take this approach end up with either an API like `<Route component={Profile} passProps={{ animate: true }} />` or use a render prop or higher-order component.
 
 Also, `Route`'s rendering API in v5 was rather large. As we worked on v4/5, the conversation went something like this:
 
@@ -128,7 +128,7 @@ In v4 we would have just left the path prop off a route. In v5 we would have wra
 
 ## `<Route>` doesn't render? How do I compose?
 
-In v5 the `<Route>` component was just a normal component that was like an `if` statement that rendered when the URL matched it's path. In v6, a `<Route>` element doesn't actually ever render, it's simply there for configuration.
+In v5 the `<Route>` component was just a normal component that was like an `if` statement that rendered when the URL matched its path. In v6, a `<Route>` element doesn't actually ever render, it's simply there for configuration.
 
 In v5, since routes were just components, `MyRoute` will be rendered when the path is "/my-route".
 
@@ -146,7 +146,7 @@ let MyRoute = ({ element, ...rest }) => {
 };
 ```
 
-In v6, however, the `<Route>` is only used for it's props, so the following code will never render `<p>Hello!</p>` because `<MyRoute>` has no path that `<Routes>` can see:
+In v6, however, the `<Route>` is only used for its props, so the following code will never render `<p>Hello!</p>` because `<MyRoute>` has no path that `<Routes>` can see:
 
 ```tsx bad filename=v6-wrong.js
 let App = () => (
@@ -196,7 +196,7 @@ function MatchPath({ path, Comp }) {
 
 ## How do I nest routes deep in the tree?
 
-In v5 you could render a `<Route>` or `<Switch>` anywhere you want. You can keep doing the very same thing but you need to use `<Routes>` (`<Route>` without an 's' will not work). We call these "Descendant `<Routes>`".
+In v5 you could render a `<Route>` or `<Switch>` anywhere you want. You can keep doing the very same thing, but you need to use `<Routes>` (`<Route>` without an 's' will not work). We call these "Descendant `<Routes>`".
 
 It might have looked like this in v5
 
@@ -391,7 +391,7 @@ function App() {
 }
 ```
 
-In fact, the v5 version has all sorts of problems if your routes aren't ordered _just right_. V6 competely eliminates this problem.
+In fact, the v5 version has all sorts of problems if your routes aren't ordered _just right_. V6 completely eliminates this problem.
 
 **Remix Users**
 
diff --git a/docs/getting-started/concepts.md b/docs/getting-started/concepts.md
index 6cb4541b80..a9f03d5189 100644
--- a/docs/getting-started/concepts.md
+++ b/docs/getting-started/concepts.md
@@ -33,9 +33,9 @@ Here are some words we use a lot when we talk about React Router. The rest of th
 
 - <a id="history-stack">**History Stack**</a> - As the user navigates, the browser keeps track of each [location](#location) in a stack. If you click and hold the back button in a browser you can see the browser's history stack right there.
 
-- <a id="csr">**Client Side Routing (CSR)**</a> - A plain HTML document can link to other documents and the browser handles the [history stack](#history-stack) itself. Client Side Routing enables developers to manipulate the browser history stack without making document request to the server.
+- <a id="csr">**Client Side Routing (CSR)**</a> - A plain HTML document can link to other documents and the browser handles the [history stack](#history-stack) itself. Client Side Routing enables developers to manipulate the browser history stack without making a document request to the server.
 
-- <a id="history-object">**History**</a> - An object allows React Router to subscribe to changes in the [URL](#url) as well as providing APIs to manipulate the browser [history stack](#history-stack) programmatically.
+- <a id="history-object">**History**</a> - An object that allows React Router to subscribe to changes in the [URL](#url) as well as providing APIs to manipulate the browser [history stack](#history-stack) programmatically.
 
 - <a id="history-action">**History Action**</a> - One of `POP`, `PUSH`, or `REPLACE`. Users can arrive at a [URL](#url) for one of these three reasons. A push when a new entry is added to the history stack (typically a link click or the programmer forced a navigation). A replace is similar except it replaces the current entry on the stack instead of pushing a new one. Finally, a pop happens when the user clicks the back or forward buttons in the browser chrome.
 
@@ -230,7 +230,7 @@ You can think about `location.state` just like `location.hash` or `location.sear
 
 A couple great use-cases for location state are:
 
-- Telling the next page where the user came from and branching the UI. The most popular implementation here is the showing a record in a modal if the user clicked on an item in a grid view, but if they show up to the URL directly, show the record in it's own layout (pinterest, old instagram).
+- Telling the next page where the user came from and branching the UI. The most popular implementation here is the showing a record in a modal if the user clicked on an item in a grid view, but if they show up to the URL directly, show the record in its own layout (pinterest, old instagram).
 - Sending a partial record from a list to the next screen so it can render the partial data immediately and then fetching the rest of the data afterward.
 
 You set location state in two ways: on `<Link>` or `navigate`:
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 1ab9d047a5..05d5b8c741 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -122,7 +122,7 @@ function About() {
 }
 ```
 
-Go ahead and start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `<About>` route, and voila! You've successfully set up React Router using Create React App! 🥳
+Go ahead and start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `<About>` route, and voilà! You've successfully set up React Router using Create React App! 🥳
 
 When it's time to deploy your app to production, be sure to follow [Create React App's instructions](https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing) on deploying with React Router to be sure your server is configured correctly.
 
@@ -163,7 +163,7 @@ ReactDOM.render(
 );
 ```
 
-In your `index.html`, create the root div in the document body above the script tag. It's also helpful to provide a `noscript` fallback message for users who may disabled JavaScript, unless you plan on server-rendering your app later.
+In your `index.html`, create the root div in the document body above the script tag. It's also helpful to provide a `noscript` fallback message for users who may have disabled JavaScript, unless you plan on server-rendering your app later.
 
 ```html
 <body>
@@ -231,7 +231,7 @@ function About() {
 export default App;
 ```
 
-Now start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `About` route, and voila! You successfully set up React Router using Parcel! 🥳
+Now start your app by running `npm start`, and you should see the `Home` route when your app starts running. Click the "About" link to see your `About` route, and voilà! You successfully set up React Router using Parcel! 🥳
 
 ## Webpack
 
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 8f10604ecf..cd86861f71 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -218,7 +218,7 @@ function SentInvoices() {
 
 The nested url segments map to nested component trees. This is perfect for creating UI that has persistent navigation in layouts with an inner section that changes with the URL. If you look around the web you'll notice many websites (and especially web apps) have multiple levels of layout nesting.
 
-Here's a another example of a root layout with navigation that persists while the inner page swaps out with the URL:
+Here's another example of a root layout with navigation that persists while the inner page swaps out with the URL:
 
 ```tsx
 import {
@@ -311,7 +311,7 @@ function App() {
 
 Now at "/" the `<Activity>` element will render inside the outlet.
 
-You can have an index route at any level of the route hierarchy that will render when the parent matches but none of it's other children do.
+You can have an index route at any level of the route hierarchy that will render when the parent matches but none of its other children do.
 
 ```tsx
 function App() {
@@ -435,7 +435,7 @@ function App() {
 
 ## Descendant `<Routes>`
 
-You can render [a `<Routes>` element](../api.md#routes) anywhere you need one, including deep within the component tree of another `<Routes>`. These will work just the same as any other `<Routes>`, except they will automatically build on the path of the route that rendered them. If you do this, _make sure to put a \* at the end of the parent route's path_. Otherwise the parent route won't match the URL when it is longer than the parent route's path, and your descendant `<Routes>` won't ever show up.
+You can render [a `<Routes>` element](../api.md#routes) anywhere you need one, including deep within the component tree of another `<Routes>`. These will work just the same as any other `<Routes>`, except they will automatically build on the path of the route that rendered them. If you do this, _make sure to put a \* at the end of the parent route's path_. Otherwise, the parent route won't match the URL when it is longer than the parent route's path, and your descendant `<Routes>` won't ever show up.
 
 ```tsx [5]
 function App() {
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index 3fcd98224e..97d5d8bb2d 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -53,7 +53,7 @@ Then install React Router dependencies:
 
 ```sh
 cd router-tutorial
-npm add react-router-dom@6 history@5
+npm install react-router-dom@6 history@5
 ```
 
 Then edit your App.js to be pretty boring:
@@ -80,7 +80,7 @@ const rootElement = document.getElementById("root");
 render(<App />, rootElement);
 ```
 
-Finally start your app:
+Finally, start your app:
 
 ```sh
 # probably this
@@ -794,7 +794,7 @@ Most of the time the URL changes is in response to the user clicking a link. But
 
 Let's add a button that marks the invoice as paid and then navigates to the index route.
 
-First you can copy paste this function that deletes an invoice from our fake data store:
+First you can copy and paste this function that deletes an invoice from our fake data store:
 
 ```js filename=src/data.js
 export function deleteInvoice(number) {
diff --git a/docs/upgrading/reach.md b/docs/upgrading/reach.md
index 31e609fd33..2d3291c389 100644
--- a/docs/upgrading/reach.md
+++ b/docs/upgrading/reach.md
@@ -150,9 +150,9 @@ ReactDOM.render(
 
 #### Justification:
 
-`@reach/router` uses a global, default history instance that has side-effects in the module, which prevents the ability to tree-shake the module whether you use the global or not. Additionally, React Router provides other history types (like hash history) that `@reach/router` doesn't, so it always requires a top-level location provider (in React Router these are `<BrowserRouter/>` and friends).
+`@reach/router` uses a global, default history instance that has side effects in the module, which prevents the ability to tree-shake the module whether you use the global or not. Additionally, React Router provides other history types (like hash history) that `@reach/router` doesn't, so it always requires a top-level location provider (in React Router these are `<BrowserRouter/>` and friends).
 
-Also, various modules like `Router`, `Link` and `useLocation` rendered outside of a `<LocationProvider/>` set up their own URL listener. It's generally not a problem, but every little bit counts. Putting a `<LocationProvider />` at the top allows the app to have a single URL listener.
+Also, various modules like `Router`, `Link` and `useLocation` rendered outside a `<LocationProvider/>` set up their own URL listener. It's generally not a problem, but every little bit counts. Putting a `<LocationProvider />` at the top allows the app to have a single URL listener.
 
 ## Breaking updates
 
@@ -250,7 +250,7 @@ The way redirects work in `@reach/router` was a bit of an experiment. It "throws
 
 After bumping into issues (like app level `componentDidCatch`'s needing to rethrow the redirect), we've decided not to do that anymore in React Router v6.
 
-But we've gone a step farther and concluded that redirect's are not even the job of React Router. Your dynamic web server or static file server should be handling this and sending an appropriate response status code like 301 or 302.
+But we've gone a step farther and concluded that redirects are not even the job of React Router. Your dynamic web server or static file server should be handling this and sending an appropriate response status code like 301 or 302.
 
 Having the ability to redirect while matching in React Router at best requires you to configure the redirects in two places (your server and your routes) and at worst encouraged people to only do it in React Router--which doesn't send a status code at all.
 
@@ -290,7 +290,7 @@ If your app has a `<Link to="/events" />` still hanging around and the user
 clicks it, the server isn't involved since you're using a client-side router.
 You'll need to be more diligent about updating your links 😬.
 
-Alternatively, if you want to allow for outdated links, _and you realize you need to configure your redirects on both the client and the server_, go ahead and copy paste the `Redirect` component we were about to ship but then deleted.
+Alternatively, if you want to allow for outdated links, _and you realize you need to configure your redirects on both the client and the server_, go ahead and copy and paste the `Redirect` component we were about to ship but then deleted.
 
 ```jsx
 import { useEffect } from "react";
@@ -448,11 +448,11 @@ Also note the change from `uri -> url`.
 
 Just feels cleaner to have the params be separate from URL and path.
 
-Also nobody knows the difference between URL and URI, so we didn't want to start a bunch of pedantic arguments about it. React Router always called it URL, and it's got more production apps, so we used URL instead of URI.
+Also, nobody knows the difference between URL and URI, so we didn't want to start a bunch of pedantic arguments about it. React Router always called it URL, and it's got more production apps, so we used URL instead of URI.
 
 ### `<Match />`
 
-There is no `<Match/>` component in React Router v6. It used render props to compose behavior but we've got hooks now.
+There is no `<Match/>` component in React Router v6. It used render props to compose behavior, but we've got hooks now.
 
 If you like it, or just don't want to update your code, it's easy to backport:
 
diff --git a/docs/upgrading/v5.md b/docs/upgrading/v5.md
index d9375b0bde..fca0c8cfc2 100644
--- a/docs/upgrading/v5.md
+++ b/docs/upgrading/v5.md
@@ -17,7 +17,7 @@ Until then, we hope this guide will help you do the upgrade all at once!
 
 React Router version 6 introduces several powerful new features, as well as improved compatibility with the latest versions of React. It also introduces a few breaking changes from version 5. This document is a comprehensive guide on how to upgrade your v4/5 app to v6 while hopefully being able to ship as often as possible as you go.
 
-If you are just getting started with React Router or you'd like to try out v6 in a new app, please see [the Getting Started guide](../getting-started/installation.md).
+If you are just getting started with React Router, or you'd like to try out v6 in a new app, please see [the Getting Started guide](../getting-started/installation.md).
 
 The examples in this guide will show code samples of how you might have built something in a v5 app, followed by how you would accomplish the same thing in v6. There will also be an explanation of why we made this change and how it's going to improve both your code and the overall user experience of people who are using your app.
 
@@ -159,7 +159,7 @@ React Router v6 introduces a `Routes` component that is kind of like `Switch`, b
   This avoids bugs due to unreachable routes because they were defined later
   in your `<Switch>`
 - Routes may be nested in one place instead of being spread out in different
-  components. In small to medium sized apps, this lets you easily see all your
+  components. In small to medium-sized apps, this lets you easily see all your
   routes at once. In large apps, you can still nest routes in bundles that you
   load dynamically via `React.lazy`
 
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index 1646c2d06d..86b0e43a81 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -23,7 +23,8 @@ import {
   useOutlet,
   useParams,
   useResolvedPath,
-  useRoutes
+  useRoutes,
+  useOutletContext
 } from "react-router";
 import type { To } from "react-router";
 
@@ -71,7 +72,8 @@ export {
   useOutlet,
   useParams,
   useResolvedPath,
-  useRoutes
+  useRoutes,
+  useOutletContext
 };
 
 export type {
diff --git a/packages/react-router-native/index.tsx b/packages/react-router-native/index.tsx
index 2408e58565..1660ba1e3d 100644
--- a/packages/react-router-native/index.tsx
+++ b/packages/react-router-native/index.tsx
@@ -30,7 +30,8 @@ import {
   useOutlet,
   useParams,
   useResolvedPath,
-  useRoutes
+  useRoutes,
+  useOutletContext
 } from "react-router";
 import type { To } from "react-router";
 
@@ -63,7 +64,8 @@ export {
   useOutlet,
   useParams,
   useResolvedPath,
-  useRoutes
+  useRoutes,
+  useOutletContext
 };
 
 export type {
diff --git a/packages/react-router/__tests__/useOutlet-test.tsx b/packages/react-router/__tests__/useOutlet-test.tsx
index dc44368315..17a9133e91 100644
--- a/packages/react-router/__tests__/useOutlet-test.tsx
+++ b/packages/react-router/__tests__/useOutlet-test.tsx
@@ -1,6 +1,12 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, useOutlet } from "react-router";
+import {
+  MemoryRouter,
+  Routes,
+  Route,
+  useOutlet,
+  useOutletContext
+} from "react-router";
 
 describe("useOutlet", () => {
   describe("when there is no child route", () => {
@@ -50,4 +56,116 @@ describe("useOutlet", () => {
       `);
     });
   });
+
+  describe("when there is no context", () => {
+    it("returns null", () => {
+      function Users() {
+        return useOutlet();
+      }
+
+      function Profile() {
+        let outletContext = useOutletContext();
+
+        return (
+          <div>
+            <h1>Profile</h1>
+            <pre>{outletContext}</pre>
+          </div>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="users" element={<Users />}>
+                <Route path="profile" element={<Profile />} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Profile
+          </h1>
+          <pre />
+        </div>
+      `);
+    });
+  });
+
+  describe("when there is context", () => {
+    it("returns the context", () => {
+      function Users() {
+        return useOutlet([
+          "Mary",
+          "Jane",
+          "Michael",
+          "Bert",
+          "Winifred",
+          "George"
+        ]);
+      }
+
+      function Profile() {
+        let outletContext = useOutletContext<string[]>();
+
+        return (
+          <div>
+            <h1>Profile</h1>
+            <ul>
+              {outletContext.map(name => (
+                <li key={name}>{name}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/users/profile"]}>
+            <Routes>
+              <Route path="users" element={<Users />}>
+                <Route path="profile" element={<Profile />} />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            Profile
+          </h1>
+          <ul>
+            <li>
+              Mary
+            </li>
+            <li>
+              Jane
+            </li>
+            <li>
+              Michael
+            </li>
+            <li>
+              Bert
+            </li>
+            <li>
+              Winifred
+            </li>
+            <li>
+              George
+            </li>
+          </ul>
+        </div>
+      `);
+    });
+  });
 });
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index b787ac5d95..f90915aad4 100644
--- a/packages/react-router/index.tsx
+++ b/packages/react-router/index.tsx
@@ -57,10 +57,7 @@ function warningOnce(key: string, cond: boolean, message: string) {
  * 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 = Omit<
-  History,
-  "action" | "location" | "back" | "forward" | "listen" | "block"
->;
+export type Navigator = Pick<History, "go" | "push" | "replace" | "createHref">;
 
 interface NavigationContextObject {
   basename: string;
@@ -183,15 +180,17 @@ export function Navigate({ to, replace, state }: NavigateProps): null {
   return null;
 }
 
-export interface OutletProps {}
+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();
+export function Outlet(props: OutletProps): React.ReactElement | null {
+  return useOutlet(props.context);
 }
 
 export interface RouteProps {
@@ -561,14 +560,28 @@ export function useNavigate(): NavigateFunction {
   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(): React.ReactElement | null {
-  return React.useContext(RouteContext).outlet;
+export function useOutlet(context?: unknown): React.ReactElement | null {
+  let outlet = React.useContext(RouteContext).outlet;
+  return (
+    <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
+  );
 }
 
 /**