Repository: TanStack/router
Pull request #2017 (2024-07-24 17:31:43)

Warn against DOM-rendering elements in Wrap and InnerWrap

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

CI is running for commit 194d665f2b3dda6c08b2bde5b7bc71e2fa790a31.

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


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)
thomasballinger: Is this correct? I'm not sure if this belongs here since I see these hydration errors in Start.
pkg-pr-new[bot]: 
<a href="https:///pr.new/TanStack/router/pull/2017"><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/2017)._

_commit: <a href="https://github.com/TanStack/router/runs/27873107665"><code>194d665</code></a>_


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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

---


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

- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/089f5800-abce-458d-8fa2-7c0ddc22e2e1)
- [tanstack-router-react-example-basic](https://pkg.pr.new/template/c69f8d2e-91d5-48ed-bf58-da3e3a8eb58d)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/f890e521-a589-4f85-8bc5-d875a6dafdff)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/4b5f9c13-98a8-4f8c-ac2b-7da0bb18e231)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/ee7b399a-e0e1-4f85-a152-f28f046118d0)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/5aa7be8c-31f9-4ae5-90b0-10478267a24a)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/35987690-f6af-4f13-8adb-76bdbaa669a6)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/7b2e4b20-aa04-47bb-b3e8-2bb5e3a72f95)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/0edac67a-e46d-4844-94fa-48ea906905a5)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/9c8eeba3-eb3f-4ba8-b20d-60b0aa890b3d)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/68d7d854-f99d-468f-b79b-68b3025c0662)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/be356413-bd50-45c8-8c2e-9d7c2545a034)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/d5f69602-135f-4284-8707-2606b2cead06)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/dc0d950c-4d03-4684-bcc3-f3d9199e9260)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/7d46eec2-1ccc-4b7e-9974-18e0d0ffa558)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/05c1ff20-857e-465c-bac1-5481d66081a7)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/395e1712-614e-45a1-91bf-3f7972161e12)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/2e661281-0f92-4d6a-825d-d3403a5929ac)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/abdf6995-1431-498c-af40-52d0f4611fbd)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/c9cce2ce-6677-4b86-b23e-4de97272af56)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/bc2c5d57-4fd0-4642-9f8a-f77864c2e937)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/69b5b511-31d3-4f5e-b628-9783cbe4c735)
- [tanstack-router-example-react-start-basic](https://pkg.pr.new/template/96761724-23e3-4045-9f8c-bb2b5a71fdb4)
- [tanstack-router-example-react-start-basic-counter](https://pkg.pr.new/template/2b066f96-0239-4c06-8ee9-d5990b04ea43)
- [tanstack-router-example-react-start-basic-react-query](https://pkg.pr.new/template/02e3c16b-5050-4d74-a8da-4aef7b070b15)
- [tanstack-router-example-react-start-basic-rsc](https://pkg.pr.new/template/b9b24fc8-eee1-4f4c-bca6-263154e10f6f)
- [tanstack-router-example-react-start-basic-trellaux](https://pkg.pr.new/template/cb62295d-c113-4f4a-9951-9bbd33cce0e1)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/7cd50138-2c44-47fb-aa41-fdb33cacc680)
- [tanstack-router-react-example-waku-rsc](https://pkg.pr.new/template/e8174ca8-4211-4fb8-8ac0-c722bc99ba9d)
- [tanstack-router-react-example-with-bling](https://pkg.pr.new/template/d8903642-e475-4704-a5de-6c6c5318022f)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/5455cd7f-a227-4c85-96c3-2ff8f6bb0649)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/577bf8bb-8c88-40d3-99a4-e02519a806ac)

</p></details>
      
    


Patch:
diff --git a/docs/framework/react/api/router/RouterOptionsType.md b/docs/framework/react/api/router/RouterOptionsType.md
index 28eb6849d..ebeee74eb 100644
--- a/docs/framework/react/api/router/RouterOptionsType.md
+++ b/docs/framework/react/api/router/RouterOptionsType.md
@@ -174,9 +174,8 @@ The `RouterOptions` type accepts an object with the following properties and met
 
 - Type: `React.Component`
 - Optional
-- A component that will be used to wrap the entire router. This is useful for providing a context to the entire router.
-
-**Example**
+- A component that will be used to wrap the entire router. This is useful for providing a context to the entire router. Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
+  **Example**
 
 ```tsx
 import { createRouter } from '@tanstack/react-router'
@@ -193,7 +192,7 @@ const router = createRouter({
 
 - Type: `React.Component`
 - Optional
-- A component that will be used to wrap the inner contents of the router. This is useful for providing a context to the inner contents of the router where you also need access to the router context and hooks.
+- A component that will be used to wrap the inner contents of the router. This is useful for providing a context to the inner contents of the router where you also need access to the router context and hooks. Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
 
 **Example**
 
diff --git a/examples/react/authenticated-routes/package.json b/examples/react/authenticated-routes/package.json
index 588f1640f..0270665e8 100644
--- a/examples/react/authenticated-routes/package.json
+++ b/examples/react/authenticated-routes/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/basic-default-search-params/package.json b/examples/react/basic-default-search-params/package.json
index c222edf97..492493098 100644
--- a/examples/react/basic-default-search-params/package.json
+++ b/examples/react/basic-default-search-params/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-file-based-codesplitting/package.json b/examples/react/basic-file-based-codesplitting/package.json
index eaca51109..9781c0f5d 100644
--- a/examples/react/basic-file-based-codesplitting/package.json
+++ b/examples/react/basic-file-based-codesplitting/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/basic-file-based/package.json b/examples/react/basic-file-based/package.json
index f30da3100..b2def3146 100644
--- a/examples/react/basic-file-based/package.json
+++ b/examples/react/basic-file-based/package.json
@@ -10,8 +10,8 @@
     "test:e2e": "playwright test --project=chromium"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/basic-react-query-file-based/package.json b/examples/react/basic-react-query-file-based/package.json
index eab3509d5..3276e25ba 100644
--- a/examples/react/basic-react-query-file-based/package.json
+++ b/examples/react/basic-react-query-file-based/package.json
@@ -12,8 +12,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/basic-react-query/package.json b/examples/react/basic-react-query/package.json
index 1d480878e..538d687c8 100644
--- a/examples/react/basic-react-query/package.json
+++ b/examples/react/basic-react-query/package.json
@@ -12,8 +12,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"
diff --git a/examples/react/basic-ssr-file-based/package.json b/examples/react/basic-ssr-file-based/package.json
index a4f03b1b5..225b7d335 100644
--- a/examples/react/basic-ssr-file-based/package.json
+++ b/examples/react/basic-ssr-file-based/package.json
@@ -11,10 +11,10 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/start": "^1.45.10",
     "get-port": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-ssr-streaming-file-based/package.json b/examples/react/basic-ssr-streaming-file-based/package.json
index 52bd7ea7c..e8e13db06 100644
--- a/examples/react/basic-ssr-streaming-file-based/package.json
+++ b/examples/react/basic-ssr-streaming-file-based/package.json
@@ -11,10 +11,10 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/start": "^1.45.10",
     "get-port": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index 47451e796..804ba53db 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"
diff --git a/examples/react/deferred-data/package.json b/examples/react/deferred-data/package.json
index e6bd5b3e3..32c3b85a9 100644
--- a/examples/react/deferred-data/package.json
+++ b/examples/react/deferred-data/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/kitchen-sink-file-based/package.json b/examples/react/kitchen-sink-file-based/package.json
index 9576f1066..744686555 100644
--- a/examples/react/kitchen-sink-file-based/package.json
+++ b/examples/react/kitchen-sink-file-based/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/kitchen-sink-react-query-file-based/package.json b/examples/react/kitchen-sink-react-query-file-based/package.json
index 948395221..d569c8f62 100644
--- a/examples/react/kitchen-sink-react-query-file-based/package.json
+++ b/examples/react/kitchen-sink-react-query-file-based/package.json
@@ -11,8 +11,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/kitchen-sink-react-query/package.json b/examples/react/kitchen-sink-react-query/package.json
index 7ba02eed4..4af0dddb6 100644
--- a/examples/react/kitchen-sink-react-query/package.json
+++ b/examples/react/kitchen-sink-react-query/package.json
@@ -11,8 +11,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/kitchen-sink/package.json b/examples/react/kitchen-sink/package.json
index 033e35897..a3deafbb4 100644
--- a/examples/react/kitchen-sink/package.json
+++ b/examples/react/kitchen-sink/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/large-file-based/package.json b/examples/react/large-file-based/package.json
index 438cdb0cf..d8417a277 100644
--- a/examples/react/large-file-based/package.json
+++ b/examples/react/large-file-based/package.json
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/location-masking/package.json b/examples/react/location-masking/package.json
index 43d5ba004..9ed7cdde8 100644
--- a/examples/react/location-masking/package.json
+++ b/examples/react/location-masking/package.json
@@ -11,8 +11,8 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.1",
     "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/examples/react/navigation-blocking/package.json b/examples/react/navigation-blocking/package.json
index 5056f0a24..1eb89d075 100644
--- a/examples/react/navigation-blocking/package.json
+++ b/examples/react/navigation-blocking/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/examples/react/quickstart-file-based/package.json b/examples/react/quickstart-file-based/package.json
index 1bbf2a55b..1e962f9b1 100644
--- a/examples/react/quickstart-file-based/package.json
+++ b/examples/react/quickstart-file-based/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
     "immer": "^10.1.1",
     "react": "^18.2.0",
diff --git a/examples/react/quickstart-rspack-file-based/package.json b/examples/react/quickstart-rspack-file-based/package.json
index 27e6a8e7d..d7b5af90b 100644
--- a/examples/react/quickstart-rspack-file-based/package.json
+++ b/examples/react/quickstart-rspack-file-based/package.json
@@ -8,8 +8,8 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/examples/react/quickstart-webpack-file-based/package.json b/examples/react/quickstart-webpack-file-based/package.json
index 03a7519c0..0c656df28 100644
--- a/examples/react/quickstart-webpack-file-based/package.json
+++ b/examples/react/quickstart-webpack-file-based/package.json
@@ -7,8 +7,8 @@
     "build": "webpack build"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/examples/react/quickstart/package.json b/examples/react/quickstart/package.json
index feecc7b45..e0c50bd38 100644
--- a/examples/react/quickstart/package.json
+++ b/examples/react/quickstart/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/examples/react/scroll-restoration/package.json b/examples/react/scroll-restoration/package.json
index 0905a27ae..e57ee9e7f 100644
--- a/examples/react/scroll-restoration/package.json
+++ b/examples/react/scroll-restoration/package.json
@@ -9,9 +9,9 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
     "@tanstack/react-virtual": "^3.8.3",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/router-devtools": "^1.45.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/examples/react/start-basic-counter/package.json b/examples/react/start-basic-counter/package.json
index d2afe9fd2..66278e7e2 100644
--- a/examples/react/start-basic-counter/package.json
+++ b/examples/react/start-basic-counter/package.json
@@ -11,8 +11,8 @@
     "format": "prettier --write '**/*' --ignore-unknown"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/start": "^1.45.10",
     "@typescript-eslint/parser": "^7.16.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/examples/react/start-basic-react-query/package.json b/examples/react/start-basic-react-query/package.json
index 3772bd868..0efeb8501 100644
--- a/examples/react/start-basic-react-query/package.json
+++ b/examples/react/start-basic-react-query/package.json
@@ -14,11 +14,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
     "@tanstack/react-router-with-query": "^1.43.2",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/start": "^1.45.10",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
     "isbot": "^5.1.13",
diff --git a/examples/react/start-basic-rsc/package.json b/examples/react/start-basic-rsc/package.json
index d5f4120d5..f018038d6 100644
--- a/examples/react/start-basic-rsc/package.json
+++ b/examples/react/start-basic-rsc/package.json
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@babel/plugin-syntax-typescript": "^7.24.7",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/start": "^1.45.10",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.4.0",
     "vinxi": "0.3.12"
diff --git a/examples/react/start-basic/package.json b/examples/react/start-basic/package.json
index 67a40d985..e01ec7faa 100644
--- a/examples/react/start-basic/package.json
+++ b/examples/react/start-basic/package.json
@@ -12,10 +12,10 @@
     "test:e2e": "playwright test --project=chromium"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/start": "^1.45.10",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
     "isbot": "^5.1.13",
diff --git a/examples/react/start-trellaux/package.json b/examples/react/start-trellaux/package.json
index 491add620..07c659399 100644
--- a/examples/react/start-trellaux/package.json
+++ b/examples/react/start-trellaux/package.json
@@ -13,11 +13,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@tanstack/react-router": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
     "@tanstack/react-router-with-query": "^1.43.2",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/router-devtools": "^1.45.10",
     "@tanstack/router-plugin": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/start": "^1.45.10",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
     "isbot": "^5.1.13",
diff --git a/examples/react/wip-trpc-react-query/package.json b/examples/react/wip-trpc-react-query/package.json
index d6be8cb05..f0958a6c8 100644
--- a/examples/react/wip-trpc-react-query/package.json
+++ b/examples/react/wip-trpc-react-query/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "@trpc/server": "^10.45.2",
diff --git a/examples/react/wip-waku-rsc/package.json b/examples/react/wip-waku-rsc/package.json
index b729e33e3..5bbd785bf 100644
--- a/examples/react/wip-waku-rsc/package.json
+++ b/examples/react/wip-waku-rsc/package.json
@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@hono/node-server": "^1.12.0",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "hono": "^4.5.1",
     "react": "18.3.0-canary-0cdfef19b-20231211",
     "react-dom": "18.3.0-canary-0cdfef19b-20231211",
diff --git a/examples/react/wip-with-bling/package.json b/examples/react/wip-with-bling/package.json
index c7d3b644f..e0a0d0c61 100644
--- a/examples/react/wip-with-bling/package.json
+++ b/examples/react/wip-with-bling/package.json
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@tanstack/bling": "^0.5.0",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/start": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/start": "^1.45.10",
     "@tanstack/react-store": "^0.5.5",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "fastify": "^4.28.1",
     "get-port": "^7.1.0",
diff --git a/examples/react/wip-with-framer-motion/package.json b/examples/react/wip-with-framer-motion/package.json
index 3ac28a798..999db5ca6 100644
--- a/examples/react/wip-with-framer-motion/package.json
+++ b/examples/react/wip-with-framer-motion/package.json
@@ -9,8 +9,8 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "redaxios": "^0.5.1",
     "framer-motion": "^11.3.8",
     "immer": "^10.1.1",
diff --git a/examples/react/with-trpc/package.json b/examples/react/with-trpc/package.json
index 4a4dff0b2..0981555a0 100644
--- a/examples/react/with-trpc/package.json
+++ b/examples/react/with-trpc/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
-    "@tanstack/react-router": "^1.45.8",
-    "@tanstack/router-devtools": "^1.45.8",
+    "@tanstack/react-router": "^1.45.10",
+    "@tanstack/router-devtools": "^1.45.10",
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "@trpc/server": "^10.45.2",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index c93f350af..ff8146b00 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.45.8",
+  "version": "1.45.10",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/react-router/src/path.ts b/packages/react-router/src/path.ts
index c2ed2978e..cd936ce2b 100644
--- a/packages/react-router/src/path.ts
+++ b/packages/react-router/src/path.ts
@@ -89,8 +89,8 @@ export function resolvePath({
   to,
   trailingSlash = 'never',
 }: ResolvePathOptions) {
-  base = base.replace(new RegExp(`^${basepath}`), '/')
-  to = to.replace(new RegExp(`^${basepath}`), '/')
+  base = removeBasepath(basepath, base)
+  to = removeBasepath(basepath, to)
 
   let baseSegments = parsePathname(base)
   const toSegments = parsePathname(to)
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 })
   }
 }
diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
index c297f9739..f26cbedc4 100644
--- a/packages/react-router/src/router.ts
+++ b/packages/react-router/src/router.ts
@@ -323,12 +323,14 @@ export interface RouterOptions<
   /**
    * A component that will be used to wrap the entire router.
    * This is useful for providing a context to the entire router.
+   * Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#wrap-property)
    */
   Wrap?: (props: { children: any }) => React.JSX.Element
   /**
    * A component that will be used to wrap the inner contents of the router.
    * This is useful for providing a context to the inner contents of the router where you also need access to the router context and hooks.
+   * Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#innerwrap-property)
    */
   InnerWrap?: (props: { children: any }) => React.JSX.Element
diff --git a/packages/router-devtools/package.json b/packages/router-devtools/package.json
index 64fa404b3..e2ba3858f 100644
--- a/packages/router-devtools/package.json
+++ b/packages/router-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools",
-  "version": "1.45.8",
+  "version": "1.45.10",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/start/package.json b/packages/start/package.json
index 9fe599343..2e6d4ea36 100644
--- a/packages/start/package.json
+++ b/packages/start/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/start",
-  "version": "1.45.8",
+  "version": "1.45.10",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",


Test patch:
diff --git a/packages/react-router/tests/index.test.tsx b/packages/react-router/tests/index.test.tsx
index 5fcdf9563..efc6ccd75 100644
--- a/packages/react-router/tests/index.test.tsx
+++ b/packages/react-router/tests/index.test.tsx
@@ -654,110 +654,3 @@ describe('ssr redirects', () => {
     })
   })
 })
-
-describe('resolvePath', () => {
-  ;(
-    [
-      ['/', '/', '/', '/'],
-      ['/', '/', '/a', '/a'],
-      ['/', '/', 'a/', '/a'],
-      ['/', '/', '/a/b', '/a/b'],
-      ['/', 'a', 'b', '/a/b'],
-      ['/a/b', 'c', '/a/b/c', '/a/b/c'],
-      ['/a/b', '/', 'c', '/a/b/c'],
-      ['/a/b', '/', './c', '/a/b/c'],
-      ['/', '/', 'a/b', '/a/b'],
-      ['/', '/', './a/b', '/a/b'],
-      ['/', '/a/b/c', 'd', '/a/b/c/d'],
-      ['/', '/a/b/c', './d', '/a/b/c/d'],
-      ['/', '/a/b/c', './../d', '/a/b/d'],
-      ['/', '/a/b/c/d', './../d', '/a/b/c/d'],
-      ['/', '/a/b/c', '../d', '/a/b/d'],
-      ['/', '/a/b/c', '../../d', '/a/d'],
-      ['/', '/a/b/c', '..', '/a/b'],
-      ['/', '/a/b/c', '../..', '/a'],
-      ['/', '/a/b/c', '../../..', '/'],
-      ['/', '/a/b/c/', '../../..', '/'],
-    ] as const
-  ).forEach(([base, a, b, eq]) => {
-    test(`Base: ${base} - ${a} to ${b} === ${eq}`, () => {
-      expect(resolvePath({ basepath: base, base: a, to: b })).toEqual(eq)
-    })
-    test(`Base: ${base} - ${a}/ to ${b} === ${eq} (trailing slash)`, () => {
-      expect(resolvePath({ basepath: base, base: a + '/', to: b })).toEqual(eq)
-    })
-    test(`Base: ${base} - ${a}/ to ${b}/ === ${eq} (trailing slash + trailing slash)`, () => {
-      expect(
-        resolvePath({ basepath: base, base: a + '/', to: b + '/' }),
-      ).toEqual(eq)
-    })
-  })
-  describe('trailingSlash', () => {
-    describe(`'always'`, () => {
-      test('keeps trailing slash', () => {
-        expect(
-          resolvePath({
-            basepath: '/',
-            base: '/a/b/c',
-            to: 'd/',
-            trailingSlash: 'always',
-          }),
-        ).toBe('/a/b/c/d/')
-      })
-      test('adds trailing slash', () => {
-        expect(
-          resolvePath({
-            basepath: '/',
-            base: '/a/b/c',
-            to: 'd',
-            trailingSlash: 'always',
-          }),
-        ).toBe('/a/b/c/d/')
-      })
-    })
-    describe(`'never'`, () => {
-      test('removes trailing slash', () => {
-        expect(
-          resolvePath({
-            basepath: '/',
-            base: '/a/b/c',
-            to: 'd/',
-            trailingSlash: 'never',
-          }),
-        ).toBe('/a/b/c/d')
-      })
-      test('does not add trailing slash', () => {
-        expect(
-          resolvePath({
-            basepath: '/',
-            base: '/a/b/c',
-            to: 'd',
-            trailingSlash: 'never',
-          }),
-        ).toBe('/a/b/c/d')
-      })
-    })
-    describe(`'preserve'`, () => {
-      test('keeps trailing slash', () => {
-        expect(
-          resolvePath({
-            basepath: '/',
-            base: '/a/b/c',
-            to: 'd/',
-            trailingSlash: 'preserve',
-          }),
-        ).toBe('/a/b/c/d/')
-      })
-      test('does not add trailing slash', () => {
-        expect(
-          resolvePath({
-            basepath: '/',
-            base: '/a/b/c',
-            to: 'd',
-            trailingSlash: 'preserve',
-          }),
-        ).toBe('/a/b/c/d')
-      })
-    })
-  })
-})
diff --git a/packages/react-router/tests/path.test.ts b/packages/react-router/tests/path.test.ts
index 9f587606d..d018a4a2d 100644
--- a/packages/react-router/tests/path.test.ts
+++ b/packages/react-router/tests/path.test.ts
@@ -1,5 +1,12 @@
+import exp from 'node:constants'
 import { describe, expect, it } from 'vitest'
-import { exactPathTest, removeBasepath, removeTrailingSlash } from '../src/path'
+import {
+  exactPathTest,
+  matchByPath,
+  removeBasepath,
+  removeTrailingSlash,
+  resolvePath,
+} from '../src/path'
 
 describe('removeBasepath', () => {
   it.each([
@@ -112,3 +119,109 @@ describe.each([{ basepath: '/' }, { basepath: '/app' }, { basepath: '/app/' }])(
     })
   },
 )
+
+describe('resolvePath', () => {
+  describe.each([
+    ['/', '/', '/', '/'],
+    ['/', '/', '/a', '/a'],
+    ['/', '/', 'a/', '/a'],
+    ['/', '/', '/a/b', '/a/b'],
+    ['/', 'a', 'b', '/a/b'],
+    ['/a/b', 'c', '/a/b/c', '/a/b/c'],
+    ['/a/b', '/', 'c', '/a/b/c'],
+    ['/a/b', '/', './c', '/a/b/c'],
+    ['/', '/', 'a/b', '/a/b'],
+    ['/', '/', './a/b', '/a/b'],
+    ['/', '/a/b/c', 'd', '/a/b/c/d'],
+    ['/', '/a/b/c', './d', '/a/b/c/d'],
+    ['/', '/a/b/c', './../d', '/a/b/d'],
+    ['/', '/a/b/c/d', './../d', '/a/b/c/d'],
+    ['/', '/a/b/c', '../d', '/a/b/d'],
+    ['/', '/a/b/c', '../../d', '/a/d'],
+    ['/', '/a/b/c', '..', '/a/b'],
+    ['/', '/a/b/c', '../..', '/a'],
+    ['/', '/a/b/c', '../../..', '/'],
+    ['/', '/a/b/c/', '../../..', '/'],
+    ['/products', '/', '/products-list', '/products/products-list'],
+  ])('resolves correctly', (base, a, b, eq) => {
+    it(`Base: ${base} - ${a} to ${b} === ${eq}`, () => {
+      expect(resolvePath({ basepath: base, base: a, to: b })).toEqual(eq)
+    })
+    it(`Base: ${base} - ${a}/ to ${b} === ${eq} (trailing slash)`, () => {
+      expect(resolvePath({ basepath: base, base: a + '/', to: b })).toEqual(eq)
+    })
+    it(`Base: ${base} - ${a}/ to ${b}/ === ${eq} (trailing slash + trailing slash)`, () => {
+      expect(
+        resolvePath({ basepath: base, base: a + '/', to: b + '/' }),
+      ).toEqual(eq)
+    })
+  })
+  describe('trailingSlash', () => {
+    describe(`'always'`, () => {
+      it('keeps trailing slash', () => {
+        expect(
+          resolvePath({
+            basepath: '/',
+            base: '/a/b/c',
+            to: 'd/',
+            trailingSlash: 'always',
+          }),
+        ).toBe('/a/b/c/d/')
+      })
+      it('adds trailing slash', () => {
+        expect(
+          resolvePath({
+            basepath: '/',
+            base: '/a/b/c',
+            to: 'd',
+            trailingSlash: 'always',
+          }),
+        ).toBe('/a/b/c/d/')
+      })
+    })
+    describe(`'never'`, () => {
+      it('removes trailing slash', () => {
+        expect(
+          resolvePath({
+            basepath: '/',
+            base: '/a/b/c',
+            to: 'd/',
+            trailingSlash: 'never',
+          }),
+        ).toBe('/a/b/c/d')
+      })
+      it('does not add trailing slash', () => {
+        expect(
+          resolvePath({
+            basepath: '/',
+            base: '/a/b/c',
+            to: 'd',
+            trailingSlash: 'never',
+          }),
+        ).toBe('/a/b/c/d')
+      })
+    })
+    describe(`'preserve'`, () => {
+      it('keeps trailing slash', () => {
+        expect(
+          resolvePath({
+            basepath: '/',
+            base: '/a/b/c',
+            to: 'd/',
+            trailingSlash: 'preserve',
+          }),
+        ).toBe('/a/b/c/d/')
+      })
+      it('does not add trailing slash', () => {
+        expect(
+          resolvePath({
+            basepath: '/',
+            base: '/a/b/c',
+            to: 'd',
+            trailingSlash: 'preserve',
+          }),
+        ).toBe('/a/b/c/d')
+      })
+    })
+  })
+})
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'>()
     })
   })
 })