diff --git a/docs/api-reference.md b/docs/api-reference.md index c149268e0..c9c5c1fe9 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -79,6 +79,9 @@ See [the Getting Started guide](getting-started.md) for more information. ### `createBrowserHistory` +
+ Type declaration + ```tsx declare createBrowserHistory({ window?: Window }): BrowserHistory; @@ -95,6 +98,7 @@ interface BrowserHistory { block(blocker: Blocker): () => void; } ``` +
A browser history object keeps track of the browsing history of an application using the browser's built-in history stack. It is designed to run in modern web browsers that support the HTML5 history interface including `pushState`, `replaceState`, and the `popstate` event. @@ -113,7 +117,8 @@ See [the Getting Started guide](getting-started.md) for more information. ### `createPath` and `parsePath` -The library also exports `createPath` and `parsePath` methods that are useful when working with URL paths. +
+ Type declaration ```ts declare createPath(partialPath: PartialPath): string; @@ -125,12 +130,23 @@ interface PartialPath { hash?: string; } ``` +
+ +The `createPath` and `parsePath` functions are useful for creating and parsing URL paths. + +```ts +createPath({ pathname: '/login', search: '?next=home' }); // "/login?next=home" +parsePath('/login?next=home'); // { pathname: '/login', search: '?next=home' } +``` ### `createHashHistory` +
+ Type declaration + ```ts declare createHashHistory({ window?: Window }): HashHistory; @@ -147,6 +163,7 @@ interface HashHistory { block(blocker: Blocker): () => void; } ``` +
A hash history object keeps track of the browsing history of an application using the browser's built-in history stack. It is designed to be run in modern web browsers that support the HTML5 history interface including `pushState`, `replaceState`, and the `popstate` event. @@ -166,6 +183,9 @@ See [the Getting Started guide](getting-started.md) for more information. ### `createMemoryHistory` +
+ Type declaration + ```ts declare createMemoryHistory({ initialEntries?: InitialEntry[], @@ -188,6 +208,7 @@ interface MemoryHistory { block(blocker: Blocker): () => void; } ``` +
A memory history object keeps track of the browsing history of an application using an internal array. This makes it ideal in situations where you need complete control over the history stack, like React Native and tests. @@ -224,6 +245,9 @@ See [the Navigation guide](navigation.md) for more information. ### `history.block(blocker: Blocker)` +
+ Type declaration + ```ts interface Blocker { (tx: Transition): void; @@ -235,6 +259,7 @@ interface Transition { retry(): void; } ``` +
Prevents changes to the history stack from happening. This is useful when you want to prevent the user navigating away from the current page, for example when they have some unsaved data on the current page. @@ -287,6 +312,9 @@ The current index in the history stack. ### `history.listen(listener: Listener)` +
+ Type declaration + ```ts interface Listener { (update: Update): void; @@ -297,6 +325,7 @@ interface Update { location: Location; } ``` +
Starts listening for location changes and calls the given callback with an `Update` when it does. @@ -340,6 +369,9 @@ See [the Navigation guide](navigation.md) for more information. ### Location +
+ Type declaration + ```ts interface Location { pathname: string; @@ -349,6 +381,7 @@ interface Location { key: string; } ``` +
A `location` is a particular entry in the history stack, usually analogous to a "page" or "screen" in your app. As the user clicks on links and moves around the app, the current location changes. @@ -400,9 +433,13 @@ This can be useful in situations where you need to keep track of 2 different sta ### State +
+ Type declaration + ```ts type State = object | null; ``` +
A [`State`](https://github.com/ReactTraining/history/blob/0f992736/packages/history/index.ts#L61) value is an object of extra information that is associated with a [`Location`](#location) but that does not appear in the URL. This value is always associated with that location. @@ -412,6 +449,9 @@ See [the Navigation guide](navigation.md) for more information. ### To +
+ Type declaration + ```ts type To = string | PartialPath; @@ -421,6 +461,7 @@ interface PartialPath { hash?: string; } ``` +
A [`To`](https://github.com/ReactTraining/history/blob/0f992736/packages/history/index.ts#L212) value represents a destination location, but doesn't contain all the information that a normal [`location`](#location) object does. It is primarily used as the first argument to [`history.push`](#history.push) and [`history.replace`](#history.replace).