+ {pathname} +
+
+
+
+
+ )
+}
+
+export default HasShown
diff --git a/e2e/react-router/basic-scroll-restoration/src/main.tsx b/e2e/react-router/basic-scroll-restoration/src/main.tsx
new file mode 100644
index 0000000000..8475f4c3f5
--- /dev/null
+++ b/e2e/react-router/basic-scroll-restoration/src/main.tsx
@@ -0,0 +1,239 @@
+import React, { useLayoutEffect } from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+ Link,
+ Outlet,
+ RouterProvider,
+ ScrollRestoration,
+ createRootRoute,
+ createRoute,
+ createRouter,
+ useElementScrollRestoration,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import HasShown from './has-shown'
+
+const rootRoute = createRootRoute({
+ component: RootComponent,
+})
+
+function RootComponent() {
+ return (
+ <>
+
+ {visible && (hasShown ? 'shown' : 'not shown')}
+
+
+
+ Home
+ {' '}
+
+ About
+
+
+ About (No Reset)
+
+
+ By-Element
+
+
+
+
+ )
+}
+
+const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ loader: () => new Promise((r) => setTimeout(r, 500)),
+ component: AboutComponent,
+})
+
+function AboutComponent() {
+ useLayoutEffect(() => {
+ window.invokeOrders.push('about-useLayoutEffect')
+ }, [])
+ return (
+ + Welcome Home! +
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ Home Item {i + 1}
+
+ ))}
+
+
+ )
+}
+
+const byElementRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/by-element',
+ loader: () => new Promise((r) => setTimeout(r, 500)),
+ component: ByElementComponent,
+})
+
+function ByElementComponent() {
+ // We need a unique ID for manual scroll restoration on a specific element
+ // It should be as unique as possible for this element across your app
+ const scrollRestorationId = 'myVirtualizedContent'
+
+ // We use that ID to get the scroll entry for this element
+ const scrollEntry = useElementScrollRestoration({
+ id: scrollRestorationId,
+ })
+
+ // Let's use TanStack Virtual to virtualize some content!
+ const virtualizerParentRef = React.useRefHello from About!
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ About Item {i + 1}
+
+ ))}
+
+
+ )
+}
+
+const routeTree = rootRoute.addChildren([
+ indexRoute,
+ aboutRoute,
+ byElementRoute,
+])
+
+const router = createRouter({ routeTree, defaultPreload: 'intent' })
+
+declare global {
+ interface Window {
+ invokeOrders: string[]
+ }
+}
+window.invokeOrders = []
+router.subscribe('onBeforeRouteMount', (event) => {
+ window.invokeOrders.push(event.type)
+})
+
+router.subscribe('onResolved', (event) => {
+ window.invokeOrders.push(event.type)
+})
+
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement)
+ root.render(Hello from By-Element!
+
+
+
+
+
+ First Regular List Item
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+ Regular List Item {i + 1}
+
+ ))}
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+
+ ))}
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ About Item {i + 1}
+
+ ))}
+
+
+ Virtualized
+
+
+
+ {virtualizer.getVirtualItems().map((item) => (
+
+
+
+ ))}
+
+ Virtualized Item {item.index + 1}
+
+
+
+ )
+}
diff --git a/e2e/start/website/app/components/NotFound.tsx b/e2e/start/website/app/components/NotFound.tsx
new file mode 100644
index 0000000000..7b54fa5680
--- /dev/null
+++ b/e2e/start/website/app/components/NotFound.tsx
@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+
+
+ {isRoot ? (
+
+ Home
+
+ ) : (
+ {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+
+ )}
+
+
+
+ )
+}
diff --git a/e2e/start/website/app/routeTree.gen.ts b/e2e/start/website/app/routeTree.gen.ts
new file mode 100644
index 0000000000..72b5ecded6
--- /dev/null
+++ b/e2e/start/website/app/routeTree.gen.ts
@@ -0,0 +1,370 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as LibraryImport } from './routes/_library'
+import { Route as LibraryIndexImport } from './routes/_library.index'
+import { Route as ProjectIndexImport } from './routes/$project.index'
+import { Route as LibraryProjectImport } from './routes/_library.$project'
+import { Route as LibraryProjectVersionIndexImport } from './routes/_library.$project.$version.index'
+import { Route as ProjectVersionDocsIndexImport } from './routes/$project.$version.docs.index'
+import { Route as ProjectVersionDocsFrameworkFrameworkImport } from './routes/$project.$version.docs.framework.$framework'
+import { Route as ProjectVersionDocsFrameworkFrameworkIndexImport } from './routes/$project.$version.docs.framework.$framework.index'
+import { Route as ProjectVersionDocsFrameworkFrameworkSplatImport } from './routes/$project.$version.docs.framework.$framework.$'
+import { Route as ProjectVersionDocsFrameworkFrameworkExamplesSplatImport } from './routes/$project.$version.docs.framework.$framework.examples.$'
+
+// Create/Update Routes
+
+const LibraryRoute = LibraryImport.update({
+ id: '/_library',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const LibraryIndexRoute = LibraryIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => LibraryRoute,
+} as any)
+
+const ProjectIndexRoute = ProjectIndexImport.update({
+ id: '/$project/',
+ path: '/$project/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const LibraryProjectRoute = LibraryProjectImport.update({
+ id: '/$project',
+ path: '/$project',
+ getParentRoute: () => LibraryRoute,
+} as any)
+
+const LibraryProjectVersionIndexRoute = LibraryProjectVersionIndexImport.update(
+ {
+ id: '/$version/',
+ path: '/$version/',
+ getParentRoute: () => LibraryProjectRoute,
+ } as any,
+)
+
+const ProjectVersionDocsIndexRoute = ProjectVersionDocsIndexImport.update({
+ id: '/$project/$version/docs/',
+ path: '/$project/$version/docs/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const ProjectVersionDocsFrameworkFrameworkRoute =
+ ProjectVersionDocsFrameworkFrameworkImport.update({
+ id: '/$project/$version/docs/framework/$framework',
+ path: '/$project/$version/docs/framework/$framework',
+ getParentRoute: () => rootRoute,
+ } as any)
+
+const ProjectVersionDocsFrameworkFrameworkIndexRoute =
+ ProjectVersionDocsFrameworkFrameworkIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => ProjectVersionDocsFrameworkFrameworkRoute,
+ } as any)
+
+const ProjectVersionDocsFrameworkFrameworkSplatRoute =
+ ProjectVersionDocsFrameworkFrameworkSplatImport.update({
+ id: '/$',
+ path: '/$',
+ getParentRoute: () => ProjectVersionDocsFrameworkFrameworkRoute,
+ } as any)
+
+const ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute =
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatImport.update({
+ id: '/examples/$',
+ path: '/examples/$',
+ getParentRoute: () => ProjectVersionDocsFrameworkFrameworkRoute,
+ } as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/_library': {
+ id: '/_library'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof LibraryImport
+ parentRoute: typeof rootRoute
+ }
+ '/_library/$project': {
+ id: '/_library/$project'
+ path: '/$project'
+ fullPath: '/$project'
+ preLoaderRoute: typeof LibraryProjectImport
+ parentRoute: typeof LibraryImport
+ }
+ '/$project/': {
+ id: '/$project/'
+ path: '/$project'
+ fullPath: '/$project'
+ preLoaderRoute: typeof ProjectIndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/_library/': {
+ id: '/_library/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof LibraryIndexImport
+ parentRoute: typeof LibraryImport
+ }
+ '/$project/$version/docs/': {
+ id: '/$project/$version/docs/'
+ path: '/$project/$version/docs'
+ fullPath: '/$project/$version/docs'
+ preLoaderRoute: typeof ProjectVersionDocsIndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/_library/$project/$version/': {
+ id: '/_library/$project/$version/'
+ path: '/$version'
+ fullPath: '/$project/$version'
+ preLoaderRoute: typeof LibraryProjectVersionIndexImport
+ parentRoute: typeof LibraryProjectImport
+ }
+ '/$project/$version/docs/framework/$framework': {
+ id: '/$project/$version/docs/framework/$framework'
+ path: '/$project/$version/docs/framework/$framework'
+ fullPath: '/$project/$version/docs/framework/$framework'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ parentRoute: typeof rootRoute
+ }
+ '/$project/$version/docs/framework/$framework/$': {
+ id: '/$project/$version/docs/framework/$framework/$'
+ path: '/$'
+ fullPath: '/$project/$version/docs/framework/$framework/$'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkSplatImport
+ parentRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ }
+ '/$project/$version/docs/framework/$framework/': {
+ id: '/$project/$version/docs/framework/$framework/'
+ path: '/'
+ fullPath: '/$project/$version/docs/framework/$framework/'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkIndexImport
+ parentRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ }
+ '/$project/$version/docs/framework/$framework/examples/$': {
+ id: '/$project/$version/docs/framework/$framework/examples/$'
+ path: '/examples/$'
+ fullPath: '/$project/$version/docs/framework/$framework/examples/$'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatImport
+ parentRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ }
+ }
+}
+
+// Create and export the route tree
+
+interface LibraryProjectRouteChildren {
+ LibraryProjectVersionIndexRoute: typeof LibraryProjectVersionIndexRoute
+}
+
+const LibraryProjectRouteChildren: LibraryProjectRouteChildren = {
+ LibraryProjectVersionIndexRoute: LibraryProjectVersionIndexRoute,
+}
+
+const LibraryProjectRouteWithChildren = LibraryProjectRoute._addFileChildren(
+ LibraryProjectRouteChildren,
+)
+
+interface LibraryRouteChildren {
+ LibraryProjectRoute: typeof LibraryProjectRouteWithChildren
+ LibraryIndexRoute: typeof LibraryIndexRoute
+}
+
+const LibraryRouteChildren: LibraryRouteChildren = {
+ LibraryProjectRoute: LibraryProjectRouteWithChildren,
+ LibraryIndexRoute: LibraryIndexRoute,
+}
+
+const LibraryRouteWithChildren =
+ LibraryRoute._addFileChildren(LibraryRouteChildren)
+
+interface ProjectVersionDocsFrameworkFrameworkRouteChildren {
+ ProjectVersionDocsFrameworkFrameworkSplatRoute: typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ ProjectVersionDocsFrameworkFrameworkIndexRoute: typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute: typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+const ProjectVersionDocsFrameworkFrameworkRouteChildren: ProjectVersionDocsFrameworkFrameworkRouteChildren =
+ {
+ ProjectVersionDocsFrameworkFrameworkSplatRoute:
+ ProjectVersionDocsFrameworkFrameworkSplatRoute,
+ ProjectVersionDocsFrameworkFrameworkIndexRoute:
+ ProjectVersionDocsFrameworkFrameworkIndexRoute,
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute:
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute,
+ }
+
+const ProjectVersionDocsFrameworkFrameworkRouteWithChildren =
+ ProjectVersionDocsFrameworkFrameworkRoute._addFileChildren(
+ ProjectVersionDocsFrameworkFrameworkRouteChildren,
+ )
+
+export interface FileRoutesByFullPath {
+ '': typeof LibraryRouteWithChildren
+ '/$project': typeof ProjectIndexRoute
+ '/': typeof LibraryIndexRoute
+ '/$project/$version/docs': typeof ProjectVersionDocsIndexRoute
+ '/$project/$version': typeof LibraryProjectVersionIndexRoute
+ '/$project/$version/docs/framework/$framework': typeof ProjectVersionDocsFrameworkFrameworkRouteWithChildren
+ '/$project/$version/docs/framework/$framework/$': typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ '/$project/$version/docs/framework/$framework/': typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ '/$project/$version/docs/framework/$framework/examples/$': typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+export interface FileRoutesByTo {
+ '/$project': typeof ProjectIndexRoute
+ '/': typeof LibraryIndexRoute
+ '/$project/$version/docs': typeof ProjectVersionDocsIndexRoute
+ '/$project/$version': typeof LibraryProjectVersionIndexRoute
+ '/$project/$version/docs/framework/$framework/$': typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ '/$project/$version/docs/framework/$framework': typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ '/$project/$version/docs/framework/$framework/examples/$': typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/_library': typeof LibraryRouteWithChildren
+ '/_library/$project': typeof LibraryProjectRouteWithChildren
+ '/$project/': typeof ProjectIndexRoute
+ '/_library/': typeof LibraryIndexRoute
+ '/$project/$version/docs/': typeof ProjectVersionDocsIndexRoute
+ '/_library/$project/$version/': typeof LibraryProjectVersionIndexRoute
+ '/$project/$version/docs/framework/$framework': typeof ProjectVersionDocsFrameworkFrameworkRouteWithChildren
+ '/$project/$version/docs/framework/$framework/$': typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ '/$project/$version/docs/framework/$framework/': typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ '/$project/$version/docs/framework/$framework/examples/$': typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | ''
+ | '/$project'
+ | '/'
+ | '/$project/$version/docs'
+ | '/$project/$version'
+ | '/$project/$version/docs/framework/$framework'
+ | '/$project/$version/docs/framework/$framework/$'
+ | '/$project/$version/docs/framework/$framework/'
+ | '/$project/$version/docs/framework/$framework/examples/$'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/$project'
+ | '/'
+ | '/$project/$version/docs'
+ | '/$project/$version'
+ | '/$project/$version/docs/framework/$framework/$'
+ | '/$project/$version/docs/framework/$framework'
+ | '/$project/$version/docs/framework/$framework/examples/$'
+ id:
+ | '__root__'
+ | '/_library'
+ | '/_library/$project'
+ | '/$project/'
+ | '/_library/'
+ | '/$project/$version/docs/'
+ | '/_library/$project/$version/'
+ | '/$project/$version/docs/framework/$framework'
+ | '/$project/$version/docs/framework/$framework/$'
+ | '/$project/$version/docs/framework/$framework/'
+ | '/$project/$version/docs/framework/$framework/examples/$'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ LibraryRoute: typeof LibraryRouteWithChildren
+ ProjectIndexRoute: typeof ProjectIndexRoute
+ ProjectVersionDocsIndexRoute: typeof ProjectVersionDocsIndexRoute
+ ProjectVersionDocsFrameworkFrameworkRoute: typeof ProjectVersionDocsFrameworkFrameworkRouteWithChildren
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ LibraryRoute: LibraryRouteWithChildren,
+ ProjectIndexRoute: ProjectIndexRoute,
+ ProjectVersionDocsIndexRoute: ProjectVersionDocsIndexRoute,
+ ProjectVersionDocsFrameworkFrameworkRoute:
+ ProjectVersionDocsFrameworkFrameworkRouteWithChildren,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes
+ {children ||
+ The page you are looking for does not exist.
} ++ + + Start Over + +
+
+
+ )
+}
diff --git a/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.examples.$.tsx b/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.examples.$.tsx
new file mode 100644
index 0000000000..a06b4ec1b3
--- /dev/null
+++ b/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.examples.$.tsx
@@ -0,0 +1,31 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { NotFound } from '~/components/NotFound'
+import { capitalize, seo } from '~/utils/seo'
+
+export const Route = createFileRoute(
+ '/$project/$version/docs/framework/$framework/examples/$',
+)({
+ meta: ({ params }) =>
+ seo({
+ title: `${capitalize(params._splat || '')} Example | TanStack ${capitalize(params.project)} ${capitalize(params.framework)}`,
+ }),
+ component: Page,
+ notFoundComponent: () => {
+ return + {post.title} +
+{post.content}
+
+
+ )
+}
diff --git a/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.index.tsx b/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.index.tsx
new file mode 100644
index 0000000000..64a30c1ee1
--- /dev/null
+++ b/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.index.tsx
@@ -0,0 +1,15 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+ '/$project/$version/docs/framework/$framework/',
+)({
+ loader: () => {
+ throw redirect({
+ from: '/$project/$version/docs/framework/$framework/',
+ to: '/$project/$version/docs/framework/$framework/$',
+ params: {
+ _splat: 'overview',
+ },
+ })
+ },
+})
diff --git a/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.tsx b/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.tsx
new file mode 100644
index 0000000000..8a614e51c8
--- /dev/null
+++ b/e2e/start/website/app/routes/$project.$version.docs.framework.$framework.tsx
@@ -0,0 +1,123 @@
+import {
+ Link,
+ Outlet,
+ createFileRoute,
+ useLocation,
+} from '@tanstack/react-router'
+import { getDocumentHeads } from '~/server/document'
+import { getProject } from '~/server/projects'
+
+export const Route = createFileRoute(
+ '/$project/$version/docs/framework/$framework',
+)({
+ loader: async ({ params: { project } }) => {
+ const library = await getProject(project)
+ const documents = await getDocumentHeads()
+ return {
+ library,
+ documents,
+ }
+ },
+ component: Page,
+})
+
+function Page() {
+ const project = Route.useLoaderData({ select: (s) => s.library })
+ const documents = Route.useLoaderData({ select: (s) => s.documents })
+ const pathname = useLocation({ select: (s) => s.pathname })
+
+ return (
+ + {params._splat} example +
+
+
+
+
+
+ )
+}
diff --git a/e2e/start/website/app/routes/$project.$version.docs.index.tsx b/e2e/start/website/app/routes/$project.$version.docs.index.tsx
new file mode 100644
index 0000000000..e379d81908
--- /dev/null
+++ b/e2e/start/website/app/routes/$project.$version.docs.index.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/$project/$version/docs/')({
+ loader: () => {
+ throw redirect({
+ from: '/$project/$version/docs',
+ to: '/$project/$version/docs/framework/$framework/$',
+ params: {
+ framework: 'react',
+ _splat: 'overview',
+ },
+ })
+ },
+})
diff --git a/e2e/start/website/app/routes/$project.index.tsx b/e2e/start/website/app/routes/$project.index.tsx
new file mode 100644
index 0000000000..9c6b935e83
--- /dev/null
+++ b/e2e/start/website/app/routes/$project.index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/$project/')({
+ loader: ({ params }) => {
+ throw redirect({
+ to: '/$project/$version',
+ params: {
+ project: params.project,
+ version: 'latest',
+ },
+ })
+ },
+})
diff --git a/e2e/start/website/app/routes/__root.tsx b/e2e/start/website/app/routes/__root.tsx
new file mode 100644
index 0000000000..4f3568e517
--- /dev/null
+++ b/e2e/start/website/app/routes/__root.tsx
@@ -0,0 +1,83 @@
+import {
+ Outlet,
+ ScrollRestoration,
+ createRootRoute,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { Body, Head, Html, Meta, Scripts } from '@tanstack/start'
+import * as React from 'react'
+import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
+import { NotFound } from '~/components/NotFound'
+import appCss from '~/styles/app.css?url'
+import { seo } from '~/utils/seo'
+
+export const Route = createRootRoute({
+ meta: () => [
+ {
+ charSet: 'utf-8',
+ },
+ {
+ name: 'viewport',
+ content: 'width=device-width, initial-scale=1',
+ },
+ ...seo({
+ title: 'TanStack Website',
+ description: `TanStack projects are type-safe!!!`,
+ }),
+ ],
+ links: () => [
+ { rel: 'stylesheet', href: appCss },
+ {
+ rel: 'apple-touch-icon',
+ sizes: '180x180',
+ href: '/apple-touch-icon.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '32x32',
+ href: '/favicon-32x32.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '16x16',
+ href: '/favicon-16x16.png',
+ },
+ { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+ { rel: 'icon', href: '/favicon.ico' },
+ ],
+ errorComponent: (props) => {
+ return (
+
+
+ )
+}
diff --git a/e2e/start/website/app/routes/_library.$project.tsx b/e2e/start/website/app/routes/_library.$project.tsx
new file mode 100644
index 0000000000..817728c173
--- /dev/null
+++ b/e2e/start/website/app/routes/_library.$project.tsx
@@ -0,0 +1,13 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { getProject } from '~/server/projects'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/_library/$project')({
+ loader: ({ params: { project } }) => getProject(project),
+ meta: ({ loaderData }) => seo({ title: `TanStack ${loaderData.name}` }),
+ component: () => (
+ + {params.project} landing page +
+version: {params.version}
++ + Get started with our documentation. + +
+
+
+ ),
+})
diff --git a/e2e/start/website/app/routes/_library.index.tsx b/e2e/start/website/app/routes/_library.index.tsx
new file mode 100644
index 0000000000..f08b6c633a
--- /dev/null
+++ b/e2e/start/website/app/routes/_library.index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_library/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
+ )
+}
diff --git a/e2e/start/website/app/routes/_library.tsx b/e2e/start/website/app/routes/_library.tsx
new file mode 100644
index 0000000000..e120515350
--- /dev/null
+++ b/e2e/start/website/app/routes/_library.tsx
@@ -0,0 +1,62 @@
+import {
+ Link,
+ Outlet,
+ createFileRoute,
+ useLocation,
+} from '@tanstack/react-router'
+import { getProjects } from '~/server/projects'
+
+export const Route = createFileRoute('/_library')({
+ loader: async () => {
+ const projects = await getProjects()
+ return {
+ libraries: projects,
+ }
+ },
+ component: Layout,
+})
+
+function Layout() {
+ const { libraries } = Route.useLoaderData()
+ const pathname = useLocation({ select: (s) => s.pathname })
+ return (
+ Website Landing Page
+
+
+
+
+
+ )
+}
diff --git a/e2e/start/website/app/server/document.tsx b/e2e/start/website/app/server/document.tsx
new file mode 100644
index 0000000000..759c63920e
--- /dev/null
+++ b/e2e/start/website/app/server/document.tsx
@@ -0,0 +1,51 @@
+import { notFound } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/start'
+
+const documents: Array<{ id: string; title: string; content: string }> = [
+ {
+ id: 'overview',
+ title: 'Overview',
+ content: 'This is the content of the overview document',
+ },
+ {
+ id: 'getting-started',
+ title: 'Getting Started',
+ content: 'To get started, you need to do the following...',
+ },
+ {
+ id: 'installation',
+ title: 'Installation',
+ content: 'To install this package, run the following command...',
+ },
+ {
+ id: 'ref/useQueryFunction',
+ title: 'useQuery Reference',
+ content: 'The useQuery function is used to...',
+ },
+ {
+ id: 'ref/useMutationFunction',
+ title: 'useMutation Reference',
+ content: 'The useMutation function is used to...',
+ },
+]
+
+export const getDocumentHeads = createServerFn('GET', async () => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ return documents.map(({ id, title }) => ({
+ id,
+ title,
+ }))
+})
+
+export const getDocument = createServerFn('GET', async (id: string) => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ const document = documents.find((doc) => doc.id === id)
+
+ if (!document) {
+ throw notFound()
+ }
+
+ return document
+})
diff --git a/e2e/start/website/app/server/projects.tsx b/e2e/start/website/app/server/projects.tsx
new file mode 100644
index 0000000000..b76bf05feb
--- /dev/null
+++ b/e2e/start/website/app/server/projects.tsx
@@ -0,0 +1,29 @@
+import { createServerFn } from '@tanstack/start'
+import { notFound } from '@tanstack/react-router'
+import { capitalize } from '~/utils/seo'
+
+const projects = ['router', 'table', 'query', 'form', 'ranger']
+
+export const getProjects = createServerFn('GET', async () => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ return projects
+})
+
+export const getProject = createServerFn('GET', async (project: string) => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ const selectedProject = projects.find((p) => p === project.toLowerCase())
+
+ if (!selectedProject) {
+ throw notFound()
+ }
+
+ return {
+ id: selectedProject,
+ name: capitalize(selectedProject),
+ versions: ['latest', 'v2', 'v1'],
+ frameworks: ['react', 'vue', 'solidjs', 'svelte'],
+ examples: ['basic', 'kitchen-sink'],
+ }
+})
diff --git a/e2e/start/website/app/ssr.tsx b/e2e/start/website/app/ssr.tsx
new file mode 100644
index 0000000000..f2d33f9030
--- /dev/null
+++ b/e2e/start/website/app/ssr.tsx
@@ -0,0 +1,13 @@
+/// + {pathname} +
+Index Heading
+ + Index Link + + + ), + }) + + const router = createRouter({ + routeTree: rootRoute.addChildren([indexRoute]), + defaultPreload: preload, + }) + + render(Index Heading
- - Index Link - + About Link + + ), + }) + const aboutRoute = createRoute({ + getParentRoute: () => rootRoute, + path: '/about', + component: () => ( + <> +About Heading
), }) const router = createRouter({ - routeTree: rootRoute.addChildren([indexRoute]), - defaultPreload: 'viewport', + routeTree: rootRoute.addChildren([aboutRoute, indexRoute]), + defaultPreload: 'render', }) render(Nested Foo page
,
})
diff --git a/packages/react-router/tests/path.test.ts b/packages/react-router/tests/path.test.ts
index 0e9212524e..5e3f559b43 100644
--- a/packages/react-router/tests/path.test.ts
+++ b/packages/react-router/tests/path.test.ts
@@ -49,6 +49,45 @@ describe('removeBasepath', () => {
])('$name', ({ basepath, pathname, expected }) => {
expect(removeBasepath(basepath, pathname)).toBe(expected)
})
+ describe('case sensitivity', () => {
+ describe('caseSensitive = true', () => {
+ it.each([
+ {
+ name: 'should not remove basepath from the beginning of the pathname',
+ basepath: '/app',
+ pathname: '/App/path/App',
+ expected: '/App/path/App',
+ },
+ {
+ name: 'should not remove basepath from the beginning of the pathname with multiple segments',
+ basepath: '/app/New',
+ pathname: '/App/New/path/App',
+ expected: '/App/New/path/App',
+ },
+ ])('$name', ({ basepath, pathname, expected }) => {
+ expect(removeBasepath(basepath, pathname, true)).toBe(expected)
+ })
+ })
+
+ describe('caseSensitive = false', () => {
+ it.each([
+ {
+ name: 'should remove basepath from the beginning of the pathname',
+ basepath: '/App',
+ pathname: '/app/path/app',
+ expected: '/path/app',
+ },
+ {
+ name: 'should remove multisegment basepath from the beginning of the pathname',
+ basepath: '/App/New',
+ pathname: '/app/new/path/app',
+ expected: '/path/app',
+ },
+ ])('$name', ({ basepath, pathname, expected }) => {
+ expect(removeBasepath(basepath, pathname, false)).toBe(expected)
+ })
+ })
+ })
})
describe.each([{ basepath: '/' }, { basepath: '/app' }, { basepath: '/app/' }])(
diff --git a/packages/react-router/tests/route.test-d.tsx b/packages/react-router/tests/route.test-d.tsx
index 69286c8c0b..372e0e072c 100644
--- a/packages/react-router/tests/route.test-d.tsx
+++ b/packages/react-router/tests/route.test-d.tsx
@@ -16,7 +16,10 @@ import type {
Route,
SearchSchemaInput,
} from '../src'
-import type { MakeRouteMatchUnion } from '../src/Matches'
+import type {
+ MakeRouteMatchFromRoute,
+ MakeRouteMatchUnion,
+} from '../src/Matches'
test('when creating the root', () => {
const rootRoute = createRootRoute()
@@ -83,7 +86,7 @@ test('when creating the root with a loader', () => {
context: {}
location: ParsedLocation
navigate: (opts: NavigateOptionsHello "${rootPathId}"!
- Hello "%%tsrPath%%"!
Hello ${escapedRoutePath}!
-})`,
- ].join('\n\n')
+ replaced = fillTemplate(config.customScaffolding.routeTemplate, {
+ tsrImports:
+ "import { createLazyFileRoute } from '@tanstack/react-router';",
+ tsrPath: escapedRoutePath,
+ tsrExportStart: `export const Route = createLazyFileRoute('${escapedRoutePath}')(`,
+ tsrExportEnd: ');',
+ })
} else if (
node.isRoute ||
(!node.isComponent &&
@@ -205,12 +209,13 @@ export const Route = createRootRoute({
!node.isPendingComponent &&
!node.isLoader)
) {
- replaced = [
- `import { createFileRoute } from '@tanstack/react-router'`,
- `export const Route = createFileRoute('${escapedRoutePath}')({
- component: () => Hello ${escapedRoutePath}!
-})`,
- ].join('\n\n')
+ replaced = fillTemplate(config.customScaffolding.routeTemplate, {
+ tsrImports:
+ "import { createFileRoute } from '@tanstack/react-router';",
+ tsrPath: escapedRoutePath,
+ tsrExportStart: `export const Route = createFileRoute('${escapedRoutePath}')(`,
+ tsrExportEnd: ');',
+ })
}
} else {
replaced = routeCode
@@ -360,16 +365,12 @@ export const Route = createRootRoute({
const escapedRoutePath = node.routePath?.replaceAll('$', '$$') ?? ''
if (!routeCode) {
- const replaced = `import { json } from '@tanstack/start'
-import { createAPIFileRoute } from '@tanstack/start/api'
-
-export const Route = createAPIFileRoute('${escapedRoutePath}')({
- GET: ({ request, params }) => {
- return json({ message: 'Hello ${escapedRoutePath}' })
- },
-})
-
-`
+ const replaced = fillTemplate(config.customScaffolding.apiTemplate, {
+ tsrImports: "import { createAPIFileRoute } from '@tanstack/start/api';",
+ tsrPath: escapedRoutePath,
+ tsrExportStart: `export const Route = createAPIFileRoute('${escapedRoutePath}')(`,
+ tsrExportEnd: ');',
+ })
logger.log(`🟡 Creating ${node.fullPath}`)
fs.writeFileSync(
@@ -478,7 +479,9 @@ export const Route = createAPIFileRoute('${escapedRoutePath}')({
}
const routeImports = [
...config.routeTreeFileHeader,
- '// This file is auto-generated by TanStack Router',
+ `// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.`,
imports.length
? `import { ${imports.join(', ')} } from '@tanstack/react-router'\n`
: '',
@@ -733,9 +736,9 @@ export const Route = createAPIFileRoute('${escapedRoutePath}')({
)
}
-function removeTrailingUnderscores(s?: string) {
- return s?.replaceAll(/(_$)/gi, '').replaceAll(/(_\/)/gi, '/')
-}
+// function removeTrailingUnderscores(s?: string) {
+// return s?.replaceAll(/(_$)/gi, '').replaceAll(/(_\/)/gi, '/')
+// }
function removeGroups(s: string) {
return s.replace(possiblyNestedRouteGroupPatternRegex, '')
@@ -1008,3 +1011,12 @@ export function startAPIRouteSegmentsFromTSRFilePath(
return segments
}
+
+type TemplateTag = 'tsrImports' | 'tsrPath' | 'tsrExportStart' | 'tsrExportEnd'
+
+function fillTemplate(template: string, values: RecordHello "__root"!
+ Hello "__root"!
+
+
+
;
+};
+export { component };
+const loader = fetchPosts;
+export { loader };
\ No newline at end of file
diff --git a/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx
new file mode 100644
index 0000000000..0328934dbb
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsComponent,
+})
+
+const PostsComponent = () => {
+ const posts = Route.useLoaderData()
+
+ return (
+ -
+ {[...posts, {
+ id: 'i-do-not-exist',
+ title: 'Non-existent Post'
+ }]?.map(post => {
+ return
-
+
+ {post.title.substring(0, 20)}+ + ;
+ })}
+
+
+
+
+ )
+}
diff --git a/packages/router-valibot-adapter/package.json b/packages/router-valibot-adapter/package.json
index 5d0c17677f..241bb117c4 100644
--- a/packages/router-valibot-adapter/package.json
+++ b/packages/router-valibot-adapter/package.json
@@ -1,6 +1,6 @@
{
"name": "@tanstack/router-valibot-adapter",
- "version": "1.76.1",
+ "version": "1.78.2",
"description": "Modern and scalable routing for React applications",
"author": "Tanner Linsley",
"license": "MIT",
@@ -67,10 +67,10 @@
"@tanstack/react-router": "workspace:*",
"@testing-library/jest-dom": "^6.6.2",
"@testing-library/react": "^16.0.1",
- "valibot": "1.0.0-beta.1"
+ "valibot": "1.0.0-beta.2"
},
"peerDependencies": {
"@tanstack/react-router": ">=1.43.2",
- "valibot": "^1.0.0"
+ "valibot": "^1.0.0 || ^1.0.0-beta || ^1.0.0-rc"
}
}
diff --git a/packages/router-vite-plugin/package.json b/packages/router-vite-plugin/package.json
index 8ab9378aa7..d768271bc6 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.76.0",
+ "version": "1.78.2",
"description": "Modern and scalable routing for React applications",
"author": "Tanner Linsley",
"license": "MIT",
diff --git a/packages/router-zod-adapter/package.json b/packages/router-zod-adapter/package.json
index 02fa18351d..4666f0f62c 100644
--- a/packages/router-zod-adapter/package.json
+++ b/packages/router-zod-adapter/package.json
@@ -1,6 +1,6 @@
{
"name": "@tanstack/router-zod-adapter",
- "version": "1.76.1",
+ "version": "1.78.2",
"description": "Modern and scalable routing for React applications",
"author": "Tanner Linsley",
"license": "MIT",
diff --git a/packages/start-vite-plugin/package.json b/packages/start-vite-plugin/package.json
index a5a2b13385..27fda88364 100644
--- a/packages/start-vite-plugin/package.json
+++ b/packages/start-vite-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@tanstack/start-vite-plugin",
- "version": "1.66.1",
+ "version": "1.77.7",
"description": "Modern and scalable routing for React applications",
"author": "Tanner Linsley",
"license": "MIT",
@@ -64,14 +64,14 @@
"node": ">=12"
},
"dependencies": {
- "@babel/core": "^7.25.8",
- "@babel/generator": "^7.25.7",
- "@babel/parser": "^7.25.8",
- "@babel/plugin-syntax-jsx": "^7.25.7",
- "@babel/plugin-syntax-typescript": "^7.25.7",
- "@babel/template": "^7.25.7",
- "@babel/traverse": "^7.25.7",
- "@babel/types": "^7.25.8",
+ "@babel/core": "^7.26.0",
+ "@babel/generator": "^7.26.0",
+ "@babel/parser": "^7.26.1",
+ "@babel/plugin-syntax-jsx": "^7.25.9",
+ "@babel/plugin-syntax-typescript": "^7.25.9",
+ "@babel/template": "^7.25.9",
+ "@babel/traverse": "^7.25.9",
+ "@babel/types": "^7.26.0",
"@types/babel__core": "^7.20.5",
"@types/babel__generator": "^7.6.8",
"@types/babel__template": "^7.4.4",
diff --git a/packages/start/package.json b/packages/start/package.json
index 214e627556..057864d2bf 100644
--- a/packages/start/package.json
+++ b/packages/start/package.json
@@ -1,6 +1,6 @@
{
"name": "@tanstack/start",
- "version": "1.76.1",
+ "version": "1.78.2",
"description": "Modern and scalable routing for React applications",
"author": "Tanner Linsley",
"license": "MIT",
diff --git a/packages/start/src/config/index.ts b/packages/start/src/config/index.ts
index 2861e65e2a..aca98396bf 100644
--- a/packages/start/src/config/index.ts
+++ b/packages/start/src/config/index.ts
@@ -218,11 +218,10 @@ const inlineConfigSchema = z.object({
server: serverSchema.optional(),
})
-export type TanStackStartDefineConfigOptions = z.infer<
- typeof inlineConfigSchema
->
+export type TanStackStartInputConfig = z.input-
+ {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }]?.map(
+ (post) => {
+ return (
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ },
+ )}
+
+