@@ -135,3 +135,40 @@ For example, if you have a tab interface connected to search params in the
135135middle of a page, and you don't want it to scroll to the top when a tab is
136136clicked.
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