Skip to content

Commit 1cab4cd

Browse files
hsbtrliuyanRemix Run Bottimdorr
authored
docs:Add unstable_HistoryRouter to the api.md document (#8476)
Co-authored-by: liuyan <[email protected]> Co-authored-by: Remix Run Bot <[email protected]> Co-authored-by: Tim Dorr <[email protected]>
1 parent 5dc07e2 commit 1cab4cd

File tree

2 files changed

+41
-0
lines changed

2 files changed

+41
-0
lines changed

contributors.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@
3030
- turansky
3131
- underager
3232
- vijaypushkin
33+
- hsbtr

docs/api.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ To get React Router working in your app, you need to render a router element at
2929
- [`<StaticRouter>`](#staticrouter) should be used when server-rendering a website
3030
- [`<NativeRouter>`](#nativerouter) should be used in [React Native](https://reactnative.dev/) apps
3131
- [`<MemoryRouter>`](#memoryrouter) is useful in testing scenarios and as a reference implementation for the other routers
32+
- [`<unstable_HistoryRouter>`](#unstable_historyrouter) is used with your own [`history`](https://github.com/remix-run/history) instance.
3233

3334
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.
3435

@@ -233,6 +234,45 @@ describe("My app", () => {
233234
});
234235
```
235236

237+
### `<unstable_HistoryRouter>`
238+
239+
<details>
240+
<summary>Type declaration</summary>
241+
242+
```tsx
243+
declare function HistoryRouter(
244+
props: HistoryRouterProps
245+
): React.ReactElement;
246+
247+
interface HistoryRouterProps {
248+
basename?: string;
249+
children?: React.ReactNode;
250+
history: History;
251+
}
252+
```
253+
254+
</details>
255+
256+
`<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.
257+
258+
```tsx
259+
import * as React from "react";
260+
import * as ReactDOM from "react-dom";
261+
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
262+
import { createBrowserHistory } from "history";
263+
264+
const history = createBrowserHistory({ window });
265+
266+
ReactDOM.render(
267+
<HistoryRouter history={history}>
268+
{/* The rest of your app goes here */}
269+
</HistoryRouter>,
270+
root
271+
);
272+
```
273+
274+
<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>
275+
236276
### `<Link>`
237277

238278
> **Note:**

0 commit comments

Comments
 (0)