Merge branch 'main' into add-usehistorystate

Author: naoya7076

docs/router/eslint/eslint-plugin-router.md

@@ -103,3 +103,32 @@ Alternatively, add `@tanstack/eslint-plugin-router` to the plugins section, and
 The following rules are available in the TanStack Router ESLint Plugin:
 
 - [@tanstack/router/create-route-property-order](../create-route-property-order.md)
+
+## Conflicts with other ESLint plugins
+
+If you have other ESLint plugins installed, they may rules that conflict with this plugin. If so, you'll need to make some tweaks to allow these plugins to work together.
+
+### `typescript-eslint`
+
+The [`@typescript-eslint/only-throw-error`](https://typescript-eslint.io/rules/only-throw-error/) rule, enabled by default in the `recommended-type-checked` and `strict-type-checked` rulesets, disallows the throwing of non-Error values as exceptions, which is considered a good practice.
+
+To make sure it that it does not conflict with TanStack Router, you should add `redirect` to the allowed as a throwable objects.
+
+```json
+{
+  "rules": {
+    "@typescript-eslint/only-throw-error": [
+      "error",
+      {
+        "allow": [
+          {
+            "from": "package",
+            "package": "@tanstack/router-core",
+            "name": "Redirect"
+          }
+        ]
+      }
+    ]
+  }
+}
+```

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

@@ -11,33 +11,40 @@ export type NotFoundError = {
   data?: any
   throw?: boolean
   routeId?: string
+  headers?: HeadersInit
 }
 ```
 
 ## NotFoundError properties
 
 The `NotFoundError` object accepts/contains the following properties:
 
+### `global` property (⚠️ deprecated, use `routeId: rootRouteId` instead)
+
+- Type: `boolean`
+- Optional - `default: false`
+- If true, the not-found error will be handled by the `notFoundComponent` of the root route instead of bubbling up from the route that threw it. This has the same behavior as importing the root route and calling `RootRoute.notFound()`.
+
 ### `data` property
 
 - Type: `any`
 - Optional
 - Custom data that is passed into to `notFoundComponent` when the not-found error is handled
 
-### `global` property
+### `throw` property
 
 - Type: `boolean`
 - Optional - `default: false`
-- If true, the not-found error will be handled by the `notFoundComponent` of the root route instead of bubbling up from the route that threw it. This has the same behavior as importing the root route and calling `RootRoute.notFound()`.
+- If provided, will throw the not-found object instead of returning it. This can be useful in places where `throwing` in a function might cause it to have a return type of `never`. In that case, you can use `notFound({ throw: true })` to throw the not-found object instead of returning it.
 
 ### `route` property
 
 - Type: `string`
 - Optional
 - The ID of the route that will attempt to handle the not-found error. If the route does not have a `notFoundComponent`, the error will bubble up to the parent route (and be handled by the root route if necessary). By default, TanStack Router will attempt to handle the not-found error with the route that threw it.
 
-### `throw` property
+### `headers` property
 
-- Type: `boolean`
-- Optional - `default: false`
-- If provided, will throw the not-found object instead of returning it. This can be useful in places where `throwing` in a function might cause it to have a return type of `never`. In that case, you can use `notFound({ throw: true })` to throw the not-found object instead of returning it.
+- Type: `HeadersInit`
+- Optional
+- HTTP headers to be included when the not-found error is handled on the server side.

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

@@ -18,7 +18,6 @@ interface RouteMatch {
   paramsError: unknown
   searchError: unknown
   updatedAt: number
-  loadPromise?: Promise<void>
   loaderData?: Route['loaderData']
   context: Route['allContext']
   search: Route['fullSearchSchema']

docs/router/framework/react/faq.md

@@ -6,7 +6,7 @@ Welcome to the TanStack Router FAQ! Here you'll find answers to common questions
 
 ## Should I commit my `routeTree.gen.ts` file into git?
 
-Yes! Although the route tree file (i.e. `routeTree.gen.ts`) is generated by the TanStack Router, it is essentially towards the runtime of your application. It is not a build artifact. The route tree file is a critical part of your application's source code, and it is used by the TanStack Router to build your application's routes at runtime.
+Yes! Although the route tree file (i.e., `routeTree.gen.ts`) is generated by TanStack Router, it is essentially part of your application’s runtime, not a build artifact. The route tree file is a critical part of your application’s source code, and it is used by TanStack Router to build your application’s routes at runtime.
 
 You should commit this file into git so that other developers can use it to build your application.
 

docs/start/framework/react/getting-started.md

@@ -5,7 +5,6 @@ title: Getting Started
 
 To set up a TanStack Start project, you can:
 
-<!-- - Use the [TanStack Start CLI](https://github.com/tanstack/start/tree/main/packages/start-cli) to generate a new project and learn as you go -->
-
+- Use the [TanStack Start CLI](https://github.com/TanStack/create-tsrouter-app/blob/main/cli/create-start-app/README.md) via `npx create-start-app@latest`
 - Use the [Quick Start Examples](../quick-start) to rapidly learn as you go
 - [Build a project from scratch](../build-from-scratch) to learn how TanStack Start works from the ground up

docs/start/framework/react/static-prerendering.md

@@ -40,7 +40,7 @@ export default defineConfig({
         retryDelay: 1000,
 
         // Callback when page is successfully rendered
-        onSuccess: (page) => {
+        onSuccess: ({ page }) => {
           console.log(`Rendered ${page.path}!`)
         },
       },

e2e/react-router/basic-file-based/src/routeTree.gen.ts

@@ -12,9 +12,12 @@ import { createFileRoute } from '@tanstack/react-router'
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as Char45824Char54620Char48124Char44397RouteImport } from './routes/대한민국'
+import { Route as RemountDepsRouteImport } from './routes/remountDeps'
 import { Route as PostsRouteImport } from './routes/posts'
+import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps'
 import { Route as EditingBRouteImport } from './routes/editing-b'
 import { Route as EditingARouteImport } from './routes/editing-a'
+import { Route as ComponentTypesTestRouteImport } from './routes/component-types-test'
 import { Route as AnchorRouteImport } from './routes/anchor'
 import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as SearchParamsRouteRouteImport } from './routes/search-params/route'
@@ -65,11 +68,21 @@ const Char45824Char54620Char48124Char44397Route =
     path: '/대한민국',
     getParentRoute: () => rootRouteImport,
   } as any)
+const RemountDepsRoute = RemountDepsRouteImport.update({
+  id: '/remountDeps',
+  path: '/remountDeps',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PostsRoute = PostsRouteImport.update({
   id: '/posts',
   path: '/posts',
   getParentRoute: () => rootRouteImport,
 } as any)
+const NotRemountDepsRoute = NotRemountDepsRouteImport.update({
+  id: '/notRemountDeps',
+  path: '/notRemountDeps',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const EditingBRoute = EditingBRouteImport.update({
   id: '/editing-b',
   path: '/editing-b',
@@ -80,6 +93,11 @@ const EditingARoute = EditingARouteImport.update({
   path: '/editing-a',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ComponentTypesTestRoute = ComponentTypesTestRouteImport.update({
+  id: '/component-types-test',
+  path: '/component-types-test',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AnchorRoute = AnchorRouteImport.update({
   id: '/anchor',
   path: '/anchor',
@@ -276,9 +294,12 @@ export interface FileRoutesByFullPath {
   '/': typeof groupLayoutRouteWithChildren
   '/search-params': typeof SearchParamsRouteRouteWithChildren
   '/anchor': typeof AnchorRoute
+  '/component-types-test': typeof ComponentTypesTestRoute
   '/editing-a': typeof EditingARoute
   '/editing-b': typeof EditingBRoute
+  '/notRemountDeps': typeof NotRemountDepsRoute
   '/posts': typeof PostsRouteWithChildren
+  '/remountDeps': typeof RemountDepsRoute
   '/대한민국': typeof Char45824Char54620Char48124Char44397Route
   '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
   '/inside': typeof groupInsideRoute
@@ -315,8 +336,11 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof groupLayoutRouteWithChildren
   '/anchor': typeof AnchorRoute
+  '/component-types-test': typeof ComponentTypesTestRoute
   '/editing-a': typeof EditingARoute
   '/editing-b': typeof EditingBRoute
+  '/notRemountDeps': typeof NotRemountDepsRoute
+  '/remountDeps': typeof RemountDepsRoute
   '/대한민국': typeof Char45824Char54620Char48124Char44397Route
   '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
   '/inside': typeof groupInsideRoute
@@ -355,9 +379,12 @@ export interface FileRoutesById {
   '/search-params': typeof SearchParamsRouteRouteWithChildren
   '/_layout': typeof LayoutRouteWithChildren
   '/anchor': typeof AnchorRoute
+  '/component-types-test': typeof ComponentTypesTestRoute
   '/editing-a': typeof EditingARoute
   '/editing-b': typeof EditingBRoute
+  '/notRemountDeps': typeof NotRemountDepsRoute
   '/posts': typeof PostsRouteWithChildren
+  '/remountDeps': typeof RemountDepsRoute
   '/대한민국': typeof Char45824Char54620Char48124Char44397Route
   '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
   '/(group)': typeof groupRouteWithChildren
@@ -400,9 +427,12 @@ export interface FileRouteTypes {
     | '/'
     | '/search-params'
     | '/anchor'
+    | '/component-types-test'
     | '/editing-a'
     | '/editing-b'
+    | '/notRemountDeps'
     | '/posts'
+    | '/remountDeps'
     | '/대한민국'
     | '/onlyrouteinside'
     | '/inside'
@@ -439,8 +469,11 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/anchor'
+    | '/component-types-test'
     | '/editing-a'
     | '/editing-b'
+    | '/notRemountDeps'
+    | '/remountDeps'
     | '/대한민국'
     | '/onlyrouteinside'
     | '/inside'
@@ -478,9 +511,12 @@ export interface FileRouteTypes {
     | '/search-params'
     | '/_layout'
     | '/anchor'
+    | '/component-types-test'
     | '/editing-a'
     | '/editing-b'
+    | '/notRemountDeps'
     | '/posts'
+    | '/remountDeps'
     | '/대한민국'
     | '/(another-group)/onlyrouteinside'
     | '/(group)'
@@ -523,9 +559,12 @@ export interface RootRouteChildren {
   SearchParamsRouteRoute: typeof SearchParamsRouteRouteWithChildren
   LayoutRoute: typeof LayoutRouteWithChildren
   AnchorRoute: typeof AnchorRoute
+  ComponentTypesTestRoute: typeof ComponentTypesTestRoute
   EditingARoute: typeof EditingARoute
   EditingBRoute: typeof EditingBRoute
+  NotRemountDepsRoute: typeof NotRemountDepsRoute
   PostsRoute: typeof PostsRouteWithChildren
+  RemountDepsRoute: typeof RemountDepsRoute
   Char45824Char54620Char48124Char44397Route: typeof Char45824Char54620Char48124Char44397Route
   anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute
   groupRoute: typeof groupRouteWithChildren
@@ -564,13 +603,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/remountDeps': {
+      id: '/remountDeps'
+      path: '/remountDeps'
+      fullPath: '/remountDeps'
+      preLoaderRoute: typeof RemountDepsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/posts': {
       id: '/posts'
       path: '/posts'
       fullPath: '/posts'
       preLoaderRoute: typeof PostsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/notRemountDeps': {
+      id: '/notRemountDeps'
+      path: '/notRemountDeps'
+      fullPath: '/notRemountDeps'
+      preLoaderRoute: typeof NotRemountDepsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/editing-b': {
       id: '/editing-b'
       path: '/editing-b'
@@ -585,6 +638,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof EditingARouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/component-types-test': {
+      id: '/component-types-test'
+      path: '/component-types-test'
+      fullPath: '/component-types-test'
+      preLoaderRoute: typeof ComponentTypesTestRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/anchor': {
       id: '/anchor'
       path: '/anchor'
@@ -946,9 +1006,12 @@ const rootRouteChildren: RootRouteChildren = {
   SearchParamsRouteRoute: SearchParamsRouteRouteWithChildren,
   LayoutRoute: LayoutRouteWithChildren,
   AnchorRoute: AnchorRoute,
+  ComponentTypesTestRoute: ComponentTypesTestRoute,
   EditingARoute: EditingARoute,
   EditingBRoute: EditingBRoute,
+  NotRemountDepsRoute: NotRemountDepsRoute,
   PostsRoute: PostsRouteWithChildren,
+  RemountDepsRoute: RemountDepsRoute,
   Char45824Char54620Char48124Char44397Route:
     Char45824Char54620Char48124Char44397Route,
   anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute,

e2e/react-router/basic-file-based/src/routes/component-types-test.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+// Test route for type safety of different component types
+// This test should
+// - check that `false` can be set on the `errorComponent`
+// ...without causing build-time TypeScript errors
+export const Route = createFileRoute('/component-types-test')({
+  component: () => <div>Testing test types</div>,
+  errorComponent: false, // Should not cause TypeScript error
+  pendingComponent: undefined, // Should not cause TypeScript error
+  notFoundComponent: undefined, // Should not cause TypeScript error
+})

e2e/react-router/basic-file-based/src/routes/notRemountDeps.tsx

@@ -0,0 +1,44 @@
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+
+export const Route = createFileRoute('/notRemountDeps')({
+  validateSearch(search: { searchParam: string }) {
+    return { searchParam: search.searchParam }
+  },
+  loaderDeps(opts) {
+    return opts.search
+  },
+  component: Home,
+  remountDeps(opts) {
+    return opts.params
+  },
+})
+
+let counter = 0
+
+function Home() {
+  const search = Route.useSearch()
+  const navigate = Route.useNavigate()
+
+  const [mounts, setMounts] = React.useState(counter)
+  React.useEffect(() => {
+    setMounts(++counter)
+  }, [])
+
+  return (
+    <div className="p-2">
+      <button
+        onClick={() => {
+          navigate({
+            search: { searchParam: Math.random().toString(36).substring(2, 8) },
+          })
+        }}
+      >
+        Regenerate search param
+      </button>
+
+      <div>Search: {search.searchParam}</div>
+      <div data-testid="component-mounts">Page component mounts: {mounts}</div>
+    </div>
+  )
+}