Repository: TanStack/router
Pull request #1940 (2024-07-10 18:53:16)

fix: correct typing for `Route.useNavigate`

nx-cloud[bot]: # ☁️ Nx Cloud Report

CI is running for commit fc73ad8ecae2f7efc3dee734d9ccc8dee5544da5.

[📂 Click to track the progress, see the status, the terminal output, and the build insights.](https://cloud.nx.app/cipes/668ed8b683d7c4394bbb8e3b?utm_source=pull-request&utm_medium=comment)


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)
pkg-pr-new[bot]: 
<a href="https:///pr.new/TanStack/router/pull/1940"><img src="https://developer.stackblitz.com/img/review_pr_small.svg" alt="Review PR in StackBlitz Codeflow" align="left" width="103" height="20"></a> _Run & review this pull request in [StackBlitz Codeflow](https:///pr.new/TanStack/router/pull/1940)._

_commit: <a href="https://github.com/TanStack/router/runs/27287068584"><code>fc73ad8</code></a>_


<details><summary><b>@tanstack/history</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/history@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/react-cross-context</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/react-cross-context@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/react-router@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router-with-query</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/react-router-with-query@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/router-cli</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/router-cli@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/router-devtools</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/router-devtools@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/router-generator</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/router-generator@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/router-plugin</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/router-plugin@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/router-vite-plugin</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/start</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/start@1940
```

</p></details>
      
    

<details><summary><b>@tanstack/start-vite-plugin</b></summary><p>

```
npm i https://pkg.pr.new/@tanstack/start-vite-plugin@1940
```

</p></details>
      
    

---


<details><summary><b>templates</b></summary><p>

- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/d5f49791-d1ac-4129-9ff2-bbefbbf8812a)
- [tanstack-router-react-example-basic](https://pkg.pr.new/template/7f83c289-de81-4a93-8c52-d05ad4f03d9b)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/63ce288e-2416-4fd1-a155-2f79b50fa8a2)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/14766dcb-50da-4ea7-bc79-a14456841a80)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/c9ef4df2-6f85-4229-b0d2-16944cf6c958)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/591c0c16-a3af-4b88-b204-d16878034868)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/1cd05015-d9e3-4450-be48-e75f8db779ed)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/3639c2b9-8879-48ad-9d49-5b6742e30567)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/96b949a9-0505-49cd-b1eb-67bb83d637f2)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/0b4eb63c-f332-4116-97c8-0f61f4715f09)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/98c15526-e894-476a-95ff-7c076534ca5e)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/062cb76c-88c1-4f8e-afd9-dba252d89b1a)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/284fc0e2-b371-40d0-8fe5-696c940662bf)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/8f1c3036-29e3-4d0e-8342-d0e273386fad)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/8485c956-a27f-4c4b-918a-baec7d55156c)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/aa5ff0a4-38d1-4a64-b598-8bb446543d7a)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/1b8eaa0d-1cda-4aeb-8837-22e85abf1f72)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/42eeb46e-1a5e-4e74-949f-74b688b6f18c)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/f0e9934d-04b7-4b79-84a3-397aee0c3ccd)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/b8985b87-e42c-4ced-8bdf-612e3bea4c1b)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/c9cff56f-4273-4a6e-bddf-493b45fec0fc)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/8e1b03af-db77-479b-ae53-f7d644440ad6)
- [tanstack-router-example-react-start-basic](https://pkg.pr.new/template/f68849bb-c0aa-412d-92f0-5f7bb8b49a22)
- [tanstack-router-example-react-start-basic-counter](https://pkg.pr.new/template/e684df6a-1f5e-4232-a132-6987cdd93f13)
- [tanstack-router-example-react-start-basic-react-query](https://pkg.pr.new/template/d6d326e5-06ce-4695-b579-2d8575e8d604)
- [tanstack-router-example-react-start-basic-rsc](https://pkg.pr.new/template/f13b5b23-aa24-42db-8bc0-08816ec8a556)
- [tanstack-router-example-react-start-basic-trellaux](https://pkg.pr.new/template/dc0e8e48-e658-4342-8bd9-cb78fb1ac566)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/4742df9e-8f2f-4bee-9b9d-f9f1342db0cc)
- [tanstack-router-react-example-waku-rsc](https://pkg.pr.new/template/93e5672d-ff8b-4a6c-a8ee-601c5fb2d155)
- [tanstack-router-react-example-with-bling](https://pkg.pr.new/template/a89724aa-0a73-4cf3-8d0d-3a41ca2f6e23)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/af9e8c71-9670-4a15-8e9c-559db7e2d530)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/6bb5375e-5903-4e7f-8da3-2a4f7423448b)

</p></details>
      
    


Patch:
diff --git a/packages/react-router/src/route.ts b/packages/react-router/src/route.ts
index 3148ec7c3..784e28cfa 100644
--- a/packages/react-router/src/route.ts
+++ b/packages/react-router/src/route.ts
@@ -890,7 +890,7 @@ export class Route<
     return useLoaderData({ ...opts, from: this.id } as any)
   }
 
-  useNavigate = (): UseNavigateResult<string> => {
+  useNavigate = (): UseNavigateResult<TFullPath> => {
     return useNavigate({ from: this.id })
   }
 }


Test patch:
diff --git a/packages/react-router/tests/createRouteApi.test-d.tsx b/packages/react-router/tests/routeApi.test-d.tsx
similarity index 67%
rename from packages/react-router/tests/createRouteApi.test-d.tsx
rename to packages/react-router/tests/routeApi.test-d.tsx
index a13339c2a..927cd6a53 100644
--- a/packages/react-router/tests/createRouteApi.test-d.tsx
+++ b/packages/react-router/tests/routeApi.test-d.tsx
@@ -36,17 +36,31 @@ const defaultRouter = createRouter({
 
 type DefaultRouter = typeof defaultRouter
 
-describe('createRouteApi', () => {
+type ExtractDefaultFrom<T> =
+  T extends UseNavigateResult<infer DefaultFrom> ? DefaultFrom : never
+
+describe('getRouteApi', () => {
   const invoiceRouteApi = getRouteApi<'/invoices/$invoiceId', DefaultRouter>(
     '/invoices/$invoiceId',
   )
   describe('useNavigate', () => {
     test('has a static `from`', () => {
       const navigate = invoiceRouteApi.useNavigate()
+      navigate
+      expectTypeOf<
+        ExtractDefaultFrom<typeof navigate>
+      >().toEqualTypeOf<'/invoices/$invoiceId'>()
+    })
+  })
+})
 
-      expectTypeOf(navigate).toEqualTypeOf<
-        UseNavigateResult<'/invoices/$invoiceId'>
-      >()
+describe('createRoute', () => {
+  describe('useNavigate', () => {
+    test('has a static `from`', () => {
+      const navigate = invoiceRoute.useNavigate()
+      expectTypeOf<
+        ExtractDefaultFrom<typeof navigate>
+      >().toEqualTypeOf<'/invoices/$invoiceId'>()
     })
   })
 })