Skip to content

Commit

Permalink
Update docs for future flags
Browse files Browse the repository at this point in the history
  • Loading branch information
brophdawg11 committed Jun 14, 2023
1 parent a0b53e3 commit 7073795
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 4 deletions.
38 changes: 36 additions & 2 deletions docs/router-components/browser-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ declare function BrowserRouter(
interface BrowserRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
window?: Window;
}
```
Expand All @@ -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";
Expand All @@ -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
38 changes: 36 additions & 2 deletions docs/router-components/hash-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ declare function HashRouter(
interface HashRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
window?: Window;
}
```
Expand All @@ -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";
Expand All @@ -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
33 changes: 33 additions & 0 deletions docs/router-components/memory-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ interface MemoryRouterProps {
children?: React.ReactNode;
initialEntries?: InitialEntry[];
initialIndex?: number;
future?: FutureConfig;
}
```

Expand Down Expand Up @@ -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__
33 changes: 33 additions & 0 deletions docs/routers/router-provider.md
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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

0 comments on commit 7073795

Please sign in to comment.