Merge branch 'main' into main

.gitignore

@@ -18,6 +18,7 @@ artifacts
 .rpt2_cache
 coverage
 *.tgz
+.wrangler
 
 # tests
 packages/router-generator/tests/**/*.gen.ts

README.md

@@ -28,6 +28,27 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Quer
 
 ## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more!
 
+## Partners
+
+<div><a href="https://vercel.com?utm_source=tanstack">
+  <img alt="Vercel" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/vercel.svg" height="40"
+</a></div><br />
+<div><a href="https://go.clerk.com/wOwHtuJ">
+  <img alt="Clerk" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/clerk.svg" height="40"
+</a></div><br />
+<div><a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable">
+  <img alt="AG Grid" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/ag-grid.svg" height="40"
+</a></div><br />
+<div><a href="https://convex.dev?utm_source=tanstack">
+  <img alt="Convex" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/convex.svg" height="40"
+</a></div><br />
+<div><a href="https://sentry.io?utm_source=tanstack">
+  <img alt="Sentry" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/sentry.svg" height="40"
+</a></div><br />
+<div><a href="https://nozzle.io/?utm_source=tanstack&utm_campaign=tanstack">
+  <img alt="Nozzle.io" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/nozzle.svg" height="40"
+</a></div><br />
+
 ## Quick Features
 
 - 100% TypeSafe

docs/config.json

@@ -168,6 +168,57 @@
         }
       ]
     },
+    {
+      "label": "Start",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "Overview",
+              "to": "framework/react/start/overview"
+            },
+            {
+              "label": "Getting Started",
+              "to": "framework/react/start/getting-started"
+            },
+            {
+              "label": "Server Functions",
+              "to": "framework/react/start/server-functions"
+            },
+            {
+              "label": "API Routes",
+              "to": "framework/react/start/api-routes"
+            },
+            {
+              "label": "SSR",
+              "to": "framework/react/start/ssr"
+            },
+            {
+              "label": "Hosting",
+              "to": "framework/react/start/hosting"
+            },
+            {
+              "label": "Authentication",
+              "to": "framework/react/start/authentication"
+            },
+            {
+              "label": "Databases",
+              "to": "framework/react/start/databases"
+            },
+            {
+              "label": "Observability",
+              "to": "framework/react/start/observability"
+            },
+            {
+              "label": "Static Prerendering",
+              "to": "framework/react/start/static-prerendering"
+            }
+          ]
+        }
+      ]
+    },
     {
       "label": "API",
       "children": [],
@@ -184,7 +235,7 @@
       ]
     },
     {
-      "label": "Examples",
+      "label": "Router Examples",
       "children": [],
       "frameworks": [
         {
@@ -198,14 +249,6 @@
               "label": "Quickstart (code-based)",
               "to": "framework/react/examples/quickstart"
             },
-            {
-              "label": "Start Basic",
-              "to": "framework/react/examples/start-basic"
-            },
-            {
-              "label": "Start Basic (RSC)",
-              "to": "framework/react/examples/start-basic-rsc"
-            },
             {
               "label": "Basic (file-based)",
               "to": "framework/react/examples/basic-file-based"
@@ -277,6 +320,41 @@
           ]
         }
       ]
+    },
+    {
+      "label": "Start Examples",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "Basic",
+              "to": "framework/react/examples/start-basic"
+            },
+            {
+              "label": "Basic + React Query",
+              "to": "framework/react/examples/start-basic-react-query"
+            },
+            {
+              "label": "Basic + Clerk Auth",
+              "to": "framework/react/examples/start-clerk-basic"
+            },
+            {
+              "label": "Basic + DIY Auth",
+              "to": "framework/react/examples/start-basic-auth"
+            },
+            {
+              "label": "Trellaux + Convex",
+              "to": "framework/react/examples/start-convex-trellaux"
+            },
+            {
+              "label": "Trellaux",
+              "to": "framework/react/examples/start-trellaux"
+            }
+          ]
+        }
+      ]
     }
   ]
 }

docs/framework/react/api/router/RouteMatchType.md

@@ -20,7 +20,6 @@ interface RouteMatch {
   updatedAt: number
   loadPromise?: Promise<void>
   loaderData?: Route['loaderData']
-  routeContext: Route['routeContext']
   context: Route['allContext']
   search: Route['fullSearchSchema']
   fetchedAt: number

docs/framework/react/api/router/RouteOptionsType.md

@@ -231,10 +231,10 @@ type loaderDeps = (opts: { search: TFullSearchSchema }) => Record<string, any>
 
 ### `onError` property
 
-- Type: `(error: unknown) => void`
+- Type: `(error: any) => void`
 - Optional
 - A function that will be called when an error is thrown during a navigation or preload event.
-- If this function returns a `redirect` object, the redirect will be applied immediately.
+- If this function throws a [`redirect`](./redirectFunction.md), then the router will process and apply the redirect immediately.
 
 ### `onEnter` property
 

docs/framework/react/api/router/RouterOptionsType.md

@@ -126,6 +126,14 @@ The `RouterOptions` type accepts an object with the following properties and met
 - Optional
 - The default `onCatch` handler for errors caught by the Router ErrorBoundary
 
+### `defaultViewTransition` property
+
+- Type: `boolean`
+- Optional
+- If `true`, route navigations will called using `document.startViewTransition()`.
+- If the browser does not support this api, this option will be ignored.
+- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.
+
 ### `caseSensitive` property
 
 - Type: `boolean`
@@ -176,7 +184,8 @@ The `RouterOptions` type accepts an object with the following properties and met
 - Type: `React.Component`
 - Optional
 - A component that will be used to wrap the entire router. This is useful for providing a context to the entire router. Only non-DOM-rendering components like providers should be used, anything else will cause a hydration error.
-  **Example**
+
+**Example**
 
 ```tsx
 import { createRouter } from '@tanstack/react-router'
@@ -214,8 +223,16 @@ const router = createRouter({
 })
 ```
 
+### `notFoundMode` property
+
+- Type: `'root' | 'fuzzy'`
+- Optional
+- Defaults to `'fuzzy'`
+- This property controls how TanStack Router will handle scenarios where it cannot find a route to match the current location. See the [Not Found Errors guide](../../guide/not-found-errors.md) for more information.
+
 ### `notFoundRoute` property
 
+- **Deprecated**
 - Type: `NotFoundRoute`
 - Optional
 - A route that will be used as the default not found route for every branch of the route tree. This can be overridden on a per-branch basis by providing a not found route to the `NotFoundRoute` option on the root route of the branch.

docs/framework/react/api/router/useBlockerHook.md

@@ -42,7 +42,7 @@ function MyComponent() {
   const [formIsDirty, setFormIsDirty] = useState(false)
 
   useBlocker({
-    blockerfn: () => window.confirm('Are you sure you want to leave?'),
+    blockerFn: () => window.confirm('Are you sure you want to leave?'),
     condition: formIsDirty,
   })
 

docs/framework/react/guide/code-based-routing.md

@@ -12,28 +12,106 @@ title: Code-Based Routing
 
 Code-based routing is no different from file-based routing in that it uses the same route tree concept to organize, match and compose matching routes into a component tree. The only difference is that instead of using the filesystem to organize your routes, you use code.
 
-Let's consider the same route tree from the [Route Trees & Nesting](./route-trees.md#route-trees) guide, but from a code-based perspective:
-
-- _Root_
-  - `/`
-  - `about`
-  - `posts`
-    - `/`
-    - `$postId`
-  - `posts/$postId/edit`
-  - `settings`
-    - `profile`
-    - `notifications`
-  - `layout`
-    - `layout-a`
-    - `layout-b`
-  - `files`
-    - `$`
-- _Not-Found Route_
+Let's consider the same route tree from the [Route Trees & Nesting](./route-trees.md#route-trees) guide, and convert it to code-based routing:
+
+Here is the file-based version:
+
+```
+routes/
+├── __root.tsx
+├── index.tsx
+├── about.tsx
+├── posts/
+│   ├── index.tsx
+│   ├── $postId.tsx
+├── posts.$postId.edit.tsx
+├── settings/
+│   ├── profile.tsx
+│   ├── notifications.tsx
+├── _layout.tsx
+├── _layout/
+│   ├── layout-a.tsx
+├── ├── layout-b.tsx
+├── files/
+│   ├── $.tsx
+```
+
+And here is a summarized code-based version:
+
+```tsx
+import { createRootRoute, createRoute } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute()
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'about',
+})
+
+const postsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+})
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '/',
+})
+
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+})
+
+const postEditorRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts/$postId/edit',
+})
+
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'settings',
+})
+
+const profileRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'profile',
+})
+
+const notificationsRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: 'notifications',
+})
+
+const layoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'layout',
+})
+
+const layoutARoute = createRoute({
+  getParentRoute: () => layoutRoute,
+  path: 'layout-a',
+})
+
+const layoutBRoute = createRoute({
+  getParentRoute: () => layoutRoute,
+  path: 'layout-b',
+})
+
+const filesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'files/$',
+})
+```
 
 ## File-Based vs Code-Based Routing
 
-Notice how the route tree is exactly the same as the file-based route tree? Believe it or not, file-based routing is really a superset of code-based routing and at the end of the day, file-based routing is just code-based routing with a filesystem and code-generation abstraction on top of it.
+Believe it or not, file-based routing is really a superset of code-based routing and uses the filesystem and a bit of code-generation abstraction on top of it to generate this structure you see above automatically.
 
 We're going to assume you've read the [File-Based Routing](./file-based-routing.md) guide and are familiar with each of these main concepts: