Skip to content

Commit 5d02bf2

Browse files
remix-run-botjoseph0926
authored andcommitted
chore: generate markdown docs from jsdocs
1 parent c7e08e6 commit 5d02bf2

File tree

1 file changed

+37
-0
lines changed

1 file changed

+37
-0
lines changed

docs/api/hooks/useNavigate.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,40 @@ For example, if you have a tab interface connected to search params in the
135135
middle of a page, and you don't want it to scroll to the top when a tab is
136136
clicked.
137137
138+
### Return Type Augmentation
139+
140+
Internally, `useNavigate` uses a separate implementation when you are in
141+
Declarative mode versus Data/Framework mode - the primary difference being
142+
that the latter is able to return a stable reference that does not change
143+
identity across navigations. The implementation in Data/Framework mode also
144+
returns a `Promise` that resolves when the navigation is completed. This means
145+
the return type of `useNavigate` is `void | Promise<void>`. This is accurate,
146+
but can lead to some red squigglies based on the union in the return value:
147+
148+
- If you're using `typescript-eslint`, you may see errors from
149+
[`@typescript-eslint/no-floating-promises`](https://typescript-eslint.io/rules/no-floating-promises/)
150+
- In Framework/Data mode, `React.use(navigate())` will show a false-positive
151+
`Argument of type 'void | Promise<void>' is not assignable to parameter of
152+
type 'Usable<void>'` error
153+
154+
The easiest way to work around these issues is to augment the type based on the
155+
router you're using:
156+
157+
```ts
158+
// If using <BrowserRouter>
159+
declare module "react-router" {
160+
interface NavigateFunction {
161+
(to: To, options?: NavigateOptions): void;
162+
(delta: number): void;
163+
}
164+
}
165+
166+
// If using <RouterProvider> or Framework mode
167+
declare module "react-router" {
168+
interface NavigateFunction {
169+
(to: To, options?: NavigateOptions): Promise<void>;
170+
(delta: number): Promise<void>;
171+
}
172+
}
173+
```
174+

0 commit comments

Comments
 (0)