Update docs for future flags

Author: brophdawg11

docs/router-components/browser-router.md

@@ -15,6 +15,7 @@ declare function BrowserRouter(
 interface BrowserRouterProps {
   basename?: string;
   children?: React.ReactNode;
+  future?: FutureConfig;
   window?: Window;
 }
 ```
@@ -23,8 +24,6 @@ interface BrowserRouterProps {
 
 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 { createRoot } from "react-dom/client";
@@ -39,4 +38,39 @@ root.render(
 );
 ```
 
+## `basename`
+
+Configure your application to run underneath a specific basename in the URL:
+
+```jsx
+function App() {
+  return (
+    <BrowserRouter basename="/app">
+      <Routes>
+        <Route path="/" /> {/* 👈 Renders at /app/ */}
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <BrowserRouter future={{ v7_startTransition: true }}>
+      <Routes>{/*...*/}</Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+## `window`
+
+`BrowserRouter` 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.
+
 [defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+[api-development-strategy]: ../guides/api-development-strategy

docs/router-components/hash-router.md

@@ -15,6 +15,7 @@ declare function HashRouter(
 interface HashRouterProps {
   basename?: string;
   children?: React.ReactNode;
+  future?: FutureConfig;
   window?: Window;
 }
 ```
@@ -23,8 +24,6 @@ interface HashRouterProps {
 
 `<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";
@@ -40,4 +39,39 @@ ReactDOM.render(
 
 <docs-warning>We strongly recommend you do not use `HashRouter` unless you absolutely have to.</docs-warning>
 
+## `basename`
+
+Configure your application to run underneath a specific basename in the URL:
+
+```jsx
+function App() {
+  return (
+    <HashRouter basename="/app">
+      <Routes>
+        <Route path="/" /> {/* 👈 Renders at /#/app/ */}
+      </Routes>
+    </HashRouter>
+  );
+}
+```
+
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <HashRouter future={{ v7_startTransition: true }}>
+      <Routes>{/*...*/}</Routes>
+    </HashRouter>
+  );
+}
+```
+
+## `window`
+
+`HashRouter` 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.
+
 [defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+[api-development-strategy]: ../guides/api-development-strategy

docs/router-components/memory-router.md

@@ -17,6 +17,7 @@ interface MemoryRouterProps {
   children?: React.ReactNode;
   initialEntries?: InitialEntry[];
   initialIndex?: number;
+  future?: FutureConfig;
 }
 ```
 
@@ -59,4 +60,36 @@ describe("My app", () => {
 });
 ```
 
+## `basename`
+
+Configure your application to run underneath a specific basename in the URL:
+
+```jsx
+function App() {
+  return (
+    <MemoryRouter basename="/app">
+      <Routes>
+        <Route path="/" /> {/* 👈 Renders at /app/ */}
+      </Routes>
+    </MemoryRouter>
+  );
+}
+```
+
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <MemoryRouter future={{ v7_startTransition: true }}>
+      <Routes>{/*...*/}</Routes>
+    </MemoryRouter>
+  );
+}
+```
+
+[defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+[api-development-strategy]: ../guides/api-development-strategy
 [tests]: https://github.com/remix-run/react-router/tree/main/packages/react-router/__tests__

docs/routers/router-provider.md

@@ -5,6 +5,23 @@ new: true
 
 # `<RouterProvider>`
 
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function RouterProvider(
+  props: RouterProviderProps
+): React.ReactElement;
+
+interface RouterProviderProps {
+  fallbackElement?: React.ReactNode;
+  router: Router;
+  future?: FutureConfig;
+}
+```
+
+</details>
+
 All [data router][picking-a-router] objects are passed to this component to render your app and enable the rest of the data APIs.
 
 ```jsx lines=[24]
@@ -49,4 +66,20 @@ If you are not server rendering your app, `createBrowserRouter` will initiate al
 />
 ```
 
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <RouterProvider
+      router={router}
+      future={{ v7_startTransition: true }}
+    />
+  );
+}
+```
+
 [picking-a-router]: ./picking-a-router
+[api-development-strategy]: ../guides/api-development-strategy