<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.gitignore]" value="node_modules
.DS_Store
dist
dist-ssr
*.local

/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
">
<input type="hidden" name="project[files][README.md]" value="# TanStack Router - Virtual File-Based Routing Example

An example demonstrating virtual file-based routing.

- [TanStack Router Docs](https://tanstack.com/router)

## Start a new project based on this example

To start a new project based on this example, run:

```sh
npx gitpick TanStack/router/tree/main/examples/react/basic-virtual-file-based basic-virtual-file-based
```

## Getting Started

Install dependencies:

```sh
pnpm install
```

Start the development server:

```sh
pnpm dev
```

## Build

Build for production:

```sh
pnpm build
```

## About This Example

This example demonstrates:

- Virtual file-based routing
- Dynamic route generation
- Programmatic route creation
- Type-safe virtual routes
">
<input type="hidden" name="project[files][index.html]" value="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Vite App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;/src/main.tsx&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;tanstack-router-react-example-basic-virtual-file-based&quot;,&quot;private&quot;:true,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vite --port 3000&quot;,&quot;build&quot;:&quot;vite build &amp;&amp; tsc --noEmit&quot;,&quot;preview&quot;:&quot;vite preview&quot;,&quot;start&quot;:&quot;vite&quot;},&quot;dependencies&quot;:{&quot;@tailwindcss/vite&quot;:&quot;^4.2.2&quot;,&quot;@tanstack/react-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router@1e68341&quot;,&quot;@tanstack/react-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@1e68341&quot;,&quot;@tanstack/router-plugin&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@1e68341&quot;,&quot;@tanstack/virtual-file-routes&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@1e68341&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;,&quot;redaxios&quot;:&quot;^0.5.1&quot;,&quot;tailwindcss&quot;:&quot;^4.2.2&quot;,&quot;zod&quot;:&quot;^3.24.2&quot;},&quot;devDependencies&quot;:{&quot;@types/react&quot;:&quot;^19.0.8&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;@vitejs/plugin-react&quot;:&quot;^6.0.1&quot;,&quot;typescript&quot;:&quot;^6.0.2&quot;,&quot;vite&quot;:&quot;^8.0.0&quot;}}">
<input type="hidden" name="project[files][routes.ts]" value="import {
  index,
  layout,
  physical,
  rootRoute,
  route,
} from &#39;@tanstack/virtual-file-routes&#39;

export const routes = rootRoute(&#39;root.tsx&#39;, [
  index(&#39;home.tsx&#39;),
  route(&#39;/posts&#39;, &#39;posts/posts.tsx&#39;, [
    index(&#39;posts/posts-home.tsx&#39;),
    route(&#39;$postId&#39;, &#39;posts/posts-detail.tsx&#39;),
  ]),
  layout(&#39;first&#39;, &#39;layout/first-layout.tsx&#39;, [
    layout(&#39;layout/second-layout.tsx&#39;, [
      route(&#39;route-without-file&#39;, [
        route(&#39;/layout-a&#39;, &#39;a.tsx&#39;),
        route(&#39;/layout-b&#39;, &#39;b.tsx&#39;),
      ]),
    ]),
  ]),
  physical(&#39;/classic&#39;, &#39;file-based-subtree&#39;),
])
">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;module&quot;: &quot;Preserve&quot;,
    &quot;moduleResolution&quot;: &quot;Bundler&quot;,
    &quot;target&quot;: &quot;ESNext&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ES2022&quot;],
    &quot;skipLibCheck&quot;: true
  }
}
">
<input type="hidden" name="project[files][vite.config.ts]" value="import { defineConfig } from &#39;vite&#39;
import react from &#39;@vitejs/plugin-react&#39;
import { tanstackRouter } from &#39;@tanstack/router-plugin/vite&#39;
import tailwindcss from &#39;@tailwindcss/vite&#39;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    tanstackRouter({
      target: &#39;react&#39;,
      autoCodeSplitting: true,
      virtualRouteConfig: &#39;./routes.ts&#39;,
    }),
    react(),
  ],
})
">
<input type="hidden" name="project[files][.devcontainer/devcontainer.json]" value="{
  &quot;image&quot;: &quot;mcr.microsoft.com/devcontainers/typescript-node:24&quot;
}
">
<input type="hidden" name="project[files][.vscode/settings.json]" value="{
  &quot;files.watcherExclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;search.exclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;files.readonlyInclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  }
}
">
<input type="hidden" name="project[files][src/main.tsx]" value="import React from &#39;react&#39;
import ReactDOM from &#39;react-dom/client&#39;
import { RouterProvider, createRouter } from &#39;@tanstack/react-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;
import &#39;./styles.css&#39;

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: &#39;intent&#39;,
  defaultStaleTime: 5000,
  scrollRestoration: true,
})

// Register things for typesafety
declare module &#39;@tanstack/react-router&#39; {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById(&#39;app&#39;)!

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(&lt;RouterProvider router={router} /&gt;)
}
">
<input type="hidden" name="project[files][src/posts.tsx]" value="import { notFound } from &#39;@tanstack/react-router&#39;
import axios from &#39;redaxios&#39;

export type PostType = {
  id: string
  title: string
  body: string
}

export const fetchPost = async (postId: string) =&gt; {
  console.info(`Fetching post with id ${postId}...`)
  await new Promise((r) =&gt; setTimeout(r, 500))
  const post = await axios
    .get&lt;PostType&gt;(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((r) =&gt; r.data)
    .catch((err) =&gt; {
      if (err.status === 404) {
        throw notFound()
      }
      throw err
    })

  return post
}

export const fetchPosts = async () =&gt; {
  console.info(&#39;Fetching posts...&#39;)
  await new Promise((r) =&gt; setTimeout(r, 500))
  return axios
    .get&lt;Array&lt;PostType&gt;&gt;(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
    .then((r) =&gt; r.data.slice(0, 10))
}
">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* 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 { Route as rootRouteImport } from &#39;./routes/root&#39;
import { Route as postsPostsRouteImport } from &#39;./routes/posts/posts&#39;
import { Route as layoutFirstLayoutRouteImport } from &#39;./routes/layout/first-layout&#39;
import { Route as homeRouteImport } from &#39;./routes/home&#39;
import { Route as postsPostsDetailRouteImport } from &#39;./routes/posts/posts-detail&#39;
import { Route as layoutSecondLayoutRouteImport } from &#39;./routes/layout/second-layout&#39;
import { Route as postsPostsHomeRouteImport } from &#39;./routes/posts/posts-home&#39;
import { Route as ClassicHelloRouteRouteImport } from &#39;./routes/file-based-subtree/hello/route&#39;
import { Route as ClassicHelloIndexRouteImport } from &#39;./routes/file-based-subtree/hello/index&#39;
import { Route as ClassicHelloWorldRouteImport } from &#39;./routes/file-based-subtree/hello/world&#39;
import { Route as ClassicHelloUniverseRouteImport } from &#39;./routes/file-based-subtree/hello/universe&#39;
import { Route as bRouteImport } from &#39;./routes/b&#39;
import { Route as aRouteImport } from &#39;./routes/a&#39;

const postsPostsRoute = postsPostsRouteImport.update({
  id: &#39;/posts&#39;,
  path: &#39;/posts&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const layoutFirstLayoutRoute = layoutFirstLayoutRouteImport.update({
  id: &#39;/_first&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const homeRoute = homeRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const postsPostsDetailRoute = postsPostsDetailRouteImport.update({
  id: &#39;/$postId&#39;,
  path: &#39;/$postId&#39;,
  getParentRoute: () =&gt; postsPostsRoute,
} as any)
const layoutSecondLayoutRoute = layoutSecondLayoutRouteImport.update({
  id: &#39;/_second-layout&#39;,
  getParentRoute: () =&gt; layoutFirstLayoutRoute,
} as any)
const postsPostsHomeRoute = postsPostsHomeRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; postsPostsRoute,
} as any)
const ClassicHelloRouteRoute = ClassicHelloRouteRouteImport.update({
  id: &#39;/classic/hello&#39;,
  path: &#39;/classic/hello&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const ClassicHelloIndexRoute = ClassicHelloIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; ClassicHelloRouteRoute,
} as any)
const ClassicHelloWorldRoute = ClassicHelloWorldRouteImport.update({
  id: &#39;/world&#39;,
  path: &#39;/world&#39;,
  getParentRoute: () =&gt; ClassicHelloRouteRoute,
} as any)
const ClassicHelloUniverseRoute = ClassicHelloUniverseRouteImport.update({
  id: &#39;/universe&#39;,
  path: &#39;/universe&#39;,
  getParentRoute: () =&gt; ClassicHelloRouteRoute,
} as any)
const bRoute = bRouteImport.update({
  id: &#39;/route-without-file/layout-b&#39;,
  path: &#39;/route-without-file/layout-b&#39;,
  getParentRoute: () =&gt; layoutSecondLayoutRoute,
} as any)
const aRoute = aRouteImport.update({
  id: &#39;/route-without-file/layout-a&#39;,
  path: &#39;/route-without-file/layout-a&#39;,
  getParentRoute: () =&gt; layoutSecondLayoutRoute,
} as any)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof homeRoute
  &#39;/posts&#39;: typeof postsPostsRouteWithChildren
  &#39;/classic/hello&#39;: typeof ClassicHelloRouteRouteWithChildren
  &#39;/posts/&#39;: typeof postsPostsHomeRoute
  &#39;/posts/$postId&#39;: typeof postsPostsDetailRoute
  &#39;/classic/hello/universe&#39;: typeof ClassicHelloUniverseRoute
  &#39;/classic/hello/world&#39;: typeof ClassicHelloWorldRoute
  &#39;/classic/hello/&#39;: typeof ClassicHelloIndexRoute
  &#39;/route-without-file/layout-a&#39;: typeof aRoute
  &#39;/route-without-file/layout-b&#39;: typeof bRoute
}
export interface FileRoutesByTo {
  &#39;/&#39;: typeof homeRoute
  &#39;/posts&#39;: typeof postsPostsHomeRoute
  &#39;/posts/$postId&#39;: typeof postsPostsDetailRoute
  &#39;/classic/hello/universe&#39;: typeof ClassicHelloUniverseRoute
  &#39;/classic/hello/world&#39;: typeof ClassicHelloWorldRoute
  &#39;/classic/hello&#39;: typeof ClassicHelloIndexRoute
  &#39;/route-without-file/layout-a&#39;: typeof aRoute
  &#39;/route-without-file/layout-b&#39;: typeof bRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  &#39;/&#39;: typeof homeRoute
  &#39;/_first&#39;: typeof layoutFirstLayoutRouteWithChildren
  &#39;/posts&#39;: typeof postsPostsRouteWithChildren
  &#39;/classic/hello&#39;: typeof ClassicHelloRouteRouteWithChildren
  &#39;/posts/&#39;: typeof postsPostsHomeRoute
  &#39;/_first/_second-layout&#39;: typeof layoutSecondLayoutRouteWithChildren
  &#39;/posts/$postId&#39;: typeof postsPostsDetailRoute
  &#39;/classic/hello/universe&#39;: typeof ClassicHelloUniverseRoute
  &#39;/classic/hello/world&#39;: typeof ClassicHelloWorldRoute
  &#39;/classic/hello/&#39;: typeof ClassicHelloIndexRoute
  &#39;/_first/_second-layout/route-without-file/layout-a&#39;: typeof aRoute
  &#39;/_first/_second-layout/route-without-file/layout-b&#39;: typeof bRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | &#39;/&#39;
    | &#39;/posts&#39;
    | &#39;/classic/hello&#39;
    | &#39;/posts/&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/classic/hello/universe&#39;
    | &#39;/classic/hello/world&#39;
    | &#39;/classic/hello/&#39;
    | &#39;/route-without-file/layout-a&#39;
    | &#39;/route-without-file/layout-b&#39;
  fileRoutesByTo: FileRoutesByTo
  to:
    | &#39;/&#39;
    | &#39;/posts&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/classic/hello/universe&#39;
    | &#39;/classic/hello/world&#39;
    | &#39;/classic/hello&#39;
    | &#39;/route-without-file/layout-a&#39;
    | &#39;/route-without-file/layout-b&#39;
  id:
    | &#39;__root__&#39;
    | &#39;/&#39;
    | &#39;/_first&#39;
    | &#39;/posts&#39;
    | &#39;/classic/hello&#39;
    | &#39;/posts/&#39;
    | &#39;/_first/_second-layout&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/classic/hello/universe&#39;
    | &#39;/classic/hello/world&#39;
    | &#39;/classic/hello/&#39;
    | &#39;/_first/_second-layout/route-without-file/layout-a&#39;
    | &#39;/_first/_second-layout/route-without-file/layout-b&#39;
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  homeRoute: typeof homeRoute
  layoutFirstLayoutRoute: typeof layoutFirstLayoutRouteWithChildren
  postsPostsRoute: typeof postsPostsRouteWithChildren
  ClassicHelloRouteRoute: typeof ClassicHelloRouteRouteWithChildren
}

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/posts&#39;: {
      id: &#39;/posts&#39;
      path: &#39;/posts&#39;
      fullPath: &#39;/posts&#39;
      preLoaderRoute: typeof postsPostsRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/_first&#39;: {
      id: &#39;/_first&#39;
      path: &#39;&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof layoutFirstLayoutRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof homeRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/posts/$postId&#39;: {
      id: &#39;/posts/$postId&#39;
      path: &#39;/$postId&#39;
      fullPath: &#39;/posts/$postId&#39;
      preLoaderRoute: typeof postsPostsDetailRouteImport
      parentRoute: typeof postsPostsRoute
    }
    &#39;/_first/_second-layout&#39;: {
      id: &#39;/_first/_second-layout&#39;
      path: &#39;&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof layoutSecondLayoutRouteImport
      parentRoute: typeof layoutFirstLayoutRoute
    }
    &#39;/posts/&#39;: {
      id: &#39;/posts/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/posts/&#39;
      preLoaderRoute: typeof postsPostsHomeRouteImport
      parentRoute: typeof postsPostsRoute
    }
    &#39;/classic/hello&#39;: {
      id: &#39;/classic/hello&#39;
      path: &#39;/classic/hello&#39;
      fullPath: &#39;/classic/hello&#39;
      preLoaderRoute: typeof ClassicHelloRouteRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/classic/hello/&#39;: {
      id: &#39;/classic/hello/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/classic/hello/&#39;
      preLoaderRoute: typeof ClassicHelloIndexRouteImport
      parentRoute: typeof ClassicHelloRouteRoute
    }
    &#39;/classic/hello/world&#39;: {
      id: &#39;/classic/hello/world&#39;
      path: &#39;/world&#39;
      fullPath: &#39;/classic/hello/world&#39;
      preLoaderRoute: typeof ClassicHelloWorldRouteImport
      parentRoute: typeof ClassicHelloRouteRoute
    }
    &#39;/classic/hello/universe&#39;: {
      id: &#39;/classic/hello/universe&#39;
      path: &#39;/universe&#39;
      fullPath: &#39;/classic/hello/universe&#39;
      preLoaderRoute: typeof ClassicHelloUniverseRouteImport
      parentRoute: typeof ClassicHelloRouteRoute
    }
    &#39;/_first/_second-layout/route-without-file/layout-b&#39;: {
      id: &#39;/_first/_second-layout/route-without-file/layout-b&#39;
      path: &#39;/route-without-file/layout-b&#39;
      fullPath: &#39;/route-without-file/layout-b&#39;
      preLoaderRoute: typeof bRouteImport
      parentRoute: typeof layoutSecondLayoutRoute
    }
    &#39;/_first/_second-layout/route-without-file/layout-a&#39;: {
      id: &#39;/_first/_second-layout/route-without-file/layout-a&#39;
      path: &#39;/route-without-file/layout-a&#39;
      fullPath: &#39;/route-without-file/layout-a&#39;
      preLoaderRoute: typeof aRouteImport
      parentRoute: typeof layoutSecondLayoutRoute
    }
  }
}

interface layoutSecondLayoutRouteChildren {
  aRoute: typeof aRoute
  bRoute: typeof bRoute
}

const layoutSecondLayoutRouteChildren: layoutSecondLayoutRouteChildren = {
  aRoute: aRoute,
  bRoute: bRoute,
}

const layoutSecondLayoutRouteWithChildren =
  layoutSecondLayoutRoute._addFileChildren(layoutSecondLayoutRouteChildren)

interface layoutFirstLayoutRouteChildren {
  layoutSecondLayoutRoute: typeof layoutSecondLayoutRouteWithChildren
}

const layoutFirstLayoutRouteChildren: layoutFirstLayoutRouteChildren = {
  layoutSecondLayoutRoute: layoutSecondLayoutRouteWithChildren,
}

const layoutFirstLayoutRouteWithChildren =
  layoutFirstLayoutRoute._addFileChildren(layoutFirstLayoutRouteChildren)

interface postsPostsRouteChildren {
  postsPostsHomeRoute: typeof postsPostsHomeRoute
  postsPostsDetailRoute: typeof postsPostsDetailRoute
}

const postsPostsRouteChildren: postsPostsRouteChildren = {
  postsPostsHomeRoute: postsPostsHomeRoute,
  postsPostsDetailRoute: postsPostsDetailRoute,
}

const postsPostsRouteWithChildren = postsPostsRoute._addFileChildren(
  postsPostsRouteChildren,
)

interface ClassicHelloRouteRouteChildren {
  ClassicHelloUniverseRoute: typeof ClassicHelloUniverseRoute
  ClassicHelloWorldRoute: typeof ClassicHelloWorldRoute
  ClassicHelloIndexRoute: typeof ClassicHelloIndexRoute
}

const ClassicHelloRouteRouteChildren: ClassicHelloRouteRouteChildren = {
  ClassicHelloUniverseRoute: ClassicHelloUniverseRoute,
  ClassicHelloWorldRoute: ClassicHelloWorldRoute,
  ClassicHelloIndexRoute: ClassicHelloIndexRoute,
}

const ClassicHelloRouteRouteWithChildren =
  ClassicHelloRouteRoute._addFileChildren(ClassicHelloRouteRouteChildren)

const rootRouteChildren: RootRouteChildren = {
  homeRoute: homeRoute,
  layoutFirstLayoutRoute: layoutFirstLayoutRouteWithChildren,
  postsPostsRoute: postsPostsRouteWithChildren,
  ClassicHelloRouteRoute: ClassicHelloRouteRouteWithChildren,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()
">
<input type="hidden" name="project[files][src/styles.css]" value="@import &#39;tailwindcss&#39; source(&#39;../&#39;);

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

html {
  color-scheme: light dark;
}
* {
  @apply border-gray-200 dark:border-gray-800;
}
body {
  @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
}
">
<input type="hidden" name="project[files][src/vite-env.d.ts]" value="/// &lt;reference types=&quot;vite/client&quot; /&gt;
">
<input type="hidden" name="project[files][src/routes/a.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(
  &#39;/_first/_second-layout/route-without-file/layout-a&#39;,
)({
  component: LayoutAComponent,
})

function LayoutAComponent() {
  return &lt;div&gt;I&#39;m layout A!&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/b.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(
  &#39;/_first/_second-layout/route-without-file/layout-b&#39;,
)({
  component: LayoutBComponent,
})

function LayoutBComponent() {
  return &lt;div&gt;I&#39;m layout B!&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/home.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import * as React from &#39;react&#39;

export const Route = createFileRoute(&#39;/&#39;)({
  component: Home,
})

function Home() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;h3&gt;Welcome Home!&lt;/h3&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/root.tsx]" value="import * as React from &#39;react&#39;
import { Link, Outlet, createRootRoute } from &#39;@tanstack/react-router&#39;
import { TanStackRouterDevtools } from &#39;@tanstack/react-router-devtools&#39;

export const Route = createRootRoute({
  component: RootComponent,
  notFoundComponent: () =&gt; {
    return (
      &lt;div&gt;
        &lt;p&gt;This is the notFoundComponent configured on root route&lt;/p&gt;
        &lt;Link to=&quot;/&quot;&gt;Start Over&lt;/Link&gt;
      &lt;/div&gt;
    )
  },
})

function RootComponent() {
  return (
    &lt;&gt;
      &lt;div className=&quot;p-2 flex gap-2 text-lg border-b&quot;&gt;
        &lt;Link
          to=&quot;/&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
          activeOptions={{ exact: true }}
        &gt;
          Home
        &lt;/Link&gt;{&#39; &#39;}
        &lt;Link
          to=&quot;/posts&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Posts
        &lt;/Link&gt;{&#39; &#39;}
        &lt;Link
          to=&quot;/route-without-file/layout-a&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Layout
        &lt;/Link&gt;{&#39; &#39;}
        &lt;Link
          to=&quot;/classic/hello&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Subtree
        &lt;/Link&gt;{&#39; &#39;}
        &lt;Link
          // @ts-expect-error
          to=&quot;/this-route-does-not-exist&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          This Route Does Not Exist
        &lt;/Link&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
      {/* Start rendering router matches */}
      &lt;TanStackRouterDevtools position=&quot;bottom-right&quot; /&gt;
    &lt;/&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/layout/first-layout.tsx]" value="import { Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/_first&#39;)({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div className=&quot;p-2&quot;&gt;
      &lt;div className=&quot;border-b&quot;&gt;I&#39;m a layout&lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/layout/second-layout.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/_first/_second-layout&#39;)({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    &lt;div&gt;
      &lt;div&gt;I&#39;m a nested layout&lt;/div&gt;
      &lt;div className=&quot;flex gap-2 border-b&quot;&gt;
        &lt;Link
          to=&quot;/route-without-file/layout-a&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Layout A
        &lt;/Link&gt;
        &lt;Link
          to=&quot;/route-without-file/layout-b&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
        &gt;
          Layout B
        &lt;/Link&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts/posts-detail.tsx]" value="import * as React from &#39;react&#39;
import { ErrorComponent, createFileRoute } from &#39;@tanstack/react-router&#39;
import { fetchPost } from &#39;../../posts&#39;
import type { ErrorComponentProps } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/posts/$postId&#39;)({
  loader: async ({ params: { postId } }) =&gt; fetchPost(postId),
  errorComponent: PostErrorComponent as any,
  notFoundComponent: () =&gt; {
    return &lt;p&gt;Post not found&lt;/p&gt;
  },
  component: PostComponent,
})

export function PostErrorComponent({ error }: ErrorComponentProps) {
  return &lt;ErrorComponent error={error} /&gt;
}

function PostComponent() {
  const post = Route.useLoaderData()

  return (
    &lt;div className=&quot;space-y-2&quot;&gt;
      &lt;h4 className=&quot;text-xl font-bold underline&quot;&gt;{post.title}&lt;/h4&gt;
      &lt;div className=&quot;text-sm&quot;&gt;{post.body}&lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts/posts-home.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import * as React from &#39;react&#39;

export const Route = createFileRoute(&#39;/posts/&#39;)({
  component: PostsIndexComponent,
})

function PostsIndexComponent() {
  return &lt;div&gt;Select a post.&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/posts/posts.tsx]" value="import * as React from &#39;react&#39;
import { Link, Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;
import { fetchPosts } from &#39;../../posts&#39;

export const Route = createFileRoute(&#39;/posts&#39;)({
  loader: fetchPosts,
  component: PostsComponent,
})

function PostsComponent() {
  const posts = Route.useLoaderData()

  return (
    &lt;div className=&quot;p-2 flex gap-2&quot;&gt;
      &lt;ul className=&quot;list-disc pl-4&quot;&gt;
        {[...posts, { id: &#39;i-do-not-exist&#39;, title: &#39;Non-existent Post&#39; }].map(
          (post) =&gt; {
            return (
              &lt;li key={post.id} className=&quot;whitespace-nowrap&quot;&gt;
                &lt;Link
                  to=&quot;/posts/$postId&quot;
                  params={{
                    postId: post.id,
                  }}
                  className=&quot;block py-1 text-blue-600 hover:opacity-75&quot;
                  activeProps={{ className: &#39;font-bold underline&#39; }}
                &gt;
                  &lt;div&gt;{post.title.substring(0, 20)}&lt;/div&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            )
          },
        )}
      &lt;/ul&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/file-based-subtree/hello/index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/classic/hello/&#39;)({
  component: () =&gt; &lt;div&gt;This is the index&lt;/div&gt;,
})
">
<input type="hidden" name="project[files][src/routes/file-based-subtree/hello/route.tsx]" value="import { Link, Outlet, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/classic/hello&#39;)({
  component: () =&gt; (
    &lt;div&gt;
      Hello!
      &lt;br /&gt;{&#39; &#39;}
      &lt;Link
        to=&quot;/classic/hello/universe&quot;
        activeProps={{
          className: &#39;font-bold&#39;,
        }}
      &gt;
        say hello to the universe
      &lt;/Link&gt;{&#39; &#39;}
      &lt;Link
        to=&quot;/classic/hello/world&quot;
        activeProps={{
          className: &#39;font-bold&#39;,
        }}
      &gt;
        say hello to the world
      &lt;/Link&gt;
      &lt;Outlet /&gt;
    &lt;/div&gt;
  ),
})
">
<input type="hidden" name="project[files][src/routes/file-based-subtree/hello/universe.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/classic/hello/universe&#39;)({
  component: () =&gt; &lt;div&gt;Hello /classic/hello/universe!&lt;/div&gt;,
})
">
<input type="hidden" name="project[files][src/routes/file-based-subtree/hello/world.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
export const Route = createFileRoute(&#39;/classic/hello/world&#39;)({
  component: () =&gt; &lt;div&gt;Hello /classic/hello/world!&lt;/div&gt;,
})
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="tanstack-router-react-example-basic-virtual-file-based">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>