Repository: TanStack/router
Pull request #1822 (2024-06-24 13:42:10)

fix(react-router): `ResolvedSuspense` to always use `React.Suspense` never the `SafeFragment`
If you create any hook that relies on a tanstack router hook - it becomes hard to test since the rerender recreates the elements again, I traced it down to this part in matches.tsx 
`  const ResolvedSuspense = !router.state.matches.length
    ? React.Suspense
    : SafeFragment
`
It makes state changes with only the React.Suspense it works, dont really know if its intended or not? if so please explain how we could get around it for testing.

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

CI is running for commit c89eda91951a1e9ee8ef570c4a665b8271b04188.

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


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)
SeanCassiere: 🚨 Tested this out locally using the `kitchen-sink-file-based` example.

This change breaks that example where, when on`/dashboard`, you click "Invoices" and navigate to `/dashboard/invoices`, and then try clicking on "Users" to navigate to `/dashboard/users`, the navigation never resolves.
mta-trackunit: So navigating from http://localhost:5173/dashboard/invoices
to http://localhost:5173/dashboard/users
It navigates to 
http://localhost:5173/dashboard/invoices?usersView=%7B%7D 

So it seems like tanstack router is behind 1 "tick" ... any idea how to debug that? 

In examples/react/kitchen-sink-file-based/src/routes/dashboard.users.tsx 
```ts 

  React.useEffect(() => {
    navigate({
      search: (old) => {
        return {
          ...old,
          usersView: {
            ...old?.usersView,
            filterBy: filterDraft || undefined,
          },
        }
      },
      replace: true,
    })
  }, [filterDraft])
  ```
  
That seems to navigate - so it feels like tanstack router is behind and redirects 
mta-trackunit: I gave up on fixing the this.state.resolvedLocation - I just added the "to" in the useEffect that fires on first render of the page. Without the "to" it will navigate back because this.state.resolvedLocation is still the "old" value - that is clearly a bug - but this is the workaround. 
mta-trackunit: @SeanCassiere The bug you found is also on main branch right now... I even hit it in our production site... adding "to": will fix it ... but it seems unrelated to this PR then... do you want me to revert the "to" fix ? or do we want this to be fixed on main this way
SeanCassiere: @mta-trackunit FYI, I'm currently holding this ATM till #1907 goes through.
SeanCassiere: The issues with the kitchen sink example should be resolved with #1968 
pkg-pr-new[bot]: 
<a href="https:///pr.new/TanStack/router/pull/1822"><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/1822)._

_commit: <a href="https://github.com/TanStack/router/runs/27548799496"><code>26d6f6d</code></a>_


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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

---


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

- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/8bea941e-57fd-4680-ac04-7737c4f898a6)
- [tanstack-router-react-example-basic](https://pkg.pr.new/template/59ed2747-f62e-429d-b41b-4fd8e6f3f7a9)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/fcca408b-2be1-460f-81f7-9ae3cc3280aa)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/ab9adcbe-5f00-44ca-aeaa-b4dd9302817f)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/3f556fbc-e127-4407-9e6a-a8e5e4e52b55)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/b339649a-1d64-4b83-97e4-cc04d919450b)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/502cd175-8aa0-442b-91ef-f98693fa6df9)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/96b70982-d66f-405f-9ef5-ac6823c05550)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/56454048-5396-422c-aaa7-ae54dcdc09d1)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/70402d7d-0c14-4bf9-99b0-9f829cad8166)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/3f75d31c-0e1e-449e-bff7-472f0d858cf3)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/578c617f-5413-4832-8f9c-835f3956c3df)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/8f89cb94-0178-40d7-aa00-8852d0022653)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/27088b2f-948f-4555-b849-eaa7eee0fed1)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/91bdd59d-480c-4326-a2f8-d3b555b47406)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/3b11c98e-275c-48f1-be0b-39bb960af436)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/baf781a4-6f84-46b0-a470-ec0012c730d0)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/69411c47-4e57-4ab3-bb69-4296b2285dfb)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/f35c29a5-9e58-4ece-b732-fad904d55c27)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/4f1eec29-d835-4bf6-85ee-7269be2913fa)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/fe0d508a-247c-4aa9-9e3b-53a33b5e13f3)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/160e684f-1c71-4b49-acda-4c8a44eb4fb2)
- [tanstack-router-example-react-start-basic](https://pkg.pr.new/template/bc913624-e146-4b8f-a364-d7c7c33d158b)
- [tanstack-router-example-react-start-basic-counter](https://pkg.pr.new/template/15ee8235-6064-42ac-a8bb-7b8ca88f6a6e)
- [tanstack-router-example-react-start-basic-react-query](https://pkg.pr.new/template/0777a692-94ad-4387-9b5d-8e47994422b3)
- [tanstack-router-example-react-start-basic-rsc](https://pkg.pr.new/template/8d6f5a22-0cf1-4717-983a-6d40985fa9d8)
- [tanstack-router-example-react-start-basic-trellaux](https://pkg.pr.new/template/10e90100-566b-4920-99ba-5ddb6e17c1d8)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/be44d2be-010b-4ba2-902f-2d8bf5e6ffa4)
- [tanstack-router-react-example-waku-rsc](https://pkg.pr.new/template/dcf07b9a-af14-46e4-9c9e-74c2f9440972)
- [tanstack-router-react-example-with-bling](https://pkg.pr.new/template/57c2f337-b275-4f3b-b188-d9bd8cb0adaa)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/f1f4efe0-486d-4f44-9068-225dfe1053f3)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/05d92c49-ac49-40d2-a608-9dc986adda11)

</p></details>
      
    

mta-trackunit: @SeanCassiere how come you removed the 
`history: createMemoryHistory({ initialEntries: ['/'] }),`
SeanCassiere: > @SeanCassiere how come you removed the `history: createMemoryHistory({ initialEntries: ['/'] }),`

Mostly so we emulate the other tests and use the browser history.

Patch:
diff --git a/docs/config.json b/docs/config.json
index ae68c12c8..840508f7d 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -265,6 +265,14 @@
             {
               "label": "Navigation Blocking",
               "to": "framework/react/examples/navigation-blocking"
+            },
+            {
+              "label": "With tRPC",
+              "to": "framework/react/examples/with-trpc"
+            },
+            {
+              "label": "With tRPC + React Query",
+              "to": "framework/react/examples/with-trpc-react-query"
             }
           ]
         }
diff --git a/docs/framework/react/guide/file-based-routing.md b/docs/framework/react/guide/file-based-routing.md
index 4d01c6f62..55ca5f58b 100644
--- a/docs/framework/react/guide/file-based-routing.md
+++ b/docs/framework/react/guide/file-based-routing.md
@@ -213,6 +213,8 @@ The following options are available for configuration via the `tsr.config.json`
   - (Optional, **Defaults to `false`**) add file extensions to the route names in the generated route tree
 - **`disableLogging`**
   - (Optional, **Defaults to `false`**) disables logging for the route generation process
+- **`disableManifestGeneration**
+  - (Optional, **Defaults to `false`**) disables generating the route tree manifest
 - **`routeTreeFileHeader`**
 
   - (Optional) An array of strings to prepend to the generated route tree file content.
diff --git a/docs/framework/react/overview.md b/docs/framework/react/overview.md
index d63104332..0ccae8410 100644
--- a/docs/framework/react/overview.md
+++ b/docs/framework/react/overview.md
@@ -2,7 +2,7 @@
 title: Overview
 ---
 
-TanStack Router is a router for building React applications. Some of its features include:
+**TanStack Router is a router for building React applications**. Some of its features include:
 
 - 100% inferred TypeScript support
 - Typesafe navigation
@@ -19,6 +19,130 @@ TanStack Router is a router for building React applications. Some of its feature
 - Search param middleware
 - Route matching/loading middleware
 
+To get started quickly, head to the next page. For a more lengthy explanation, buckle up while I bring you up to speed!
+
+## "A Fork in the Route"
+
+Using a router to build applications is widely regarded as a must-have and is usually one of the first choices you’ll make in your tech stack.
+
+**So, why should to choose TanStack Router over another router?**
+
+To answer this question, we need to look at the other options in the space. There are many if you look hard enough, but in my experience, only a couple are worth exploring seriously:
+
+- **Next.js** - Widely regarded as the de facto framework for starting a new React project, it’s laser focused on performance, workflow, and bleeding edge technology. It’s APIs and abstractions are powerful, but can sometimes come across as non-standard. It's extremely fast growth and adoption in the industry has resulted in a featured packed experience, but not at the expense of feeling overwhelming and sometimes bloated.
+- **Remix / React Router** - A full-stack framework based on the historically successful React Router offers a similarly powerful developer and user experience, with APIs and vision based firmly on web standards like Request/Response and a focus on running anywhere JS can run. Many of its APIs and abstractions are wonderfully designed and were inspiration for more than a few TanStack Router APIs. That said, its rigid design, bolted-on type safety and sometimes strict over-adherence to platform APIs can leave some developers wanting more.
+
+Both of these frameworks (and their routers) are great, and I can personally attest that both are very good solutions for build React applications. My experience has also taught me that these solutions could also be much better, especially around the actual routing APIs that are available to developers to make their apps faster, easier, and more enjoyable to work with.
+
+It's probably no surprise at this point that picking a router is so important that it is often tied 1-to-1 with your choice of framework, since most frameworks rely on a specific router.
+
+**Does this mean that TanStack Router is a framework?**
+
+TanStack Router itself is not a "framework" in the traditional sense, since it doesn't address a few other common full-stack concerns. However TanStack Router has been designed to be upgradable to a full-stack framework when used in conjunction with other tools that address bundling, deployments, and server-side-specific functionality. This is why we are currently developing [TanStack Start](https://tanstack.com/start), a full-stack framework that is built on top of TanStack Router and tools like Vinxi, Nitro, and Vite.
+
+For a deeper dive on the history of TanStack Router, feel free to read the [TanStack Router History](#).
+
+## Why TanStack Router?
+
+TanStack Router delivers on the same fundamental expectations as other routers that you’ve come to expect:
+
+- Nested routes, layout routes, grouped routes
+- File-based Routing
+- Parallel data loading
+- Prefetching
+- URL Path Params
+- Error Boundaries and Handling
+- SSR
+- Prefetching
+- Route Masking
+
+And it also delivers some new features that raise the bar:
+
+- 100% inferred TypeScript support
+- Typesafe navigation
+- Built-in SWR Caching for loaders
+- Designed for client-side data caches (TanStack Query, SWR, etc.)
+- Typesafe JSON-first Search Params state management APIs
+- Path and Search Parameter Schema Validation
+- Search Parameter Navigation APIs
+- Custom Search Param parser/serializer support
+- Search param middleware
+- Inherited Route Context
+- Mixed file-based and code-based routing
+
+Let’s dive into some of the more important ones in more detail!
+
+## 100% Inferred TypeScript Support
+
+Everything these days is written “in Typescript” or at the very least offers type definitions that are veneered over runtime functionality, but too few packages in the ecosystem actually design their APIs with TypeScript in mind. So while I’m pleased that your router is auto-completing your option fields and catching a few property/method typos here and there, there is much more to be had.
+
+- TanStack Router is fully aware of all of your routes and their configuration at any given point in your code. This includes the path, path params, search params, context, and any other configuration you’ve provided. Ultimately this means that you can navigate to any route in your app with 100% type safety and confidence that your link or navigate call will succeed.
+- TanStack Router provides lossless type-inference. It uses countless generic type parameters to enforce and propagate any type information you give it throughout the rest its API and ultimately your app. No other router offers this level of type safety and developer confidence.
+
+What does all of that mean for you?
+
+- Faster feature development with auto-completion and type hints
+- Safer and faster refactors
+- Confidence that your code will work as expected
+
+## 1st Class Search Parameters
+
+Search parameters are often an afterthought, treated like a black box of strings (or string) that you can parse and update, but not much else. Existing solutions are **not** type-safe either, adding to the caution that is required to deal with them. Even the most "modern" frameworks and routers and leave it up to you to figure out how to manage this state. Sometimes they'll parse the search string into an object for you, or sometimes you're left to do it yourself with `URLSearchParams`.
+
+Let's step back and remember that **search params are the most powerful state manager in your entire application.** They are global, serializable, bookmarkable, and shareable making them the perfect place to store any kind of state that needs to survive a page refresh or a social share.
+
+To live up to that responsibility, search parameters are a first-class citizen in TanStack Router. While still based on standard URLSearchParams, TanStack Router uses a powerful parser/serializer to manage deeper and more complex data structures in your search params, all while keeping them type-safe and easy to work with.
+
+**It's like having `useState` right in the URL!**
+
+Search parameters are:
+
+- Automatically parsed and serialized as JSON
+- Validated and typed
+- Inherited from parent routes
+- Accessible in loaders, components, and hooks
+- Easily modified with the useSearch hook, Link, navigate, and router.navigate APIs
+- Customizable with a custom search filters and middleware
+- Subscribed via fine-grained search param selectors for efficient re-renders
+
+Once you start using TanStack Router's search parameters, you'll wonder how you ever lived without them.
+
+## Built-In Caching and Friendly Data Loading
+
+Data loading is a critical part of any application and while most existing routers offer some form of critical data loading APIs, they often fall short when it comes to caching and data lifecycle management. Existing solutions suffer from a few common problems:
+
+- No caching at all. Data is always fresh, but your users are left waiting for frequently accessed data to load over and over again.
+- Overly-aggressive caching. Data is cached for too long, leading to stale data and a poor user experience.
+- Blunt invalidation strategies and APIs. Data may be invalidated too often, leading to unnecessary network requests and wasted resources, or you may not have any fine-grained control over when data is invalidated at all.
+
+TanStack Router solves these problems with a two-prong approach to caching and data loading:
+
+### Built-in Cache
+
+TanStack Router provides a light-weight built-in caching layer that works seamlessly with the Router. This caching layer is loosely based on TanStack Query, but with fewer features and a much smaller API surface area. Like TanStack Query, sane but powerful defaults guaranty that your data is cached for reuse, invalidated when necessary, and garbage collected when not in use. It also provides a simple API for invalidating the cache manually when needed.
+
+### Flexible & Powerful Data Lifecycle APIs
+
+TanStack Router is designed with a flexible and powerful data loading API that more easily integrates with existing data fetching libraries like TanStack Query, SWR, Apollo, Relay, or even your own custom data fetching solution. Configurable APIs like `routeContext`, `beforeLoad`, `loaderDeps` and `loader` work in unison to make it easy to define declarative data dependencies, prefetch data, and manage the lifecycle of an external data source with ease.
+
+## Inherited Route Context
+
+TanStack Router's router and route context is a powerful feature that allows you to define context that is specific to a route which is then inherited by all child routes. Even the router and root route's themselves can provide context. Context can be built up both synchronously and asynchronously, and can be used to share data, configuration, or even functions between routes and route configurations. This is especially useful for scenarios like:
+
+- Authentication and Authorization
+- Hybrid SSR/CSR data fetching and preloading
+- Theming
+- Singletons and global utilities
+- Curried or partial application across preloading, loading, and rendering stages
+
+Also, what would route context be if it weren't type-safe? TanStack Router's route context is fully type-safe and inferred at zero cost to you.
+
+## File-based and/or Code-Based Routing
+
+TanStack Router supports both file-based and code-based routing at the same time. This flexibility allows you to choose the approach that best fits your project's needs.
+
+TanStack Router's file-based routing approach is uniquely user-facing. Route configuration is generated for you either by the Vite plugin or TanStack Router CLI, leaving the usage of said generated code up to you! This means that you're always in total control of your routes and router, even if you use file-based routing.
+
 ## Acknowledgements
 
 TanStack Router builds on concepts and patterns popularized by many other OSS projects, including:
diff --git a/examples/react/authenticated-routes/package.json b/examples/react/authenticated-routes/package.json
index ae9b0121d..a76c92274 100644
--- a/examples/react/authenticated-routes/package.json
+++ b/examples/react/authenticated-routes/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-default-search-params/package.json b/examples/react/basic-default-search-params/package.json
index fb42ce540..5084f6113 100644
--- a/examples/react/basic-default-search-params/package.json
+++ b/examples/react/basic-default-search-params/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 dc5d948e4..4daccff91 100644
--- a/examples/react/basic-file-based-codesplitting/package.json
+++ b/examples/react/basic-file-based-codesplitting/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-file-based/package.json b/examples/react/basic-file-based/package.json
index 062b2f53c..808d0b440 100644
--- a/examples/react/basic-file-based/package.json
+++ b/examples/react/basic-file-based/package.json
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^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 30d432f7d..5595ee771 100644
--- a/examples/react/basic-react-query-file-based/package.json
+++ b/examples/react/basic-react-query-file-based/package.json
@@ -13,8 +13,8 @@
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-react-query/package.json b/examples/react/basic-react-query/package.json
index fd31863e9..18cb6807f 100644
--- a/examples/react/basic-react-query/package.json
+++ b/examples/react/basic-react-query/package.json
@@ -13,7 +13,7 @@
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 52988f073..9794a57cf 100644
--- a/examples/react/basic-ssr-file-based/package.json
+++ b/examples/react/basic-ssr-file-based/package.json
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "get-port": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-ssr-file-based/server.js b/examples/react/basic-ssr-file-based/server.js
index 4643af5fb..939775005 100644
--- a/examples/react/basic-ssr-file-based/server.js
+++ b/examples/react/basic-ssr-file-based/server.js
@@ -1,3 +1,4 @@
+import path from 'node:path'
 import express from 'express'
 import getPort, { portNumbers } from 'get-port'
 
@@ -44,14 +45,14 @@ export async function createServer(
     try {
       const url = req.originalUrl
 
-      if (url.includes('.')) {
+      if (path.extname(url) !== '') {
         console.warn(`${url} is not valid router path`)
         res.status(404)
         res.end(`${url} is not valid router path`)
         return
       }
 
-      // Extract the head from vite's index transformation hook
+      // Best effort extraction of the head from vite's index transformation hook
       let viteHead = !isProd
         ? await vite.transformIndexHtml(
             url,
@@ -73,7 +74,7 @@ export async function createServer(
       })()
 
       console.info('Rendering: ', url, '...')
-      entry.render({ req, res, url, head: viteHead })
+      entry.render({ req, res, head: viteHead })
     } catch (e) {
       !isProd && vite.ssrFixStacktrace(e)
       console.info(e.stack)
diff --git a/examples/react/basic-ssr-file-based/src/entry-server.tsx b/examples/react/basic-ssr-file-based/src/entry-server.tsx
index 7a592ca38..6d0fb425e 100644
--- a/examples/react/basic-ssr-file-based/src/entry-server.tsx
+++ b/examples/react/basic-ssr-file-based/src/entry-server.tsx
@@ -1,42 +1,61 @@
-import * as React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import { createMemoryHistory } from '@tanstack/react-router'
-import { StartServer } from '@tanstack/start/server'
+import { pipeline } from 'node:stream/promises'
+import {
+  createRequestHandler,
+  defaultStreamHandler,
+} from '@tanstack/start/server'
 import { createRouter } from './router'
-import type { ServerResponse } from 'http'
 import type express from 'express'
-
-// index.js
 import './fetch-polyfill'
 
-export async function render(opts: {
-  url: string
+export async function render({
+  req,
+  res,
+  head,
+}: {
   head: string
   req: express.Request
-  res: ServerResponse
+  res: express.Response
 }) {
-  const router = createRouter()
-
-  const memoryHistory = createMemoryHistory({
-    initialEntries: [opts.url],
+  // Convert the express request to a fetch request
+  const url = new URL(req.originalUrl || req.url, 'https://localhost:3000').href
+  const request = new Request(url, {
+    method: req.method,
+    headers: (() => {
+      const headers = new Headers()
+      for (const [key, value] of Object.entries(req.headers)) {
+        headers.set(key, value as any)
+      }
+      return headers
+    })(),
   })
 
-  // Update the history and context
-  router.update({
-    history: memoryHistory,
-    context: {
-      ...router.options.context,
-      head: opts.head,
+  // Create a request handler
+  const handler = createRequestHandler({
+    request,
+    createRouter: () => {
+      const router = createRouter()
+
+      // Update each router instance with the head info from vite
+      router.update({
+        context: {
+          ...router.options.context,
+          head: head,
+        },
+      })
+      return router
     },
   })
 
-  // Since we're using renderToString, Wait for the router to finish loading
-  await router.load()
+  // Let's use the default stream handler to create the response
+  const response = await handler(defaultStreamHandler)
 
-  // Render the app
-  const appHtml = ReactDOMServer.renderToString(<StartServer router={router} />)
+  // Convert the fetch response back to an express response
+  res.statusMessage = response.statusText
+  res.status(response.status)
+  response.headers.forEach((value, name) => {
+    res.setHeader(name, value)
+  })
 
-  opts.res.statusCode = 200
-  opts.res.setHeader('Content-Type', 'text/html')
-  opts.res.end(`<!DOCTYPE html>${appHtml}`)
+  // Stream the response body
+  return pipeline(response.body as any, res)
 }
diff --git a/examples/react/basic-ssr-file-based/src/routes/posts/index.tsx b/examples/react/basic-ssr-file-based/src/routes/posts/index.tsx
index c6b65f189..5b5f08f95 100644
--- a/examples/react/basic-ssr-file-based/src/routes/posts/index.tsx
+++ b/examples/react/basic-ssr-file-based/src/routes/posts/index.tsx
@@ -1,5 +1,4 @@
 import { createFileRoute } from '@tanstack/react-router'
-import * as React from 'react'
 
 export const Route = createFileRoute('/posts/')({
   component: PostsIndexComponent,
diff --git a/examples/react/basic-ssr-streaming-file-based/package.json b/examples/react/basic-ssr-streaming-file-based/package.json
index 8f2e74367..47a8e60ab 100644
--- a/examples/react/basic-ssr-streaming-file-based/package.json
+++ b/examples/react/basic-ssr-streaming-file-based/package.json
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "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 bdff3995f..28e64f6ef 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 213bb71a0..fd032e3f0 100644
--- a/examples/react/deferred-data/package.json
+++ b/examples/react/deferred-data/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 916ea8561..b7e4ec217 100644
--- a/examples/react/kitchen-sink-file-based/package.json
+++ b/examples/react/kitchen-sink-file-based/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^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 94578a710..496c0cc61 100644
--- a/examples/react/kitchen-sink-react-query-file-based/package.json
+++ b/examples/react/kitchen-sink-react-query-file-based/package.json
@@ -12,8 +12,8 @@
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/kitchen-sink-react-query/package.json b/examples/react/kitchen-sink-react-query/package.json
index 7c8b1c379..b50facb42 100644
--- a/examples/react/kitchen-sink-react-query/package.json
+++ b/examples/react/kitchen-sink-react-query/package.json
@@ -12,7 +12,7 @@
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 36aa4e562..482fe5d76 100644
--- a/examples/react/kitchen-sink/package.json
+++ b/examples/react/kitchen-sink/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 3f9c90097..e9334fb87 100644
--- a/examples/react/large-file-based/package.json
+++ b/examples/react/large-file-based/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/location-masking/package.json b/examples/react/location-masking/package.json
index e3f9bd2a8..ab31d71f7 100644
--- a/examples/react/location-masking/package.json
+++ b/examples/react/location-masking/package.json
@@ -12,7 +12,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 9ffabb4d9..7facc7819 100644
--- a/examples/react/navigation-blocking/package.json
+++ b/examples/react/navigation-blocking/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 93fcc6138..227901f9e 100644
--- a/examples/react/quickstart-file-based/package.json
+++ b/examples/react/quickstart-file-based/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/quickstart-rspack-file-based/package.json b/examples/react/quickstart-rspack-file-based/package.json
index ffc16f2ac..2ffffe118 100644
--- a/examples/react/quickstart-rspack-file-based/package.json
+++ b/examples/react/quickstart-rspack-file-based/package.json
@@ -9,14 +9,14 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@rsbuild/core": "^0.7.10",
     "@rsbuild/plugin-react": "^0.7.10",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-plugin": "^1.47.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.5.3"
diff --git a/examples/react/quickstart-webpack-file-based/package.json b/examples/react/quickstart-webpack-file-based/package.json
index 84bdc8fdb..7d2f66a00 100644
--- a/examples/react/quickstart-webpack-file-based/package.json
+++ b/examples/react/quickstart-webpack-file-based/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@swc/core": "^1.7.6",
-    "@tanstack/router-plugin": "^1.46.6",
+    "@tanstack/router-plugin": "^1.47.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "html-webpack-plugin": "^5.6.0",
diff --git a/examples/react/quickstart/package.json b/examples/react/quickstart/package.json
index 888442aaa..aab57e65a 100644
--- a/examples/react/quickstart/package.json
+++ b/examples/react/quickstart/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 86150b375..5c7accda9 100644
--- a/examples/react/scroll-restoration/package.json
+++ b/examples/react/scroll-restoration/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
     "@tanstack/react-virtual": "^3.8.4",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "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 95de884db..aeb2a0a33 100644
--- a/examples/react/start-basic-counter/package.json
+++ b/examples/react/start-basic-counter/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/start": "^1.47.0",
     "@typescript-eslint/parser": "^7.18.0",
     "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 1aea29956..d52f3b404 100644
--- a/examples/react/start-basic-react-query/package.json
+++ b/examples/react/start-basic-react-query/package.json
@@ -16,9 +16,9 @@
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
     "@tanstack/react-router-with-query": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.1",
     "isbot": "^5.1.14",
diff --git a/examples/react/start-basic-rsc/package.json b/examples/react/start-basic-rsc/package.json
index 8d4cb47e4..736484324 100644
--- a/examples/react/start-basic-rsc/package.json
+++ b/examples/react/start-basic-rsc/package.json
@@ -13,9 +13,9 @@
   "dependencies": {
     "@babel/plugin-syntax-typescript": "^7.24.7",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.4.0",
     "vinxi": "0.4.1"
diff --git a/examples/react/start-basic/package.json b/examples/react/start-basic/package.json
index 64a4aa2e8..af41d4e12 100644
--- a/examples/react/start-basic/package.json
+++ b/examples/react/start-basic/package.json
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.1",
     "isbot": "^5.1.14",
diff --git a/examples/react/start-convex-trellaux/package.json b/examples/react/start-convex-trellaux/package.json
index 076f71979..cbd9b71d4 100644
--- a/examples/react/start-convex-trellaux/package.json
+++ b/examples/react/start-convex-trellaux/package.json
@@ -17,9 +17,9 @@
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
     "@tanstack/react-router-with-query": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@convex-dev/react-query": "0.0.0-alpha.5",
diff --git a/examples/react/start-trellaux/package.json b/examples/react/start-trellaux/package.json
index 7d43be84c..aeee1114c 100644
--- a/examples/react/start-trellaux/package.json
+++ b/examples/react/start-trellaux/package.json
@@ -15,9 +15,9 @@
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
     "@tanstack/react-router-with-query": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@tanstack/router-plugin": "^1.46.6",
-    "@tanstack/start": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/start": "^1.47.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.1",
     "isbot": "^5.1.14",
diff --git a/examples/react/wip-trpc-react-query/client/main.tsx b/examples/react/wip-trpc-react-query/client/main.tsx
deleted file mode 100644
index b613236b2..000000000
--- a/examples/react/wip-trpc-react-query/client/main.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import { StrictMode } from 'react'
-import ReactDOM from 'react-dom/client'
-import {
-  Outlet,
-  RouterProvider,
-  createRouter,
-  Link,
-  createRootRouteWithContext,
-  createRoute,
-} from '@tanstack/react-router'
-import { AppRouter } from '../server/server'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { httpBatchLink } from '@trpc/client'
-import { createTRPCReact } from '@trpc/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-
-const queryClient = new QueryClient()
-
-export const trpc = createTRPCReact<AppRouter>({})
-
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:4000',
-      // optional
-      headers() {
-        return {
-          // authorization: getAuthCookie(),
-        }
-      },
-    }),
-  ],
-})
-
-export function Spinner() {
-  return (
-    <div className="animate-spin px-3 text-2xl inline-flex items-center justify-center">
-      ⍥
-    </div>
-  )
-}
-
-const rootRoute = createRootRouteWithContext<{
-  trpc: typeof trpc
-  queryClient: typeof queryClient
-}>()({
-  component: () => {
-    return (
-      <>
-        <div className="p-2 flex gap-2 text-lg">
-          <Link
-            to="/"
-            activeProps={{
-              className: 'font-bold',
-            }}
-            activeOptions={{ exact: true }}
-          >
-            Home
-          </Link>{' '}
-          <Link
-            to="/posts"
-            activeProps={{
-              className: 'font-bold',
-            }}
-          >
-            Posts
-          </Link>
-        </div>
-        <hr />
-        <Outlet /> {/* Start rendering router matches */}
-        <TanStackRouterDevtools position="bottom-left" />
-      </>
-    )
-  },
-})
-
-const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  loader: () => {
-    // TODO: Prefetch hello using TRPC
-  },
-  component: () => {
-    const helloQuery = trpc.hello.useQuery()
-    if (!helloQuery.data) return <Spinner />
-    return <div className="p-2 text-xl">{helloQuery.data}</div>
-  },
-})
-
-const postsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: 'posts',
-  errorComponent: () => 'Oh crap!',
-  loader: async () => {
-    // TODO: Prefetch posts using TRPC
-  },
-  component: ({ useLoaderData }) => {
-    const postsQuery = trpc.posts.useQuery()
-
-    if (postsQuery.isLoading) {
-      return <Spinner />
-    }
-
-    return (
-      <div className="p-2 flex gap-2">
-        <ul className="list-disc pl-4">
-          {postsQuery.data?.map((post) => {
-            return (
-              <li key={post.id} className="whitespace-nowrap">
-                <Link
-                  to={postRoute.fullPath}
-                  params={{
-                    postId: post.id,
-                  }}
-                  className="block py-1 text-blue-800 hover:text-blue-600"
-                  activeProps={{ className: 'text-black font-bold' }}
-                >
-                  <div>{post.title.substring(0, 20)}</div>
-                </Link>
-              </li>
-            )
-          })}
-        </ul>
-        <hr />
-        <Outlet />
-      </div>
-    )
-  },
-})
-
-const postsIndexRoute = createRoute({
-  getParentRoute: () => postsRoute,
-  path: '/',
-  component: () => {
-    return (
-      <>
-        <div>Select a post.</div>
-      </>
-    )
-  },
-})
-
-const postRoute = createRoute({
-  getParentRoute: () => postsRoute,
-  path: '$postId',
-  loader: async ({ params: { postId } }) => {
-    // TODO: Prefetch post using TRPC
-  },
-  component: ({ useParams }) => {
-    const postId = useParams({ select: (d) => d.postId })
-    const postQuery = trpc.post.useQuery(postId)
-
-    if (postQuery.isLoading) {
-      return <Spinner />
-    }
-
-    return (
-      <div className="space-y-2">
-        <h4 className="text-xl font-bold underline">{postQuery.data?.title}</h4>
-      </div>
-    )
-  },
-})
-
-const routeTree = rootRoute.addChildren([
-  indexRoute,
-  postsRoute.addChildren([postsIndexRoute, postRoute]),
-])
-
-// Set up a Router instance
-const router = createRouter({
-  routeTree,
-  defaultPreload: 'intent',
-  context: {
-    trpc,
-    queryClient,
-  },
-})
-
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router
-  }
-}
-
-function App() {
-  return (
-    // Build our routes and render our router
-    <>
-      <trpc.Provider client={trpcClient} queryClient={queryClient}>
-        <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
-          <ReactQueryDevtools
-            initialIsOpen
-            position="bottom-left"
-            toggleButtonProps={{
-              style: {
-                marginLeft: '5.5rem',
-                transform: `scale(.7)`,
-                transformOrigin: 'bottom left',
-              },
-            }}
-          />
-        </QueryClientProvider>
-      </trpc.Provider>
-    </>
-  )
-}
-
-const rootElement = document.getElementById('app')!
-if (!rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement)
-  root.render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
-  )
-}
diff --git a/examples/react/with-framer-motion/package.json b/examples/react/with-framer-motion/package.json
index 839a400a2..755ebd1a1 100644
--- a/examples/react/with-framer-motion/package.json
+++ b/examples/react/with-framer-motion/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
+    "@tanstack/router-devtools": "^1.46.9",
     "redaxios": "^0.5.1",
     "framer-motion": "^11.3.21",
     "immer": "^10.1.1",
diff --git a/examples/react/wip-trpc-react-query/.gitignore b/examples/react/with-trpc-react-query/.gitignore
similarity index 100%
rename from examples/react/wip-trpc-react-query/.gitignore
rename to examples/react/with-trpc-react-query/.gitignore
diff --git a/examples/react/wip-trpc-react-query/README.md b/examples/react/with-trpc-react-query/README.md
similarity index 100%
rename from examples/react/wip-trpc-react-query/README.md
rename to examples/react/with-trpc-react-query/README.md
diff --git a/examples/react/with-trpc-react-query/client/main.tsx b/examples/react/with-trpc-react-query/client/main.tsx
new file mode 100644
index 000000000..3093d9f2a
--- /dev/null
+++ b/examples/react/with-trpc-react-query/client/main.tsx
@@ -0,0 +1,414 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  Link,
+  MatchRoute,
+  Outlet,
+  RouterProvider,
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+  useRouterState,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { httpBatchLink } from '@trpc/client'
+import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { z } from 'zod'
+import type { AppRouter } from '../server/server'
+
+const queryClient = new QueryClient()
+
+export const trpc = createTRPCReact<AppRouter>({})
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:4000',
+      // optional
+      headers() {
+        return {
+          // authorization: getAuthCookie(),
+        }
+      },
+    }),
+  ],
+})
+
+const trpcQueryUtils = createTRPCQueryUtils({ queryClient, client: trpcClient })
+
+function Spinner() {
+  return <div className="inline-block animate-spin px-3">⍥</div>
+}
+
+const rootRoute = createRootRouteWithContext<{
+  trpc: typeof trpc
+  trpcQueryUtils: ReturnType<typeof createTRPCQueryUtils<AppRouter>>
+  queryClient: typeof queryClient
+}>()({
+  component: () => {
+    const isFetching = useRouterState({ select: (s) => s.isLoading })
+
+    return (
+      <>
+        <div className={`min-h-screen flex flex-col`}>
+          <div className={`flex items-center border-b gap-2`}>
+            <h1 className={`text-3xl p-2`}>With tRPC + TanStack Query</h1>
+            {/* Show a global spinner when the router is transitioning */}
+            <div
+              className={`text-3xl duration-300 delay-0 opacity-0 ${
+                isFetching ? ` duration-1000 opacity-40` : ''
+              }`}
+            >
+              <Spinner />
+            </div>
+          </div>
+          <div className={`flex-1 flex`}>
+            <div className={`divide-y w-56`}>
+              {(
+                [
+                  ['/', 'Home'],
+                  ['/dashboard', 'Dashboard'],
+                ] as const
+              ).map(([to, label]) => {
+                return (
+                  <div key={to}>
+                    <Link
+                      to={to}
+                      activeOptions={
+                        {
+                          // If the route points to the root of it's parent,
+                          // make sure it's only active if it's exact
+                          // exact: to === '.',
+                        }
+                      }
+                      preload="intent"
+                      className={`block py-2 px-3 text-blue-700`}
+                      // Make "active" links bold
+                      activeProps={{ className: `font-bold` }}
+                    >
+                      {label}
+                    </Link>
+                  </div>
+                )
+              })}
+            </div>
+            <div className={`flex-1 border-l border-gray-200`}>
+              {/* Render our first route match */}
+              <Outlet />
+            </div>
+          </div>
+        </div>
+        <TanStackRouterDevtools position="bottom-left" />
+      </>
+    )
+  },
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => {
+    return (
+      <div className={`p-2`}>
+        <div className={`text-lg`}>Welcome Home!</div>
+        <hr className={`my-2`} />
+        <Link
+          to={postRoute.fullPath}
+          params={{
+            postId: '3',
+          }}
+          className={`py-1 px-2 text-xs bg-blue-500 text-white rounded-full`}
+        >
+          1 New Invoice
+        </Link>
+        <hr className={`my-2`} />
+        <div className={`max-w-xl`}>
+          As you navigate around take note of the UX. It should feel
+          suspense-like, where routes are only rendered once all of their data
+          and elements are ready.
+          <hr className={`my-2`} />
+          To exaggerate async effects, play with the artificial request delay
+          slider in the bottom-left corner.
+          <hr className={`my-2`} />
+          The last 2 sliders determine if link-hover preloading is enabled (and
+          how long those preloads stick around) and also whether to cache
+          rendered route data (and for how long). Both of these default to 0 (or
+          off).
+        </div>
+      </div>
+    )
+  },
+})
+
+const dashboardRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'dashboard',
+  component: () => {
+    return (
+      <>
+        <div className="flex items-center border-b">
+          <h2 className="text-xl p-2">Dashboard</h2>
+          <Link
+            to="/dashboard/posts/$postId"
+            params={{
+              postId: '3',
+            }}
+            className="py-1 px-2 text-xs bg-blue-500 text-white rounded-full"
+          >
+            1 New Invoice
+          </Link>
+        </div>
+        <div className="flex flex-wrap divide-x">
+          {(
+            [
+              ['.', 'Summary'],
+              ['/dashboard/posts', 'Posts'],
+            ] as const
+          ).map(([to, label]) => {
+            return (
+              <Link
+                from={dashboardRoute.fullPath}
+                key={to}
+                to={to}
+                activeOptions={{ exact: to === '.' }}
+                activeProps={{ className: `font-bold` }}
+                className="p-2"
+              >
+                {label}
+              </Link>
+            )
+          })}
+        </div>
+        <hr />
+        <Outlet />
+      </>
+    )
+  },
+})
+
+const dashboardIndexRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: '/',
+  loader: ({ context: { trpcQueryUtils } }) =>
+    trpcQueryUtils.posts.ensureData(),
+  component: () => {
+    const postsQuery = trpc.posts.useQuery()
+
+    const posts = postsQuery.data || []
+
+    return (
+      <div className="p-2">
+        <div className="p-2">
+          Welcome to the dashboard! You have{' '}
+          <strong>{posts.length} total posts</strong>.
+        </div>
+      </div>
+    )
+  },
+})
+
+const postsRoute = createRoute({
+  getParentRoute: () => dashboardRoute,
+  path: 'posts',
+  errorComponent: () => 'Oh crap!',
+  loader: async ({ context: { trpcQueryUtils } }) => {
+    await trpcQueryUtils.posts.ensureData()
+    return
+  },
+  pendingComponent: Spinner,
+  component: () => {
+    const postsQuery = trpc.posts.useQuery()
+
+    const posts = postsQuery.data || []
+
+    return (
+      <div className="flex-1 flex">
+        <div className="divide-y w-48">
+          {posts.map((post) => {
+            return (
+              <div key={post.id}>
+                <Link
+                  to={postRoute.fullPath}
+                  params={{
+                    postId: post.id,
+                  }}
+                  preload="intent"
+                  className="block py-2 px-3 text-blue-700"
+                  activeProps={{ className: `font-bold` }}
+                >
+                  <pre className="text-sm">
+                    #{post.id} - {post.title.slice(0, 10)}{' '}
+                    <MatchRoute
+                      to={postRoute.fullPath}
+                      params={{
+                        postId: post.id,
+                      }}
+                      pending
+                    >
+                      <Spinner />
+                    </MatchRoute>
+                  </pre>
+                </Link>
+              </div>
+            )
+          })}
+        </div>
+        <div className="flex-1 border-l border-gray-200">
+          <Outlet />
+        </div>
+      </div>
+    )
+  },
+})
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+  component: () => {
+    return (
+      <>
+        <div className="p-2">Select a post to view.</div>
+      </>
+    )
+  },
+})
+
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+  validateSearch: z.object({
+    showNotes: z.boolean().optional(),
+    notes: z.string().optional(),
+  }),
+  loader: async ({ context: { trpcQueryUtils }, params: { postId } }) => {
+    await trpcQueryUtils.post.ensureData(postId)
+  },
+  pendingComponent: Spinner,
+  component: () => {
+    const postId = postRoute.useParams({ select: (d) => d.postId })
+
+    const postQuery = trpc.post.useQuery(postId)
+    const post = postQuery.data
+
+    const search = postRoute.useSearch()
+    const navigate = postRoute.useNavigate()
+
+    const [notes, setNotes] = React.useState(search.notes ?? ``)
+
+    React.useEffect(() => {
+      navigate({
+        search: (old) => ({ ...old, notes: notes ? notes : undefined }),
+        replace: true,
+        params: true,
+      })
+    }, [notes])
+
+    if (!post) {
+      return <div>Post not found</div>
+    }
+
+    return (
+      <div className="p-2 space-y-2" key={post.id}>
+        <div className="space-y-2">
+          <h2 className="font-bold text-lg">
+            <input
+              defaultValue={post.id}
+              className="border border-opacity-50 rounded p-2 w-full"
+              disabled
+            />
+          </h2>
+          <div>
+            <textarea
+              defaultValue={post.title}
+              rows={6}
+              className="border border-opacity-50 p-2 rounded w-full"
+              disabled
+            />
+          </div>
+        </div>
+        <div>
+          <Link
+            from={postRoute.fullPath}
+            search={(old) => ({
+              ...old,
+              showNotes: old.showNotes ? undefined : true,
+            })}
+            params={true}
+            className="text-blue-700"
+          >
+            {search.showNotes ? 'Close Notes' : 'Show Notes'}{' '}
+          </Link>
+          {search.showNotes ? (
+            <>
+              <div>
+                <div className="h-2" />
+                <textarea
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  rows={5}
+                  className="shadow w-full p-2 rounded"
+                  placeholder="Write some notes here..."
+                />
+                <div className="italic text-xs">
+                  Notes are stored in the URL. Try copying the URL into a new
+                  tab!
+                </div>
+              </div>
+            </>
+          ) : null}
+        </div>
+      </div>
+    )
+  },
+})
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  dashboardRoute.addChildren([
+    dashboardIndexRoute,
+    postsRoute.addChildren([postsIndexRoute, postRoute]),
+  ]),
+])
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  context: {
+    trpc,
+    trpcQueryUtils,
+    queryClient,
+  },
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+function App() {
+  return (
+    // Build our routes and render our router
+    <>
+      <trpc.Provider client={trpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+          <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+        </QueryClientProvider>
+      </trpc.Provider>
+    </>
+  )
+}
+
+const rootElement = document.getElementById('app')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  )
+}
diff --git a/examples/react/wip-trpc-react-query/index.html b/examples/react/with-trpc-react-query/index.html
similarity index 100%
rename from examples/react/wip-trpc-react-query/index.html
rename to examples/react/with-trpc-react-query/index.html
diff --git a/examples/react/wip-trpc-react-query/package.json b/examples/react/with-trpc-react-query/package.json
similarity index 75%
rename from examples/react/wip-trpc-react-query/package.json
rename to examples/react/with-trpc-react-query/package.json
index 7a6aaf5c3..6d07312ac 100644
--- a/examples/react/wip-trpc-react-query/package.json
+++ b/examples/react/with-trpc-react-query/package.json
@@ -11,18 +11,18 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query": "^5.51.21",
+    "@tanstack/react-query-devtools": "^5.51.21",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@trpc/client": "^10.45.2",
-    "@trpc/react-query": "^10.45.2",
-    "@trpc/server": "^10.45.2",
-    "redaxios": "^0.5.1",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@trpc/client": "11.0.0-rc.477",
+    "@trpc/react-query": "11.0.0-rc.477",
+    "@trpc/server": "11.0.0-rc.477",
     "express": "^4.19.2",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "redaxios": "^0.5.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/examples/react/wip-trpc-react-query/server/server.ts b/examples/react/with-trpc-react-query/server/server.ts
similarity index 81%
rename from examples/react/wip-trpc-react-query/server/server.ts
rename to examples/react/with-trpc-react-query/server/server.ts
index 5dcbcc3a3..fb256667e 100644
--- a/examples/react/wip-trpc-react-query/server/server.ts
+++ b/examples/react/with-trpc-react-query/server/server.ts
@@ -7,6 +7,13 @@ const POSTS = [
   { id: '1', title: 'First post' },
   { id: '2', title: 'Second post' },
   { id: '3', title: 'Third post' },
+  { id: '4', title: 'Fourth post' },
+  { id: '5', title: 'Fifth post' },
+  { id: '6', title: 'Sixth post' },
+  { id: '7', title: 'Seventh post' },
+  { id: '8', title: 'Eighth post' },
+  { id: '9', title: 'Ninth post' },
+  { id: '10', title: 'Tenth post' },
 ]
 
 const appRouter = t.router({
diff --git a/examples/react/wip-trpc-react-query/tsconfig.dev.json b/examples/react/with-trpc-react-query/tsconfig.dev.json
similarity index 100%
rename from examples/react/wip-trpc-react-query/tsconfig.dev.json
rename to examples/react/with-trpc-react-query/tsconfig.dev.json
diff --git a/examples/react/wip-trpc-react-query/tsconfig.json b/examples/react/with-trpc-react-query/tsconfig.json
similarity index 100%
rename from examples/react/wip-trpc-react-query/tsconfig.json
rename to examples/react/with-trpc-react-query/tsconfig.json
diff --git a/examples/react/wip-trpc-react-query/vite.config.js b/examples/react/with-trpc-react-query/vite.config.js
similarity index 100%
rename from examples/react/wip-trpc-react-query/vite.config.js
rename to examples/react/with-trpc-react-query/vite.config.js
diff --git a/examples/react/with-trpc/client/main.tsx b/examples/react/with-trpc/client/main.tsx
index 811291787..71ef49d97 100644
--- a/examples/react/with-trpc/client/main.tsx
+++ b/examples/react/with-trpc/client/main.tsx
@@ -5,7 +5,7 @@ import {
   MatchRoute,
   Outlet,
   RouterProvider,
-  createRootRoute,
+  createRootRouteWithContext,
   createRoute,
   createRouter,
   useRouterState,
@@ -28,7 +28,9 @@ function Spinner() {
   return <div className="inline-block animate-spin px-3">⍥</div>
 }
 
-const rootRoute = createRootRoute({
+const rootRoute = createRootRouteWithContext<{
+  trpc: typeof trpc
+}>()({
   component: () => {
     const isFetching = useRouterState({ select: (s) => s.isLoading })
 
@@ -36,7 +38,7 @@ const rootRoute = createRootRoute({
       <>
         <div className={`min-h-screen flex flex-col`}>
           <div className={`flex items-center border-b gap-2`}>
-            <h1 className={`text-3xl p-2`}>Kitchen Sink</h1>
+            <h1 className={`text-3xl p-2`}>With tRPC</h1>
             {/* Show a global spinner when the router is transitioning */}
             <div
               className={`text-3xl duration-300 delay-0 opacity-0 ${
@@ -99,7 +101,7 @@ const indexRoute = createRoute({
         <Link
           to={postRoute.fullPath}
           params={{
-            postId: 3,
+            postId: '3',
           }}
           className={`py-1 px-2 text-xs bg-blue-500 text-white rounded-full`}
         >
@@ -135,7 +137,7 @@ const dashboardRoute = createRoute({
           <Link
             to="/dashboard/posts/$postId"
             params={{
-              postId: 3,
+              postId: '3',
             }}
             className="py-1 px-2 text-xs bg-blue-500 text-white rounded-full"
           >
@@ -173,7 +175,7 @@ const dashboardRoute = createRoute({
 const dashboardIndexRoute = createRoute({
   getParentRoute: () => dashboardRoute,
   path: '/',
-  loader: () => trpc.posts.query(),
+  loader: ({ context: { trpc } }) => trpc.posts.query(),
   component: () => {
     const posts = dashboardIndexRoute.useLoaderData()
 
@@ -191,7 +193,7 @@ const dashboardIndexRoute = createRoute({
 const postsRoute = createRoute({
   getParentRoute: () => dashboardRoute,
   path: 'posts',
-  loader: () => trpc.posts.query(),
+  loader: ({ context: { trpc } }) => trpc.posts.query(),
   component: () => {
     const posts = postsRoute.useLoaderData()
 
@@ -250,17 +252,12 @@ const postsIndexRoute = createRoute({
 const postRoute = createRoute({
   getParentRoute: () => postsRoute,
   path: '$postId',
-  params: {
-    parse: (params) => ({
-      postId: z.number().int().parse(Number(params.postId)),
-    }),
-    stringify: ({ postId }) => ({ postId: `${postId}` }),
-  },
   validateSearch: z.object({
     showNotes: z.boolean().optional(),
     notes: z.string().optional(),
   }),
-  loader: async ({ params: { postId } }) => trpc.post.query(postId),
+  loader: async ({ context: { trpc }, params: { postId } }) =>
+    trpc.post.query(postId),
   component: () => {
     const post = postRoute.useLoaderData()
     const search = postRoute.useSearch()
@@ -345,12 +342,15 @@ const routeTree = rootRoute.addChildren([
 
 const router = createRouter({
   routeTree,
+  defaultPreload: 'intent',
   defaultPendingComponent: () => (
     <div className={`p-2 text-2xl`}>
       <Spinner />
     </div>
   ),
-  defaultPreload: 'intent',
+  context: {
+    trpc,
+  },
 })
 
 declare module '@tanstack/react-router' {
diff --git a/examples/react/with-trpc/package.json b/examples/react/with-trpc/package.json
index 0956c8415..d772cb18b 100644
--- a/examples/react/with-trpc/package.json
+++ b/examples/react/with-trpc/package.json
@@ -11,18 +11,15 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-devtools": "^4.36.1",
     "@tanstack/react-router": "^1.46.8",
-    "@tanstack/router-devtools": "^1.46.8",
-    "@trpc/client": "^10.45.2",
-    "@trpc/react-query": "^10.45.2",
-    "@trpc/server": "^10.45.2",
-    "redaxios": "^0.5.1",
+    "@tanstack/router-devtools": "^1.46.9",
+    "@trpc/client": "11.0.0-rc.477",
+    "@trpc/server": "11.0.0-rc.477",
     "express": "^4.19.2",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "redaxios": "^0.5.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/examples/react/with-trpc/server/server.ts b/examples/react/with-trpc/server/server.ts
index 95d414aec..e33484d4a 100644
--- a/examples/react/with-trpc/server/server.ts
+++ b/examples/react/with-trpc/server/server.ts
@@ -1,19 +1,19 @@
-import { inferAsyncReturnType, initTRPC } from '@trpc/server'
+import { initTRPC } from '@trpc/server'
 import { createHTTPServer } from '@trpc/server/adapters/standalone'
 
 const t = initTRPC.create()
 
 const INVOICES = [
-  { id: 1, title: 'First post' },
-  { id: 2, title: 'Second post' },
-  { id: 3, title: 'Third post' },
-  { id: 4, title: 'Fourth post' },
-  { id: 5, title: 'Fifth post' },
-  { id: 6, title: 'Sixth post' },
-  { id: 7, title: 'Seventh post' },
-  { id: 8, title: 'Eighth post' },
-  { id: 9, title: 'Ninth post' },
-  { id: 10, title: 'Tenth post' },
+  { id: '1', title: 'First post' },
+  { id: '2', title: 'Second post' },
+  { id: '3', title: 'Third post' },
+  { id: '4', title: 'Fourth post' },
+  { id: '5', title: 'Fifth post' },
+  { id: '6', title: 'Sixth post' },
+  { id: '7', title: 'Seventh post' },
+  { id: '8', title: 'Eighth post' },
+  { id: '9', title: 'Ninth post' },
+  { id: '10', title: 'Tenth post' },
 ]
 
 const appRouter = t.router({
@@ -22,7 +22,7 @@ const appRouter = t.router({
     await new Promise((resolve) => setTimeout(resolve, 1000))
     return INVOICES
   }),
-  post: t.procedure.input(Number).query(async (req) => {
+  post: t.procedure.input(String).query(async (req) => {
     await new Promise((resolve) => setTimeout(resolve, 500))
     return INVOICES.find((p) => p.id === req.input)
   }),
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index f19d000f3..738da53cf 100644
--- a/packages/react-router/src/Matches.tsx
+++ b/packages/react-router/src/Matches.tsx
@@ -109,15 +109,11 @@ export function Matches() {
     <router.options.defaultPendingComponent />
   ) : null
 
-  const ResolvedSuspense = !router.state.matches.length
-    ? React.Suspense
-    : SafeFragment
-
   const inner = (
-    <ResolvedSuspense fallback={pendingElement}>
+    <React.Suspense fallback={pendingElement}>
       <Transitioner />
       <MatchesInner />
-    </ResolvedSuspense>
+    </React.Suspense>
   )
 
   return router.options.InnerWrap ? (
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index d8b3a7217..becc1b369 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -21,15 +21,15 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const router = useRouter()
+  const { navigate } = useRouter()
 
   return React.useCallback(
     (options: NavigateOptions) => {
-      return router.navigate({
+      return navigate({
         ...options,
       })
     },
-    [router],
+    [navigate],
   ) as UseNavigateResult<TDefaultFrom>
 }
 
diff --git a/packages/router-cli/package.json b/packages/router-cli/package.json
index 481a2fcb9..379ba108c 100644
--- a/packages/router-cli/package.json
+++ b/packages/router-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-cli",
-  "version": "1.45.13",
+  "version": "1.47.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/router-devtools/package.json b/packages/router-devtools/package.json
index 1c31f1056..28e75f324 100644
--- a/packages/router-devtools/package.json
+++ b/packages/router-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools",
-  "version": "1.46.8",
+  "version": "1.46.9",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/router-devtools/src/devtools.tsx b/packages/router-devtools/src/devtools.tsx
index 4903eb9cb..162e14638 100644
--- a/packages/router-devtools/src/devtools.tsx
+++ b/packages/router-devtools/src/devtools.tsx
@@ -640,32 +640,33 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef<
               />
             ) : (
               <div>
-                {(routerState.pendingMatches || routerState.matches).map(
-                  (match, i) => {
-                    return (
+                {(routerState.pendingMatches?.length
+                  ? routerState.pendingMatches
+                  : routerState.matches
+                ).map((match, i) => {
+                  return (
+                    <div
+                      key={match.id || i}
+                      role="button"
+                      aria-label={`Open match details for ${match.id}`}
+                      onClick={() =>
+                        setActiveId(activeId === match.id ? '' : match.id)
+                      }
+                      className={cx(styles.matchRow(match === activeMatch))}
+                    >
                       <div
-                        key={match.id || i}
-                        role="button"
-                        aria-label={`Open match details for ${match.id}`}
-                        onClick={() =>
-                          setActiveId(activeId === match.id ? '' : match.id)
-                        }
-                        className={cx(styles.matchRow(match === activeMatch))}
-                      >
-                        <div
-                          className={cx(
-                            styles.matchIndicator(getStatusColor(match)),
-                          )}
-                        />
-
-                        <code
-                          className={styles.matchID}
-                        >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>
-                        <AgeTicker match={match} router={router} />
-                      </div>
-                    )
-                  },
-                )}
+                        className={cx(
+                          styles.matchIndicator(getStatusColor(match)),
+                        )}
+                      />
+
+                      <code
+                        className={styles.matchID}
+                      >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>
+                      <AgeTicker match={match} router={router} />
+                    </div>
+                  )
+                })}
               </div>
             )}
           </div>
diff --git a/packages/router-generator/package.json b/packages/router-generator/package.json
index 98225ed0f..2b675ea93 100644
--- a/packages/router-generator/package.json
+++ b/packages/router-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-generator",
-  "version": "1.45.7",
+  "version": "1.47.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/router-generator/src/config.ts b/packages/router-generator/src/config.ts
index e9b2d9e55..ca7858462 100644
--- a/packages/router-generator/src/config.ts
+++ b/packages/router-generator/src/config.ts
@@ -13,6 +13,7 @@ export const configSchema = z.object({
   disableTypes: z.boolean().optional().default(false),
   addExtensions: z.boolean().optional().default(false),
   disableLogging: z.boolean().optional().default(false),
+  disableManifestGeneration: z.boolean().optional().default(false),
   routeTreeFileHeader: z
     .array(z.string())
     .optional()
diff --git a/packages/router-generator/src/generator.ts b/packages/router-generator/src/generator.ts
index 2b68e76ef..e4038be0a 100644
--- a/packages/router-generator/src/generator.ts
+++ b/packages/router-generator/src/generator.ts
@@ -626,50 +626,53 @@ export async function generator(config: Config) {
     .filter(Boolean)
     .join('\n\n')
 
-  const routeManifest = JSON.stringify(
-    {
-      routes: {
-        __root__: {
-          filePath: rootRouteNode?.filePath,
-          children: routeTree.map(
-            (d) => getFilePathIdAndRouteIdFromPath(d.routePath!)[1],
+  const createRouteManifest = () =>
+    JSON.stringify(
+      {
+        routes: {
+          __root__: {
+            filePath: rootRouteNode?.filePath,
+            children: routeTree.map(
+              (d) => getFilePathIdAndRouteIdFromPath(d.routePath!)[1],
+            ),
+          },
+          ...Object.fromEntries(
+            routeNodes.map((d) => {
+              const [filePathId, routeId] = getFilePathIdAndRouteIdFromPath(
+                d.routePath!,
+              )
+
+              return [
+                routeId,
+                {
+                  filePath: d.filePath,
+                  parent: d.parent?.routePath
+                    ? getFilePathIdAndRouteIdFromPath(d.parent.routePath)[1]
+                    : undefined,
+                  children: d.children?.map(
+                    (childRoute) =>
+                      getFilePathIdAndRouteIdFromPath(childRoute.routePath!)[1],
+                  ),
+                },
+              ]
+            }),
           ),
         },
-        ...Object.fromEntries(
-          routeNodes.map((d) => {
-            const [filePathId, routeId] = getFilePathIdAndRouteIdFromPath(
-              d.routePath!,
-            )
-
-            return [
-              routeId,
-              {
-                filePath: d.filePath,
-                parent: d.parent?.routePath
-                  ? getFilePathIdAndRouteIdFromPath(d.parent.routePath)[1]
-                  : undefined,
-                children: d.children?.map(
-                  (childRoute) =>
-                    getFilePathIdAndRouteIdFromPath(childRoute.routePath!)[1],
-                ),
-              },
-            ]
-          }),
-        ),
       },
-    },
-    null,
-    2,
-  )
+      null,
+      2,
+    )
 
   const routeConfigFileContent = await prettier.format(
-    [
-      routeImports,
-      '\n',
-      '/* ROUTE_MANIFEST_START',
-      routeManifest,
-      'ROUTE_MANIFEST_END */',
-    ].join('\n'),
+    config.disableManifestGeneration
+      ? routeImports
+      : [
+          routeImports,
+          '\n',
+          '/* ROUTE_MANIFEST_START',
+          createRouteManifest(),
+          'ROUTE_MANIFEST_END */',
+        ].join('\n'),
     {
       semi: config.semicolons,
       singleQuote: config.quoteStyle === 'single',
diff --git a/packages/router-plugin/package.json b/packages/router-plugin/package.json
index 68199f9be..557e92b71 100644
--- a/packages/router-plugin/package.json
+++ b/packages/router-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.46.6",
+  "version": "1.47.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/router-vite-plugin/package.json b/packages/router-vite-plugin/package.json
index 327ab44d1..202506d43 100644
--- a/packages/router-vite-plugin/package.json
+++ b/packages/router-vite-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-vite-plugin",
-  "version": "1.46.6",
+  "version": "1.47.0",
   "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 c349e5546..6c732d410 100644
--- a/packages/start/package.json
+++ b/packages/start/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/start",
-  "version": "1.46.8",
+  "version": "1.47.0",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/start/src/client/StartClient.tsx b/packages/start/src/client/StartClient.tsx
index 2a218ec5e..53a39045c 100644
--- a/packages/start/src/client/StartClient.tsx
+++ b/packages/start/src/client/StartClient.tsx
@@ -1,5 +1,4 @@
 import { RouterProvider } from '@tanstack/react-router'
-import * as React from 'react'
 import { defaultTransformer } from './defaultTransformer'
 import { afterHydrate } from './serialization'
 import type { AnyRouter } from '@tanstack/react-router'
diff --git a/packages/start/src/server/createRequestHandler.ts b/packages/start/src/server/createRequestHandler.ts
index f23178c45..aba2abe60 100644
--- a/packages/start/src/server/createRequestHandler.ts
+++ b/packages/start/src/server/createRequestHandler.ts
@@ -1,4 +1,3 @@
-import { pipeline } from 'node:stream/promises'
 import {
   type AnyRouter,
   type Manifest,
@@ -10,45 +9,43 @@ import {
   serverFnPayloadTypeHeader,
   serverFnReturnTypeHeader,
 } from '../client'
+import { defaultTransformer } from '../client/defaultTransformer'
+import type { HandlerCallback } from './defaultStreamHandler'
 
-export type RequestHandler<TRouter extends AnyRouter> = (ctx: {
-  request: Response
-  response: Response
-  router: TRouter
-  responseHeaders: Headers
-}) => Promise<Response>
-
-export type CustomizeRequestHandler<TRouter extends AnyRouter> = (
-  cb: RequestHandler<TRouter>,
-) => Promise<void>
+export type RequestHandler<TRouter extends AnyRouter> = (
+  cb: HandlerCallback<TRouter>,
+) => Promise<Response>
 
 export function createRequestHandler<TRouter extends AnyRouter>({
   createRouter,
-  req,
-  res,
+  request,
   getRouterManifest,
 }: {
   createRouter: () => TRouter
-  req: any
-  res: any
+  request: Request
   getRouterManifest?: () => Manifest
-}): CustomizeRequestHandler<TRouter> {
+}): RequestHandler<TRouter> {
   return async (cb) => {
-    const href = req.originalUrl
-
-    // Create a history for the router
-    const history = createMemoryHistory({
-      initialEntries: [href],
-    })
-
     const router = createRouter()
 
+    // Inject a few of the SSR helpers and defaults
     router.serializeLoaderData = serializeLoaderData as any
+    router.options.transformer =
+      (router.options as any).transformer || defaultTransformer
 
     if (getRouterManifest) {
       router.manifest = getRouterManifest()
     }
 
+    const url = new URL(request.url, 'http://localhost')
+
+    const href = url.href.replace(url.origin, '')
+
+    // Create a history for the router
+    const history = createMemoryHistory({
+      initialEntries: [href],
+    })
+
     // Update the router with the history and context
     router.update({
       history,
@@ -60,35 +57,11 @@ export function createRequestHandler<TRouter extends AnyRouter>({
       router,
     })
 
-    const requestUrl = new URL(req.originalUrl, 'http://localhost').href
-
-    const response = await cb({
-      request: new Request(requestUrl, {
-        method: req.method,
-        headers: (() => {
-          const headers = new Headers()
-          for (const [key, value] of Object.entries(req.headers)) {
-            headers.append(key, value as any)
-          }
-          return headers
-        })(),
-        body: req.body,
-        redirect: 'manual',
-      }),
+    return cb({
+      request,
       router,
       responseHeaders,
     } as any)
-
-    res.statusMessage = response.statusText
-    res.status(response.status)
-    // Set the response headers
-    response.headers.forEach((value, name) => {
-      res.setHeader(name, value)
-    })
-
-    // Pipe the web response body to the express response
-
-    await pipeline(response.body as any, res)
   }
 }
 
diff --git a/packages/start/src/server/defaultStreamHandler.tsx b/packages/start/src/server/defaultStreamHandler.tsx
index 4850af402..d55dfa919 100644
--- a/packages/start/src/server/defaultStreamHandler.tsx
+++ b/packages/start/src/server/defaultStreamHandler.tsx
@@ -6,13 +6,13 @@ import { StartServer } from './StartServer'
 import { transformStreamWithRouter } from './transformStreamWithRouter'
 import type { AnyRouter } from '@tanstack/react-router'
 
-export type StartHandler<TRouter extends AnyRouter> = (ctx: {
+export type HandlerCallback<TRouter extends AnyRouter> = (ctx: {
   request: Request
   router: TRouter
   responseHeaders: Headers
 }) => Promise<Response>
 
-export const defaultStreamHandler: StartHandler<AnyRouter> = async ({
+export const defaultStreamHandler: HandlerCallback<AnyRouter> = async ({
   request,
   router,
   responseHeaders,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7bc218914..48a33fc95 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1491,32 +1491,17 @@ importers:
         specifier: ^4.3.2
         version: 4.3.2(typescript@5.5.3)(vite@5.3.5(@types/node@20.14.9)(terser@5.31.1))
 
-  examples/react/wip-trpc-react-query:
+  examples/react/with-framer-motion:
     dependencies:
-      '@tanstack/react-query':
-        specifier: ^4.36.1
-        version: 4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tanstack/react-query-devtools':
-        specifier: ^4.36.1
-        version: 4.36.1(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tanstack/react-router':
         specifier: workspace:*
         version: link:../../../packages/react-router
       '@tanstack/router-devtools':
         specifier: workspace:*
         version: link:../../../packages/router-devtools
-      '@trpc/client':
-        specifier: ^10.45.2
-        version: 10.45.2(@trpc/server@10.45.2)
-      '@trpc/react-query':
-        specifier: ^10.45.2
-        version: 10.45.2(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@trpc/server':
-        specifier: ^10.45.2
-        version: 10.45.2
-      express:
-        specifier: ^4.19.2
-        version: 4.19.2
+      framer-motion:
+        specifier: ^11.3.21
+        version: 11.3.21(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       immer:
         specifier: ^10.1.1
         version: 10.1.1
@@ -1542,20 +1527,11 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.3.1
         version: 4.3.1(vite@5.3.5(@types/node@20.14.9)(terser@5.31.1))
-      concurrently:
-        specifier: ^8.2.2
-        version: 8.2.2
-      tsx:
-        specifier: ^4.16.5
-        version: 4.16.5
       vite:
         specifier: ^5.3.5
         version: 5.3.5(@types/node@20.14.9)(terser@5.31.1)
-      wait-port:
-        specifier: ^1.1.0
-        version: 1.1.0
 
-  examples/react/with-framer-motion:
+  examples/react/with-trpc:
     dependencies:
       '@tanstack/react-router':
         specifier: workspace:*
@@ -1563,9 +1539,15 @@ importers:
       '@tanstack/router-devtools':
         specifier: workspace:*
         version: link:../../../packages/router-devtools
-      framer-motion:
-        specifier: ^11.3.21
-        version: 11.3.21(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@trpc/client':
+        specifier: 11.0.0-rc.477
+        version: 11.0.0-rc.477(@trpc/server@11.0.0-rc.477)
+      '@trpc/server':
+        specifier: 11.0.0-rc.477
+        version: 11.0.0-rc.477
+      express:
+        specifier: ^4.19.2
+        version: 4.19.2
       immer:
         specifier: ^10.1.1
         version: 10.1.1
@@ -1591,18 +1573,27 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.3.1
         version: 4.3.1(vite@5.3.5(@types/node@20.14.9)(terser@5.31.1))
+      concurrently:
+        specifier: ^8.2.2
+        version: 8.2.2
+      tsx:
+        specifier: ^4.16.5
+        version: 4.16.5
       vite:
         specifier: ^5.3.5
         version: 5.3.5(@types/node@20.14.9)(terser@5.31.1)
+      wait-port:
+        specifier: ^1.1.0
+        version: 1.1.0
 
-  examples/react/with-trpc:
+  examples/react/with-trpc-react-query:
     dependencies:
       '@tanstack/react-query':
-        specifier: ^4.36.1
-        version: 4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.51.21
+        version: 5.51.21(react@18.3.1)
       '@tanstack/react-query-devtools':
-        specifier: ^4.36.1
-        version: 4.36.1(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^5.51.21
+        version: 5.51.21(@tanstack/react-query@5.51.21(react@18.3.1))(react@18.3.1)
       '@tanstack/react-router':
         specifier: workspace:*
         version: link:../../../packages/react-router
@@ -1610,14 +1601,14 @@ importers:
         specifier: workspace:*
         version: link:../../../packages/router-devtools
       '@trpc/client':
-        specifier: ^10.45.2
-        version: 10.45.2(@trpc/server@10.45.2)
+        specifier: 11.0.0-rc.477
+        version: 11.0.0-rc.477(@trpc/server@11.0.0-rc.477)
       '@trpc/react-query':
-        specifier: ^10.45.2
-        version: 10.45.2(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 11.0.0-rc.477
+        version: 11.0.0-rc.477(@tanstack/react-query@5.51.21(react@18.3.1))(@trpc/client@11.0.0-rc.477(@trpc/server@11.0.0-rc.477))(@trpc/server@11.0.0-rc.477)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@trpc/server':
-        specifier: ^10.45.2
-        version: 10.45.2
+        specifier: 11.0.0-rc.477
+        version: 11.0.0-rc.477
       express:
         specifier: ^4.19.2
         version: 4.19.2
@@ -4156,44 +4147,18 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@tanstack/match-sorter-utils@8.11.3':
-    resolution: {integrity: sha512-2XVYTN6fLFyeIPywDL/HGKIQce3V6oUch1FHweGwxruPKEXip6Z9qg+zWZwNE26WG6CktqJh6NqTq90a42jeEw==}
-    engines: {node: '>=12'}
-
-  '@tanstack/query-core@4.36.1':
-    resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==}
-
   '@tanstack/query-core@5.51.21':
     resolution: {integrity: sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==}
 
   '@tanstack/query-devtools@5.51.16':
     resolution: {integrity: sha512-ajwuq4WnkNCMj/Hy3KR8d3RtZ6PSKc1dD2vs2T408MdjgKzQ3klVoL6zDgVO7X+5jlb5zfgcO3thh4ojPhfIaw==}
 
-  '@tanstack/react-query-devtools@4.36.1':
-    resolution: {integrity: sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==}
-    peerDependencies:
-      '@tanstack/react-query': ^4.36.1
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   '@tanstack/react-query-devtools@5.51.21':
     resolution: {integrity: sha512-mi5ef8dvsS48GsG6/8M60O2EgrzPK1kNPngOcHBTlIUrB5dGkxP9fuHf05GQRxtSp5W5GlyeUpzOmtkKNpf9dQ==}
     peerDependencies:
       '@tanstack/react-query': ^5.51.21
       react: ^18 || ^19
 
-  '@tanstack/react-query@4.36.1':
-    resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-
   '@tanstack/react-query@5.51.21':
     resolution: {integrity: sha512-Q/V81x3sAYgCsxjwOkfLXfrmoG+FmDhLeHH5okC/Bp8Aaw2c33lbEo/mMcMnkxUPVtB2FLpzHT0tq3c+OlZEbw==}
     peerDependencies:
@@ -4240,22 +4205,22 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@trpc/client@10.45.2':
-    resolution: {integrity: sha512-ykALM5kYWTLn1zYuUOZ2cPWlVfrXhc18HzBDyRhoPYN0jey4iQHEFSEowfnhg1RvYnrAVjNBgHNeSAXjrDbGwg==}
+  '@trpc/client@11.0.0-rc.477':
+    resolution: {integrity: sha512-Ah/Er3vxTm2bIEUcIrike7Z/8Yc+DkFveU2ZHQQ0+zY7yxs931438+4OEJuY/Xl/0p5OTDeZTm6HBuZ1REFiyA==}
     peerDependencies:
-      '@trpc/server': 10.45.2
+      '@trpc/server': 11.0.0-rc.477+a467f8314
 
-  '@trpc/react-query@10.45.2':
-    resolution: {integrity: sha512-BAqb9bGZIscroradlNx+Cc9522R+idY3BOSf5z0jHUtkxdMbjeGKxSSMxxu7JzoLqSIEC+LVzL3VvF8sdDWaZQ==}
+  '@trpc/react-query@11.0.0-rc.477':
+    resolution: {integrity: sha512-1ZCAm0wv7yLmb3muq+5DTRxdKXzI1KjTrcM2+QRKCFu6EherGM8x6zGI36P9ZmC6o+SCoedzxqazDNe+kkqVqA==}
     peerDependencies:
-      '@tanstack/react-query': ^4.18.0
-      '@trpc/client': 10.45.2
-      '@trpc/server': 10.45.2
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
+      '@tanstack/react-query': ^5.49.2
+      '@trpc/client': 11.0.0-rc.477+a467f8314
+      '@trpc/server': 11.0.0-rc.477+a467f8314
+      react: '>=18.2.0'
+      react-dom: '>=18.2.0'
 
-  '@trpc/server@10.45.2':
-    resolution: {integrity: sha512-wOrSThNNE4HUnuhJG6PfDRp4L2009KDVxsd+2VYH8ro6o/7/jwYZ8Uu5j+VaW+mOmc8EHerHzGcdbGNQSAUPgg==}
+  '@trpc/server@11.0.0-rc.477':
+    resolution: {integrity: sha512-K6zmjRv96fWilqm/ETehEK1DWsy5bSyrs2xbsNzCbjguMgamMhOClRHgYzJcwgLp2kasJ7QgD9YbahOhV1/u1w==}
 
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
@@ -8006,9 +7971,6 @@ packages:
   remeda@2.7.0:
     resolution: {integrity: sha512-7q7Xthw/C6uZBk8W5BfXpp/8IjaP51IPUrBVRfSZ3GB9dZMZJEAwYmVxA+TptDmhwlGRw8jUqoo4hL5zU0aV5Q==}
 
-  remove-accents@0.4.2:
-    resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==}
-
   renderkid@3.0.0:
     resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==}
 
@@ -8415,10 +8377,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  superjson@1.11.0:
-    resolution: {integrity: sha512-6PfAg1FKhqkwWvPb2uXhH4MkMttdc17eJ91+Aoz4s1XUEDZFmLfFx/xVA3wgkPxAGy5dpozgGdK6V/n20Wj9yg==}
-    engines: {node: '>=10'}
-
   superjson@2.2.1:
     resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
     engines: {node: '>=16'}
@@ -11529,39 +11487,16 @@ snapshots:
       - typescript
       - vite
 
-  '@tanstack/match-sorter-utils@8.11.3':
-    dependencies:
-      remove-accents: 0.4.2
-
-  '@tanstack/query-core@4.36.1': {}
-
   '@tanstack/query-core@5.51.21': {}
 
   '@tanstack/query-devtools@5.51.16': {}
 
-  '@tanstack/react-query-devtools@4.36.1(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/match-sorter-utils': 8.11.3
-      '@tanstack/react-query': 4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      superjson: 1.11.0
-      use-sync-external-store: 1.2.2(react@18.3.1)
-
   '@tanstack/react-query-devtools@5.51.21(@tanstack/react-query@5.51.21(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/query-devtools': 5.51.16
       '@tanstack/react-query': 5.51.21(react@18.3.1)
       react: 18.3.1
 
-  '@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/query-core': 4.36.1
-      react: 18.3.1
-      use-sync-external-store: 1.2.2(react@18.3.1)
-    optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
-
   '@tanstack/react-query@5.51.21(react@18.3.1)':
     dependencies:
       '@tanstack/query-core': 5.51.21
@@ -11616,19 +11551,19 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
-  '@trpc/client@10.45.2(@trpc/server@10.45.2)':
+  '@trpc/client@11.0.0-rc.477(@trpc/server@11.0.0-rc.477)':
     dependencies:
-      '@trpc/server': 10.45.2
+      '@trpc/server': 11.0.0-rc.477
 
-  '@trpc/react-query@10.45.2(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@trpc/react-query@11.0.0-rc.477(@tanstack/react-query@5.51.21(react@18.3.1))(@trpc/client@11.0.0-rc.477(@trpc/server@11.0.0-rc.477))(@trpc/server@11.0.0-rc.477)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/react-query': 4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@trpc/client': 10.45.2(@trpc/server@10.45.2)
-      '@trpc/server': 10.45.2
+      '@tanstack/react-query': 5.51.21(react@18.3.1)
+      '@trpc/client': 11.0.0-rc.477(@trpc/server@11.0.0-rc.477)
+      '@trpc/server': 11.0.0-rc.477
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@trpc/server@10.45.2': {}
+  '@trpc/server@11.0.0-rc.477': {}
 
   '@tybys/wasm-util@0.9.0':
     dependencies:
@@ -16025,8 +15960,6 @@ snapshots:
     dependencies:
       type-fest: 4.23.0
 
-  remove-accents@0.4.2: {}
-
   renderkid@3.0.0:
     dependencies:
       css-select: 4.3.0
@@ -16496,10 +16429,6 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  superjson@1.11.0:
-    dependencies:
-      copy-anything: 3.0.2
-
   superjson@2.2.1:
     dependencies:
       copy-anything: 3.0.2


Test patch:
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 9ccf2c608..9bf54202b 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -5,6 +5,7 @@ import {
   configure,
   fireEvent,
   render,
+  renderHook,
   screen,
   waitFor,
 } from '@testing-library/react'
@@ -24,6 +25,7 @@ import {
   useMatchRoute,
   useParams,
   useRouteContext,
+  useRouterState,
   useSearch,
 } from '../src'
 import { getIntersectionObserverMock } from './utils'
@@ -46,6 +48,72 @@ afterEach(() => {
 })
 
 describe('Link', () => {
+  test('when using renderHook it returns a hook with same content to prove rerender works', async () => {
+    /**
+     * This is the hook that will be testet.
+     *
+     * @returns custom state
+     */
+    const useLocationFromState = () => {
+      const { location } = useRouterState()
+
+      // could return anything just to prove it will work.
+      const memoLocation = React.useMemo(() => {
+        return {
+          href: location.href,
+          pathname: location.pathname,
+        }
+      }, [location.href, location.pathname])
+
+      return memoLocation
+    }
+
+    const IndexComponent = ({ children }: { children: React.ReactNode }) => {
+      return <h1 data-testid="testId">{children}</h1>
+    }
+    const RouterContainer = ({ children }: { children: React.ReactNode }) => {
+      const childrenRef = React.useRef(children)
+      const memoedRouteTree = React.useMemo(() => {
+        const rootRoute = createRootRoute()
+        const indexRoute = createRoute({
+          getParentRoute: () => rootRoute,
+          path: '/',
+          component: () => (
+            <IndexComponent>{childrenRef.current}</IndexComponent>
+          ),
+        })
+        return rootRoute.addChildren([indexRoute])
+      }, [])
+
+      const memoedRouter = React.useMemo(() => {
+        const router = createRouter({
+          routeTree: memoedRouteTree,
+        })
+
+        return router
+      }, [memoedRouteTree])
+      return <RouterProvider router={memoedRouter} />
+    }
+
+    const { result, rerender } = renderHook(
+      () => {
+        return useLocationFromState()
+      },
+      { wrapper: RouterContainer },
+    )
+    await waitFor(() => expect(screen.getByTestId('testId')).toBeVisible())
+    expect(result.current).toBeTruthy()
+
+    const original = result.current
+
+    rerender()
+
+    await waitFor(() => expect(screen.getByTestId('testId')).toBeVisible())
+    const updated = result.current
+
+    expect(original).toBe(updated)
+  })
+
   test('when a Link is disabled', async () => {
     const rootRoute = createRootRoute()
     const indexRoute = createRoute({
diff --git a/packages/router-generator/tests/generator.test.ts b/packages/router-generator/tests/generator.test.ts
index c4bb0c5e5..218c1bda3 100644
--- a/packages/router-generator/tests/generator.test.ts
+++ b/packages/router-generator/tests/generator.test.ts
@@ -44,6 +44,9 @@ function rewriteConfigByFolderName(folderName: string, config: Config) {
       config.routeTreeFileHeader = ['// prepend1', '// prepend2']
       config.routeTreeFileFooter = ['// append1', '// append2']
       break
+    case 'no-manifest':
+      config.disableManifestGeneration = true
+      break
     default:
       break
   }
diff --git a/packages/router-generator/tests/generator/no-manifest/routeTree.snapshot.ts b/packages/router-generator/tests/generator/no-manifest/routeTree.snapshot.ts
new file mode 100644
index 000000000..042241cd8
--- /dev/null
+++ b/packages/router-generator/tests/generator/no-manifest/routeTree.snapshot.ts
@@ -0,0 +1,41 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren({ IndexRoute })
+
+/* prettier-ignore-end */
diff --git a/packages/router-generator/tests/generator/no-manifest/routes/__root.tsx b/packages/router-generator/tests/generator/no-manifest/routes/__root.tsx
new file mode 100644
index 000000000..ab504e42e
--- /dev/null
+++ b/packages/router-generator/tests/generator/no-manifest/routes/__root.tsx
@@ -0,0 +1,1 @@
+/** */
diff --git a/packages/router-generator/tests/generator/no-manifest/routes/index.tsx b/packages/router-generator/tests/generator/no-manifest/routes/index.tsx
new file mode 100644
index 000000000..ab504e42e
--- /dev/null
+++ b/packages/router-generator/tests/generator/no-manifest/routes/index.tsx
@@ -0,0 +1,1 @@
+/** */
diff --git a/packages/start/src/server/createStartHandler.ts b/packages/start/src/server/createStartHandler.ts
index a8950790f..ebd0e699b 100644
--- a/packages/start/src/server/createStartHandler.ts
+++ b/packages/start/src/server/createStartHandler.ts
@@ -17,10 +17,10 @@ import {
   serverFnReturnTypeHeader,
 } from '../constants'
 import { defaultTransformer } from '../client/defaultTransformer'
-import type { StartHandler } from './defaultStreamHandler'
+import type { HandlerCallback } from './defaultStreamHandler'
 
 export type CustomizeStartHandler<TRouter extends AnyRouter> = (
-  cb: StartHandler<TRouter>,
+  cb: HandlerCallback<TRouter>,
 ) => EventHandler
 
 export function createStartHandler<TRouter extends AnyRouter>({