[ { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@3.1.2/schema.json\",\n \"changelog\": [\n \"@svitejs/changesets-changelog-github-compact\",\n { \"repo\": \"TanStack/router\" }\n ],\n \"commit\": false,\n \"access\": \"public\",\n \"baseBranch\": \"main\",\n \"updateInternalDependencies\": \"patch\",\n \"fixed\": [],\n \"linked\": [],\n \"ignore\": [],\n \"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH\": {\n \"onlyUpdatePeerDependentsWhenOutOfRange\": true\n }\n}\n" }, { "path": ".devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n" }, { "path": ".github/FUNDING.yml", "content": "github: tannerlinsley\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: ๐Ÿ› Bug Report\ndescription: Create a report to help us improve\nbody:\n - type: markdown\n attributes:\n value: |\n Thank you for reporting an issue :pray:.\n\n This issue tracker is for reporting bugs found in `router` (https://github.com/tanstack/router).\n If you have a question about how to achieve something and are struggling, please post a question\n inside of `router` Discussions tab: https://github.com/tanstack/router/discussions\n\n Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:\n - `router` Issues tab: https://github.com/tanstack/router/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc\n - `router` closed issues tab: https://github.com/tanstack/router/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed\n - `router` Discussions tab: https://github.com/tanstack/router/discussions\n\n The more information you fill in, the better the community can help you.\n - type: dropdown\n id: project\n attributes:\n label: Which project does this relate to?\n description: If you are unsure, please leave this as \"Router\".\n options:\n - Router\n - Start\n validations:\n required: true\n - type: textarea\n id: description\n attributes:\n label: Describe the bug\n description: Provide a clear and concise description of the challenge you are running into.\n validations:\n required: true\n - type: input\n id: link\n attributes:\n label: Your Example Website or App\n description: |\n Which website or app were you using when the bug happened?\n Note:\n - Please provide a link via our pre-configured Stackblitz project ([file-based routes](https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart-file-based?file=src%2Fmain.tsx)|[code-based routes](https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart?file=src%2Fmain.tsx)) or a link to a repo that can reproduce the issue.\n - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `router` npm package / dependency.\n - To create a shareable code example you can use Stackblitz. Please no localhost URLs.\n - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.\n placeholder: reproduction URL\n validations:\n required: true\n - type: textarea\n id: steps\n attributes:\n label: Steps to Reproduce the Bug or Issue\n description: Describe the steps we have to take to reproduce the behavior.\n placeholder: |\n 1. Go to '...'\n 2. Click on '....'\n 3. Scroll down to '....'\n 4. See error\n validations:\n required: true\n - type: textarea\n id: expected\n attributes:\n label: Expected behavior\n description: Provide a clear and concise description of what you expected to happen.\n placeholder: |\n As a user, I expected ___ behavior but i am seeing ___\n validations:\n required: true\n - type: textarea\n id: screenshots_or_videos\n attributes:\n label: Screenshots or Videos\n description: |\n If applicable, add screenshots or a video to help explain your problem.\n For more information on the supported file image/file types and the file size limits, please refer\n to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files\n placeholder: |\n You can drag your video or image files inside of this editor โ†“\n - type: textarea\n id: platform\n attributes:\n label: Platform\n value: |\n - Router / Start Version: [e.g. 1.121.0]\n - OS: [e.g. macOS, Windows, Linux]\n - Browser: [e.g. Chrome, Safari, Firefox]\n - Browser Version: [e.g. 91.1]\n - Bundler: [e.g. vite]\n - Bundler Version: [e.g. 7.0.0]\n validations:\n required: true\n - type: textarea\n id: additional\n attributes:\n label: Additional context\n description: Add any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: ๐Ÿค” Feature Requests & Questions\n url: https://github.com/TanStack/router/discussions\n about: Please ask and answer questions here.\n - name: ๐Ÿ’ฌ Community Chat\n url: https://discord.gg/mQd7egN\n about: A dedicated discord server hosted by TanStack\n - name: ๐Ÿฆ‹ TanStack Bluesky\n url: https://bsky.app/profile/tanstack.com\n about: Stay up to date with new releases of our libraries\n" }, { "path": ".github/renovate.json", "content": "{\n \"$schema\": \"https://docs.renovatebot.com/renovate-schema.json\",\n \"configMigration\": true,\n \"extends\": [\n \"config:recommended\",\n \"group:allNonMajor\",\n \"schedule:weekly\",\n \":approveMajorUpdates\",\n \":automergeMinor\",\n \":disablePeerDependencies\",\n \":maintainLockFilesMonthly\",\n \":semanticCommits\",\n \":semanticCommitTypeAll(chore)\"\n ],\n \"ignorePresets\": [\":ignoreModulesAndTests\"],\n \"labels\": [\"dependencies\"],\n \"rangeStrategy\": \"bump\",\n \"postUpdateOptions\": [\"pnpmDedupe\"],\n \"ignoreDeps\": [\n \"@types/node\",\n \"@types/react\",\n \"@types/react-dom\",\n \"h3\",\n \"node\",\n \"react\",\n \"react-dom\",\n \"react-server-dom-webpack\",\n \"temp-react\",\n \"temp-react-dom\",\n \"typescript\",\n \"typescript52\",\n \"typescript53\",\n \"typescript54\",\n \"typescript55\",\n \"typescript56\",\n \"unplugin\",\n \"use-sync-external-store\",\n \"waku\"\n ]\n}\n" }, { "path": ".github/workflows/autofix.yml", "content": "name: autofix.ci # needed to securely identify the workflow\n\non:\n pull_request:\n push:\n branches: [main, alpha, beta]\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.ref }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\njobs:\n autofix:\n name: autofix\n runs-on: ubuntu-latest\n if: ${{ github.event_name == 'push' || !github.event.pull_request.draft }}\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n - name: Fix formatting\n run: pnpm format\n - name: Generate labeler config\n run: pnpm labeler-generate\n - name: Apply fixes\n uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27\n with:\n commit-message: 'ci: apply automated fixes'\n" }, { "path": ".github/workflows/bundle-size.yml", "content": "name: Bundle Size\n\non:\n # We use `pull_request_target` to split trust boundaries across jobs:\n # - `benchmark-pr` checks out PR merge code and runs it as untrusted with read-only permissions.\n # - `comment-pr` runs trusted base-repo code with limited write access to upsert the PR comment.\n pull_request_target:\n paths:\n - 'packages/**'\n - 'benchmarks/**'\n push:\n branches: [main]\n paths:\n - 'packages/**'\n - 'benchmarks/**'\n workflow_dispatch:\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.ref }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\nenv:\n NX_NO_CLOUD: true\njobs:\n benchmark-pr:\n name: Benchmark PR\n if: github.event_name == 'pull_request_target'\n runs-on: ubuntu-latest\n outputs:\n current_json_b64: ${{ steps.capture.outputs.current_json_b64 }}\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n with:\n ref: refs/pull/${{ github.event.pull_request.number }}/merge\n fetch-depth: 0\n persist-credentials: false\n\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n\n - name: Measure Bundle Size\n run: pnpm nx run @benchmarks/bundle-size:build --outputStyle=stream --skipRemoteCache\n\n - name: Capture Benchmark Outputs\n id: capture\n run: |\n {\n echo \"current_json_b64=$(base64 -w 0 < benchmarks/bundle-size/results/current.json)\"\n } >> \"$GITHUB_OUTPUT\"\n\n comment-pr:\n name: Upsert PR Comment\n if: github.event_name == 'pull_request_target'\n runs-on: ubuntu-latest\n needs: benchmark-pr\n permissions:\n contents: read\n pull-requests: write\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n with:\n fetch-depth: 0\n persist-credentials: false\n\n - name: Restore Benchmark Outputs\n env:\n CURRENT_JSON_B64: ${{ needs.benchmark-pr.outputs.current_json_b64 }}\n run: |\n mkdir -p benchmarks/bundle-size/results\n node -e \"const fs=require('node:fs'); fs.writeFileSync('benchmarks/bundle-size/results/current.json', Buffer.from(process.env.CURRENT_JSON_B64 || '', 'base64'))\"\n\n - name: Read Historical Data (if available)\n run: |\n mkdir -p benchmarks/bundle-size/results\n if git fetch --depth=1 origin gh-pages; then\n if git show origin/gh-pages:benchmarks/bundle-size/data.js > benchmarks/bundle-size/results/history-data.js 2>/dev/null; then\n echo \"Loaded bundle-size history from gh-pages.\"\n else\n rm -f benchmarks/bundle-size/results/history-data.js\n echo \"No bundle-size history found on gh-pages yet.\"\n fi\n fi\n\n - name: Build PR Report\n run: |\n node scripts/benchmarks/bundle-size/pr-report.mjs \\\n --current benchmarks/bundle-size/results/current.json \\\n --history benchmarks/bundle-size/results/history-data.js \\\n --output benchmarks/bundle-size/results/pr-comment.md \\\n --base-sha \"${{ github.event.pull_request.base.sha }}\" \\\n --dashboard-url \"https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/benchmarks/bundle-size/\"\n\n - name: Upsert Sticky PR Comment\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n run: |\n node scripts/benchmarks/common/upsert-pr-comment.mjs \\\n --pr \"${{ github.event.pull_request.number }}\" \\\n --body-file benchmarks/bundle-size/results/pr-comment.md\n\n benchmark-main:\n name: Publish Bundle Size History\n if: github.event_name == 'push' && github.ref == 'refs/heads/main' && github.repository_owner == 'TanStack'\n runs-on: ubuntu-latest\n permissions:\n contents: write\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n with:\n fetch-depth: 0\n\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n\n - name: Measure Bundle Size\n run: pnpm nx run @benchmarks/bundle-size:build --outputStyle=stream --skipRemoteCache\n - name: Publish Benchmark Dashboard\n uses: benchmark-action/github-action-benchmark@4bdcce38c94cec68da58d012ac24b7b1155efe8b # v1.20.7\n with:\n tool: customSmallerIsBetter\n name: Bundle Size (gzip)\n output-file-path: benchmarks/bundle-size/results/benchmark-action.json\n github-token: ${{ secrets.GITHUB_TOKEN }}\n auto-push: true\n gh-pages-branch: gh-pages\n benchmark-data-dir-path: benchmarks/bundle-size\n max-items-in-chart: 200\n summary-always: true\n comment-on-alert: false\n fail-on-alert: false\n" }, { "path": ".github/workflows/check-skills.yml", "content": "# check-skills.yml โ€” Drop this into your library repo's .github/workflows/\n#\n# Checks for stale intent skills after a release and opens a review PR\n# if any skills need attention. The PR body includes a prompt you can\n# paste into Claude Code, Cursor, or any coding agent to update them.\n#\n# Triggers: new release published, or manual workflow_dispatch.\n#\n# Template variables (replaced by `intent setup`):\n# @tanstack/react-router โ€” e.g. @tanstack/query\n#\n# Adapted for TanStack Router monorepo: loops over all packages with skills.\n\nname: Check Skills\n\non:\n release:\n types: [published]\n workflow_dispatch: {}\n\npermissions:\n contents: write\n pull-requests: write\n\njobs:\n check:\n name: Check for stale skills\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n with:\n fetch-depth: 0\n\n - name: Setup Node\n uses: actions/setup-node@v4\n with:\n node-version: 20\n\n - name: Install intent CLI\n run: npm install -g @tanstack/intent\n\n - name: Install dependencies\n run: npm install --ignore-scripts\n env:\n npm_config_legacy_peer_deps: 'true'\n\n - name: Check staleness\n id: stale\n run: |\n # Monorepo: collect stale reports from all packages with skills\n ALL_OUTPUT=\"[\"\n FIRST=true\n for dir in packages/*/; do\n if [ -d \"$dir/skills\" ]; then\n PKG_OUTPUT=$(cd \"$dir\" && npx @tanstack/intent stale --json 2>/dev/null) || true\n if [ -n \"$PKG_OUTPUT\" ] && [ \"$PKG_OUTPUT\" != \"[]\" ] && [ \"$PKG_OUTPUT\" != \"No intent-enabled packages found.\" ]; then\n if [ \"$FIRST\" = true ]; then\n FIRST=false\n else\n ALL_OUTPUT=\"${ALL_OUTPUT},\"\n fi\n # Strip outer brackets and append entries\n ENTRIES=$(echo \"$PKG_OUTPUT\" | node -e \"\n const input = require('fs').readFileSync('/dev/stdin','utf8').trim();\n try { const arr = JSON.parse(input); process.stdout.write(JSON.stringify(arr).slice(1, -1)); } catch {}\n \")\n ALL_OUTPUT=\"${ALL_OUTPUT}${ENTRIES}\"\n fi\n fi\n done\n ALL_OUTPUT=\"${ALL_OUTPUT}]\"\n\n echo \"$ALL_OUTPUT\"\n\n # Check if any skills need review\n NEEDS_REVIEW=$(echo \"$ALL_OUTPUT\" | node -e \"\n const input = require('fs').readFileSync('/dev/stdin','utf8');\n try {\n const reports = JSON.parse(input);\n const stale = reports.flatMap(r =>\n r.skills.filter(s => s.needsReview).map(s => ({ library: r.library, skill: s.name, reasons: s.reasons }))\n );\n if (stale.length > 0) {\n console.log(JSON.stringify(stale));\n }\n } catch {}\n \")\n\n if [ -z \"$NEEDS_REVIEW\" ]; then\n echo \"has_stale=false\" >> \"$GITHUB_OUTPUT\"\n else\n echo \"has_stale=true\" >> \"$GITHUB_OUTPUT\"\n # Escape for multiline GH output\n EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64)\n echo \"stale_json<<$EOF\" >> \"$GITHUB_OUTPUT\"\n echo \"$NEEDS_REVIEW\" >> \"$GITHUB_OUTPUT\"\n echo \"$EOF\" >> \"$GITHUB_OUTPUT\"\n fi\n\n - name: Build summary\n if: steps.stale.outputs.has_stale == 'true'\n id: summary\n run: |\n node -e \"\n const stale = JSON.parse(process.env.STALE_JSON);\n const lines = stale.map(s =>\n '- **' + s.skill + '** (' + s.library + '): ' + s.reasons.join(', ')\n );\n const summary = lines.join('\\n');\n\n const prompt = [\n 'Review and update the following stale intent skills for TanStack Router:',\n '',\n ...stale.map(s => '- ' + s.skill + ': ' + s.reasons.join(', ')),\n '',\n 'For each stale skill:',\n '1. Read the current SKILL.md file',\n '2. Check what changed in the library since the skill was last updated',\n '3. Update the skill content to reflect current APIs and behavior',\n '4. Run \\`npx @tanstack/intent validate\\` to verify the updated skill',\n ].join('\\n');\n\n // Write outputs\n const fs = require('fs');\n const env = fs.readFileSync(process.env.GITHUB_OUTPUT, 'utf8');\n const eof = require('crypto').randomBytes(15).toString('base64');\n fs.appendFileSync(process.env.GITHUB_OUTPUT,\n 'summary<<' + eof + '\\n' + summary + '\\n' + eof + '\\n' +\n 'prompt<<' + eof + '\\n' + prompt + '\\n' + eof + '\\n'\n );\n \"\n env:\n STALE_JSON: ${{ steps.stale.outputs.stale_json }}\n\n - name: Open review PR\n if: steps.stale.outputs.has_stale == 'true'\n env:\n GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n run: |\n VERSION=\"${{ github.event.release.tag_name || 'manual' }}\"\n BRANCH=\"skills/review-${VERSION}\"\n\n git config user.name \"github-actions[bot]\"\n git config user.email \"41898282+github-actions[bot]@users.noreply.github.com\"\n git checkout -b \"$BRANCH\"\n git commit --allow-empty -m \"chore: review stale skills for ${VERSION}\"\n git push origin \"$BRANCH\"\n\n gh pr create \\\n --title \"Review stale skills (${VERSION})\" \\\n --body \"$(cat <<'PREOF'\n ## Stale Skills Detected\n\n The following skills may need updates after the latest release:\n\n ${{ steps.summary.outputs.summary }}\n\n ---\n\n ### Update Prompt\n\n Paste this into your coding agent (Claude Code, Cursor, etc.):\n\n ~~~\n ${{ steps.summary.outputs.prompt }}\n ~~~\n\n PREOF\n )\" \\\n --head \"$BRANCH\" \\\n --base main\n" }, { "path": ".github/workflows/client-nav-benchmarks.yml", "content": "# Setup taken from https://codspeed.io/docs/benchmarks/nodejs/vitest\nname: Benchmarks\n\non:\n push:\n branches:\n - 'main'\n paths:\n - 'packages/**'\n - 'benchmarks/**'\n pull_request:\n paths:\n - 'packages/**'\n - 'benchmarks/**'\n workflow_dispatch:\n\npermissions:\n contents: read # required for actions/checkout\n id-token: write # required for OIDC authentication with CodSpeed\n\nenv:\n NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}\n SERVER_PRESET: 'node-server'\n NX_NO_CLOUD: true\n\njobs:\n benchmarks:\n name: Run ${{ matrix.benchmark }}:${{ matrix.framework }} CodSpeed benchmark\n strategy:\n fail-fast: false\n matrix:\n framework:\n - react\n - solid\n - vue\n benchmark:\n - client-nav\n - ssr\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n\n - name: Run ${{ matrix.benchmark }}:${{ matrix.framework }} CodSpeed benchmark\n continue-on-error: true\n uses: CodSpeedHQ/action@v4\n with:\n mode: simulation\n run: WITH_INSTRUMENTATION=1 pnpm nx run @benchmarks/${{ matrix.benchmark }}:test:perf:${{ matrix.framework }}\n" }, { "path": ".github/workflows/labeler.yml", "content": "name: Labeler\n\non:\n pull_request_target:\n\npermissions:\n contents: read\n pull-requests: write\n\njobs:\n labeler:\n runs-on: ubuntu-latest\n steps:\n - name: Labeller\n uses: actions/labeler@v6.0.1\n with:\n repo-token: ${{ secrets.GITHUB_TOKEN }}\n configuration-path: labeler-config.yml\n" }, { "path": ".github/workflows/notify-playbooks.yml", "content": "# notify-intent.yml โ€” Drop this into your library repo's .github/workflows/\n#\n# Fires a repository_dispatch event to TanStack/intent whenever docs or\n# source files change on merge to main. This triggers the skill staleness\n# check workflow in the intent repo.\n#\n# Requirements:\n# - A fine-grained PAT with contents:write on TanStack/intent stored\n# as the INTENT_NOTIFY_TOKEN repository secret.\n#\n# Template variables (replaced by `intent setup`):\n# @tanstack/react-router โ€” e.g. @tanstack/query\n# docs/** โ€” e.g. docs/**\n# packages/*/src/** โ€” e.g. packages/query-core/src/**\n#\n# Adapted for TanStack Router monorepo: watches all packages.\n\nname: Notify Intent\n\non:\n push:\n branches: [main]\n paths:\n - 'docs/**'\n - 'packages/*/src/**'\n\njobs:\n notify:\n name: Notify TanStack Intent\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n with:\n fetch-depth: 2\n\n - name: Collect changed files\n id: changes\n run: |\n FILES=$(git diff --name-only HEAD~1 HEAD | jq -R -s -c 'split(\"\\n\") | map(select(length > 0))')\n echo \"files=$FILES\" >> \"$GITHUB_OUTPUT\"\n\n - name: Dispatch to intent repo\n uses: peter-evans/repository-dispatch@v3\n with:\n token: ${{ secrets.INTENT_NOTIFY_TOKEN }}\n repository: TanStack/intent\n event-type: skill-check\n client-payload: |\n {\n \"package\": \"@tanstack/router\",\n \"sha\": \"${{ github.sha }}\",\n \"changed_files\": ${{ steps.changes.outputs.files }}\n }\n" }, { "path": ".github/workflows/pr.yml", "content": "name: PR\n\non:\n pull_request:\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.ref }}\n cancel-in-progress: true\n\nenv:\n NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}\n SERVER_PRESET: 'node-server'\n\npermissions:\n contents: read\n pull-requests: write\n\njobs:\n test:\n name: Test\n runs-on: ubuntu-latest\n env:\n TSR_TMP_DIR: ./tmp\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n with:\n fetch-depth: 0\n - name: Start Nx Agents\n run: npx nx-cloud start-ci-run --distribute-on=\".nx/workflows/dynamic-changesets.yaml\"\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n - name: Get base and head commits for `nx affected`\n uses: nrwl/nx-set-shas@v4.4.0\n with:\n main-branch-name: main\n - name: Run Checks\n run: pnpm run test:pr --parallel=3\n - name: Stop Nx Agents\n if: ${{ always() }}\n run: npx nx-cloud stop-all-agents\n preview:\n name: Preview\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n with:\n fetch-depth: 0\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n - name: Build Packages\n run: pnpm run build:all\n - name: Publish Previews\n run: pnpx pkg-pr-new publish --pnpm './packages/*' --template './examples/*/*'\n version-preview:\n name: Version Preview\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n - name: Changeset Preview\n uses: TanStack/config/.github/changeset-preview@main\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches: [main, '*-pre', '*-maint']\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.ref }}\n cancel-in-progress: false\n\nenv:\n NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}\n SERVER_PRESET: 'node-server'\n\npermissions:\n contents: write\n id-token: write\n pull-requests: write\n\njobs:\n release:\n name: Release\n if: \"!contains(github.event.head_commit.message, 'ci: changeset release')\"\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6.0.2\n with:\n fetch-depth: 0\n - name: Check for changesets\n id: changesets\n run: |\n CHANGESET_FILES=$(ls .changeset/*.md 2>/dev/null | grep -v README.md || true)\n if [ -z \"$CHANGESET_FILES\" ]; then\n echo \"has_changesets=false\" >> \"$GITHUB_OUTPUT\"\n else\n echo \"has_changesets=true\" >> \"$GITHUB_OUTPUT\"\n fi\n - name: Start Nx Agents\n if: steps.changesets.outputs.has_changesets == 'true'\n run: npx nx-cloud start-ci-run --distribute-on=\".nx/workflows/dynamic-changesets.yaml\"\n - name: Setup Tools\n uses: TanStack/config/.github/setup@main\n - name: Run Tests\n if: steps.changesets.outputs.has_changesets == 'true'\n run: pnpm run test:ci --parallel=3\n - name: Stop Nx Agents\n if: ${{ always() && steps.changesets.outputs.has_changesets == 'true' }}\n run: npx nx-cloud stop-all-agents\n - name: Enter Pre-Release Mode\n if: \"contains(github.ref_name, '-pre') && !hashFiles('.changeset/pre.json')\"\n run: pnpm changeset pre enter pre\n - name: Version Packages\n run: pnpm run changeset:version\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n - name: Commit and Push Version Changes\n id: commit\n run: |\n git config user.name \"github-actions[bot]\"\n git config user.email \"github-actions[bot]@users.noreply.github.com\"\n git add .\n if git commit -m \"ci: changeset release\"; then\n git push\n echo \"committed=true\" >> \"$GITHUB_OUTPUT\"\n fi\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n - name: Determine dist-tag\n if: steps.commit.outputs.committed == 'true'\n id: dist-tag\n run: |\n BRANCH=\"${GITHUB_REF_NAME}\"\n if [[ \"$BRANCH\" == *-pre ]]; then\n echo \"prerelease=true\" >> \"$GITHUB_OUTPUT\"\n elif [[ \"$BRANCH\" == *-maint ]]; then\n echo \"tag=maint\" >> \"$GITHUB_OUTPUT\"\n else\n echo \"latest=true\" >> \"$GITHUB_OUTPUT\"\n fi\n - name: Publish Packages\n if: steps.commit.outputs.committed == 'true'\n run: pnpm run changeset:publish ${{ steps.dist-tag.outputs.tag && format('--tag {0}', steps.dist-tag.outputs.tag) }}\n - name: Create GitHub Release\n if: steps.commit.outputs.committed == 'true'\n run: node scripts/create-github-release.mjs ${{ steps.dist-tag.outputs.prerelease == 'true' && '--prerelease' }} ${{ steps.dist-tag.outputs.latest == 'true' && '--latest' }}\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/validate-skills.yml", "content": "# validate-skills.yml โ€” Drop this into your library repo's .github/workflows/\n#\n# Validates skill files on PRs that touch the skills/ directory.\n# Ensures frontmatter is correct, names match paths, and files stay under\n# the 500-line limit.\n\nname: Validate Skills\n\non:\n pull_request:\n paths:\n - 'skills/**'\n - '**/skills/**'\n\njobs:\n validate:\n name: Validate skill files\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Setup Node\n uses: actions/setup-node@v4\n with:\n node-version: 20\n\n - name: Install intent CLI\n run: npm install -g @tanstack/intent\n\n - name: Find and validate skills\n run: |\n # Find all directories containing SKILL.md files\n SKILLS_DIR=\"\"\n if [ -d \"skills\" ]; then\n SKILLS_DIR=\"skills\"\n elif [ -d \"packages\" ]; then\n # Monorepo โ€” find skills/ under packages\n for dir in packages/*/skills; do\n if [ -d \"$dir\" ]; then\n echo \"Validating $dir...\"\n intent validate \"$dir\"\n fi\n done\n exit 0\n fi\n\n if [ -n \"$SKILLS_DIR\" ]; then\n intent validate \"$SKILLS_DIR\"\n else\n echo \"No skills/ directory found โ€” skipping validation.\"\n fi\n" }, { "path": ".gitignore", "content": ".vite\n# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\npackage-lock.json\nyarn.lock\n\n# builds\ntypes\nbuild\n*/build\ndist\n.output\nlib\nes\nartifacts\n.rpt2_cache\ncoverage\n*.tgz\n.wrangler\n\n# tests\npackages/router-generator/tests/**/*.gen.ts\npackages/router-generator/tests/**/*.gen.js\n**/port*.txt\n**/test-results/\n\n# Playwright artifacts\n**/playwright-report/\n**/blob-report/\n\n# misc\n.DS_Store\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n.next\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.history\nsize-plugin.json\nstats-hydration.json\nstats-react.json\nstats.html\n.vscode/settings.json\n\n*.log\n.DS_Store\n.cache\n.pnpm-store\nts-perf\n\n/examples/*/*/yarn.lock\n/examples/*/*/package-lock.json\n\n.netlify\n\nnx-cloud.env\n.nx/cache\n.nx/workspace-data\n\ngpt/db.json\n\nvite.config.timestamp-*\nvite.config.js.timestamp-*\nvite.config.ts.timestamp-*\n\nvite.config.timestamp_*\nvite.config.js.timestamp_*\nvite.config.ts.timestamp_*\n\n.idea\n*.vitest-temp.json\n\n# Handling VSCode settings\n/.vscode/\n!/examples/react/**/.vscode/settings.json\n\n**/llms\n\n**/.tanstack\n" }, { "path": ".npmrc", "content": "provenance=true\n" }, { "path": ".nvmrc", "content": "24.8.0\n" }, { "path": ".nx/workflows/dynamic-changesets.yaml", "content": "distribute-on:\n small-changeset: 3 linux-medium-js\n medium-changeset: 6 linux-medium-js\n large-changeset: 10 linux-medium-js\n" }, { "path": ".prettierignore", "content": "**/.next\n**/.nx/cache\n**/.svelte-kit\n**/build\n**/coverage\n**/dist\npnpm-lock.yaml\n**/snapshots\n**/.vercel\n**/.output\n**/node_modules\nnode_modules\n\n**/test-results\n**/tests/generator/file-modification/routes/(test)/*\n**/tests/generator/**/routeTree*.snapshot.ts\n/.nx/workspace-data\n**/src/routeTree.gen.ts\n" }, { "path": "AGENTS.md", "content": "# AGENTS.md\n\n## Project overview\n\nTanStack Router is a type-safe router with built-in caching and URL state management for React and Solid applications. This monorepo contains two main products:\n\n- **TanStack Router** - Core routing library with type-safe navigation, search params, and path params\n- **TanStack Start** - Full-stack framework built on top of TanStack Router\n\n## Setup commands\n\n- Install deps: `pnpm install`\n- Setup e2e testing: `pnpm exec playwright install`\n- Build packages: `pnpm build` (affected) or `pnpm build:all` (force all)\n- Start dev server: `pnpm dev`\n- Run tests: `pnpm test`\n\n## Code style\n\n- TypeScript strict mode with extensive type safety\n- Framework-agnostic core logic separated from React/Solid bindings\n- Type-safe routing with search params and path params\n- Use workspace protocol for internal dependencies (`workspace:*`)\n\n## Dev environment tips\n\n- This is a pnpm workspace monorepo with packages organized by functionality\n- Nx provides caching, affected testing, targeting, and parallel execution for efficiency\n- Use `pnpm nx show projects` to list all available packages\n- Target specific packages: `pnpm nx run @tanstack/react-router:test:unit`\n- Target multiple packages: `pnpm nx run-many --target=test:eslint --projects=@tanstack/history,@tanstack/router-core`\n- Run affected tests only: `pnpm nx affected --target=test:unit`\n- Exclude patterns: `pnpm nx run-many --target=test:unit --exclude=\"examples/**,e2e/**\"`\n- Navigate to examples and run `pnpm dev` to test changes: `cd examples/react/basic && pnpm dev`\n- **Granular unit testing through Nx (recommended):**\n - Specific files: `pnpm nx run @tanstack/react-router:test:unit -- tests/link.test.tsx tests/Scripts.test.tsx`\n - Test patterns: `pnpm nx run @tanstack/react-router:test:unit -- tests/ClientOnly.test.tsx -t \"should render fallback\"`\n - Name patterns: `pnpm nx run @tanstack/react-router:test:unit -- -t \"navigation\"` (all tests with \"navigation\" in name)\n - Exclude patterns: `pnpm nx run @tanstack/react-router:test:unit -- --exclude=\"**/*link*\" tests/`\n - List tests: `pnpm nx run @tanstack/react-router:test:unit -- list tests/link.test.tsx` (or `-- list` for all)\n- **Available test targets per package:** `test:unit`, `test:types`, `test:eslint`, `test:build`, `test:perf`, `build`\n- **Testing strategy:** Package level (nx) โ†’ File-level args via nx โ†’ Test-level args (`-t`) via nx โ†’ Pattern-level args (`--exclude`) via nx\n- **Agent execution guardrails (important):**\n - Always prefer `pnpm nx ...` over `npx nx ...`.\n - Prefer Nx targets over direct test runners so task dependencies (including required builds) remain in the graph.\n - In sandbox, run Nx with `CI=1 NX_DAEMON=false pnpm nx run : --outputStyle=stream --skipRemoteCache`\n - Run only one Nx command at a time.\n - If an Nx command shows no output for ~20 seconds, stop, run `pnpm nx reset` once, and retry once.\n - Do not loop retries indefinitely. If it still hangs or sandbox blocks graph/daemon behavior, request escalation immediately.\n\n## Testing instructions\n\n- **Critical**: Always run unit and type tests during development - do not proceed if they fail\n- **Test types:** `pnpm test:unit`, `pnpm test:types`, `pnpm test:eslint`, `pnpm test:e2e`, `pnpm test:build`\n- **Full CI suite:** `pnpm test:ci`\n- **Fix formatting:** `pnpm format`\n- **Efficient targeted testing workflow:**\n 1. **Affected only:** `pnpm nx affected --target=test:unit` (compares to main branch)\n 2. **Specific packages:** `pnpm nx run @tanstack/react-router:test:unit`\n 3. **Specific files:** `pnpm nx run @tanstack/react-router:test:unit -- tests/link.test.tsx`\n 4. **Specific patterns:** `pnpm nx run @tanstack/react-router:test:unit -- tests/link.test.tsx -t \"preloading\"`\n- **Pro tips:**\n - Use `pnpm nx run @tanstack/react-router:test:unit -- list` to explore available tests before running\n - Use `-t \"pattern\"` to focus on specific functionality during development\n - Use `--exclude` patterns to skip unrelated tests\n - Keep all test filtering arguments behind `pnpm nx run ... -- ...` for maximum precision while preserving task dependencies\n- **Example workflow:** `pnpm nx run @tanstack/react-router:test:unit` โ†’ `pnpm nx run @tanstack/react-router:test:unit -- tests/link.test.tsx` โ†’ `pnpm nx run @tanstack/react-router:test:unit -- tests/link.test.tsx -t \"preloading\"`\n\n## PR instructions\n\n- Always run `pnpm test:eslint`, `pnpm test:types`, and `pnpm test:unit` before committing\n- Test changes in relevant example apps: `cd examples/react/basic && pnpm dev`\n- Update corresponding documentation in `docs/` directory when adding features\n- Add or update tests for any code changes\n- Use internal docs links relative to `docs/` folder (e.g., `./guide/data-loading`)\n\n## Package structure\n\n**Core packages:**\n\n- `packages/router-core/` - Framework-agnostic core router logic\n- `packages/react-router/`, `packages/solid-router/` - React/Solid bindings and components\n- `packages/history/` - Browser history management\n\n**Tooling:**\n\n- `packages/router-cli/` - CLI tools for code generation\n- `packages/router-generator/` - Route generation utilities\n- `packages/router-plugin/` - Universal bundler plugins (Vite, Webpack, ESBuild, Rspack)\n- `packages/virtual-file-routes/` - Virtual file routing system\n\n**Developer experience:**\n\n- `packages/router-devtools/`, `packages/*-router-devtools/` - Development tools\n- `packages/eslint-plugin-router/` - ESLint rules for router\n\n**Validation adapters:**\n\n- `packages/zod-adapter/`, `packages/valibot-adapter/`, `packages/arktype-adapter/`\n\n**Start framework:**\n\n- `packages/*-start/`, `packages/start-*/` - Full-stack framework packages\n\n**Examples & testing:**\n\n- `examples/react/`, `examples/solid/` - Example applications (test changes here)\n- `e2e/` - End-to-end tests (requires Playwright)\n- `docs/router/`, `docs/start/` - Documentation with React/Solid subdirectories\n\n**Dependencies:** Uses workspace protocol (`workspace:*`) - core โ†’ framework โ†’ start packages\n\n## Common development tasks\n\n**Adding new routes:**\n\n- Use file-based routing in `src/routes/` directories\n- Or use code-based routing with route definitions\n- Run route generation with CLI tools\n\n**Testing changes:**\n\n- Build packages: `pnpm build` or `pnpm dev` (watch mode)\n- Run example apps to test functionality\n- Use devtools for debugging router state\n\n**Documentation updates:**\n\n- Update relevant docs in `docs/` directory\n- Ensure examples reflect documentation changes\n- Test documentation links and references\n- Use relative links to `docs/` folder format\n\n## Framework-specific notes\n\n**React:**\n\n- Uses React Router components and hooks\n- Supports React Server Components (RSC)\n- Examples include React Query integration\n- Package: `@tanstack/react-router`\n\n**Solid:**\n\n- Uses Solid Router components and primitives\n- Supports Solid Start for full-stack applications\n- Examples include Solid Query integration\n- Package: `@tanstack/solid-router`\n\n## Environment requirements\n\n- **Node.js** - Required for development\n- **pnpm** - Package manager (required for workspace features)\n- **Playwright** - Required for e2e tests (`pnpm exec playwright install`)\n\n## Key architecture patterns\n\n- **Type Safety**: Extensive TypeScript for type-safe routing\n- **Framework Agnostic**: Core logic separated from framework bindings\n- **Plugin Architecture**: Universal bundler plugins using unplugin\n- **File-based Routing**: Support for both code-based and file-based routing\n- **Search Params**: First-class support for type-safe search parameters\n\n## Development workflow\n\n1. **Setup**: `pnpm install` and `pnpm exec playwright install`\n2. **Build**: `pnpm build:all` or `pnpm dev` for watch mode\n3. **Test**: Make changes and run relevant tests (use nx for targeted testing)\n4. **Examples**: Navigate to examples and run `pnpm dev` to test changes\n5. **Quality**: Run `pnpm test:eslint`, `pnpm test:types`, `pnpm test:unit` before committing\n\n## References\n\n- **Documentation**: https://tanstack.com/router\n- **GitHub**: https://github.com/TanStack/router\n- **Discord Community**: https://discord.com/invite/WrRKjPJ\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\n- Clone the repo\n - `gh repo clone TanStack/router`\n- Ensure `node` is installed\n - https://nodejs.org/en/\n- Ensure `pnpm` is installed\n - https://pnpm.io/installation\n - Why? We use `pnpm` to manage workspace dependencies. It's easily the best monorepo/workspace experience available as of when this was written.\n- Install dependencies\n - `pnpm install`\n - This installs dependencies for all of the packages in the monorepo, even examples!\n - Dependencies inside of the packages and examples are automatically linked together as local/dynamic dependencies.\n- Install test dependencies\n - `pnpm exec playwright install` (required for e2e tests)\n- Run the build or dev watcher\n - `pnpm build:all` (build all packages) or\n - `pnpm build` (cached build with [nx affected](https://nx.dev/nx-api/nx/documents/affected)) or\n - `pnpm dev`\n- Navigate to an example\n - `cd examples/react/basic`\n- Run the example\n - `pnpm dev`\n- Make changes to the code\n - If you ran `pnpm dev` the dev watcher will automatically rebuild the code that has changed\n- Editing the docs locally and previewing the changes\n - The documentations for all the TanStack projects are hosted on [tanstack.com](https://tanstack.com), which is a TanStack Start application (https://github.com/TanStack/tanstack.com). You need to run this app locally to preview your changes in the `TanStack/router` docs.\n\n> [!NOTE]\n> The website fetches the doc pages from GitHub in production, and searches for them at `../router/docs` in development. Your local clone of `TanStack/router` needs to be in the same directory as the local clone of `TanStack/tanstack.com`.\n\nYou can follow these steps to set up the docs for local development:\n\n1. Make a new directory called `tanstack`.\n\n```sh\nmkdir tanstack\n```\n\n2. Enter that directory and clone the [`TanStack/router`](https://github.com/TanStack/router) and [`TanStack/tanstack.com`](https://github.com/TanStack/tanstack.com) repos.\n\n```sh\ncd tanstack\ngit clone git@github.com:TanStack/router.git\n# We probably don't need all the branches and commit history\n# from the `tanstack.com` repo, so let's just create a shallow\n# clone of the latest version of the `main` branch.\n# Read more about shallow clones here:\n# https://github.blog/2020-12-21-get-up-to-speed-with-partial-clone-and-shallow-clone/#user-content-shallow-clones\ngit clone git@github.com:TanStack/tanstack.com.git --depth=1 --single-branch --branch=main\n```\n\n> [!NOTE]\n> Your `tanstack` directory should look like this:\n>\n> ```\n> tanstack/\n> |\n> +-- router/ (<-- this directory cannot be called anything else!)\n> |\n> +-- tanstack.com/\n> ```\n\n3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:\n\n```sh\ncd tanstack.com\npnpm i\n# The app will run on https://localhost:3000 by default\npnpm dev\n```\n\n4. Now you can visit http://localhost:3000/router/latest/docs/framework/react/overview in the browser and see the changes you make in `tanstack/router/docs` there.\n\n> [!WARNING]\n> You will need to update the `docs/(router or start)config.json` file (in `TanStack/router`) if you add a new documentation page!\n\nYou can see the whole process in the screen capture below:\n\nhttps://github.com/fulopkovacs/form/assets/43729152/9d35a3c3-8153-4e74-9cb2-af275f7a269b\n" }, { "path": "DEBUGGING.md", "content": "# Debugging & Testing Guide\n\n_A practical guide for debugging complex issues and running tests effectively, learned from investigating production regressions in large codebases._\n\n## Quick Start Debugging Checklist\n\nWhen you encounter a bug report or failing test:\n\n1. **Reproduce first** - Create a minimal test case that demonstrates the exact issue\n2. **Establish baseline** - Run existing tests to see what currently works/breaks\n3. **Add targeted logging** - Insert debug output at key decision points\n4. **Trace the data flow** - Follow the path from input to unexpected output\n5. **Check recent changes** - Look for version changes mentioned in bug reports\n6. **Test your hypothesis** - Make small, targeted changes and validate each step\n\n## Essential Testing Commands\n\n### Monorepo with Nx\n\n```bash\n# Run all tests for a package\nnpx nx test:unit @package-name\n\n# Run specific test file\nnpx nx test:unit @package-name -- --run path/to/test.test.tsx\n\n# Run tests matching a pattern\nnpx nx test:unit @package-name -- --run \"pattern-in-test-name\"\n\n# Run with verbose output\nnpx nx test:unit @package-name -- --run --verbose\n```\n\n### Standard npm/yarn projects\n\n```bash\n# Run specific test file\nnpm test -- --run path/to/test.test.tsx\nyarn test path/to/test.test.tsx\n\n# Run tests matching pattern\nnpm test -- --grep \"test pattern\"\n```\n\n### Useful test flags\n\n```bash\n# Run only (don't watch for changes)\n--run\n\n# Show full output including console.logs\n--verbose\n\n# Run in specific environment\n--environment=jsdom\n```\n\n## Effective Debugging Strategies\n\n### 1. Strategic Logging\n\n```javascript\n// Use distinctive prefixes for easy filtering\nconsole.log('[DEBUG useNavigate] from:', from, 'to:', to)\nconsole.log('[DEBUG router] current location:', state.location.pathname)\n\n// Log both input and output of functions\nconsole.log('[DEBUG buildLocation] input:', dest)\n// ... function logic ...\nconsole.log('[DEBUG buildLocation] output:', result)\n```\n\n**Pro tip:** Use `[DEBUG componentName]` prefixes so you can easily filter logs in browser dev tools.\n\n### 2. Reproduction Test Pattern\n\n```javascript\ntest('should reproduce the exact issue from bug report', async () => {\n // Set up the exact scenario described\n const router = createRouter({\n /* exact config from bug report */\n })\n\n // Perform the exact user actions\n await navigate({ to: '/initial-route' })\n await navigate({ to: '.', search: { param: 'value' } })\n\n // Assert the expected vs actual behavior\n expect(router.state.location.pathname).toBe('/expected')\n // This should fail initially, proving reproduction\n})\n```\n\n### 3. Data Flow Tracing\n\n```\nUser Action โ†’ Hook Call โ†’ Router Logic โ†’ State Update โ†’ UI Update\n โ†“ โ†“ โ†“ โ†“ โ†“\n onClick() โ†’ useNavigate() โ†’ buildLocation() โ†’ setState() โ†’ re-render\n```\n\nAdd logging at each step to see where the flow diverges from expectations.\n\n## Common Pitfalls & Solutions\n\n### React Testing Issues\n\n**Problem:** State updates not reflected in tests\n\n```javascript\n// โŒ Bad - missing act() wrapper\nfireEvent.click(button)\nexpect(component.state).toBe(newValue)\n\n// โœ… Good - wrapped in act()\nact(() => {\n fireEvent.click(button)\n})\nexpect(component.state).toBe(newValue)\n```\n\n**Problem:** Async operations not completing\n\n```javascript\n// โŒ Bad - not waiting for async\nconst result = await someAsyncOperation()\nexpect(result).toBe(expected)\n\n// โœ… Good - ensuring completion\nawait act(async () => {\n await someAsyncOperation()\n})\nexpect(result).toBe(expected)\n```\n\n### React Router Specific Issues\n\n**Context vs Location confusion:**\n\n- `useMatch({ strict: false })` returns the **component's route context**\n- `router.state.location.pathname` returns the **current URL**\n- These can be different when components are rendered by parent routes\n\n```javascript\n// Component rendered by parent route \"/\" but URL is \"/child\"\nconst match = useMatch({ strict: false }) // Returns \"/\" context\nconst location = router.state.location.pathname // Returns \"/child\"\n```\n\n## Search & Investigation Commands\n\n### Finding relevant code\n\n```bash\n# Search for specific patterns in TypeScript/JavaScript files\ngrep -r \"navigate.*to.*\\.\" --include=\"*.ts\" --include=\"*.tsx\" .\n\n# Find files related to a feature\nfind . -name \"*navigate*\" -type f\n\n# Search with ripgrep (faster)\nrg \"useNavigate\" --type typescript\n```\n\n### Git investigation\n\n```bash\n# Find when a specific line was changed\ngit blame path/to/file.ts\n\n# See recent changes to a file\ngit log --oneline -10 path/to/file.ts\n\n# Search commit messages\ngit log --grep=\"navigation\" --oneline\n```\n\n## Testing Best Practices\n\n### Test Structure\n\n```javascript\ndescribe('Feature', () => {\n beforeEach(() => {\n // Reset state for each test\n cleanup()\n history = createBrowserHistory()\n })\n\n test('should handle specific scenario', async () => {\n // Arrange - set up the test conditions\n const router = createRouter(config)\n\n // Act - perform the action being tested\n await act(async () => {\n navigate({ to: '/target' })\n })\n\n // Assert - verify the results\n expect(router.state.location.pathname).toBe('/target')\n })\n})\n```\n\n### Multiple Assertions\n\n```javascript\ntest('navigation should update both path and search', async () => {\n await navigate({ to: '/page', search: { q: 'test' } })\n\n // Test multiple aspects\n expect(router.state.location.pathname).toBe('/page')\n expect(router.state.location.search).toEqual({ q: 'test' })\n expect(router.state.matches).toHaveLength(2)\n})\n```\n\n## Architecture Investigation Process\n\n### 1. Map the System\n\n```\nUser Input โ†’ Component โ†’ Hook โ†’ Core Logic โ†’ State โ†’ UI\n```\n\nIdentify each layer and what it's responsible for.\n\n### 2. Find the Divergence Point\n\nUse logging to identify exactly where expected behavior diverges:\n\n```javascript\nconsole.log('Input received:', input)\n// ... processing ...\nconsole.log('After step 1:', intermediate)\n// ... more processing ...\nconsole.log('Final output:', output) // Is this what we expected?\n```\n\n### 3. Check Assumptions\n\nCommon false assumptions:\n\n- \"This hook returns the current route\" (might return component context)\n- \"State updates are synchronous\" (often async in React)\n- \"This worked before\" (check if tests actually covered this case)\n\n## Regression Investigation\n\n### Version Comparison\n\n```bash\n# Check what changed between versions\ngit diff v1.120.13..v1.121.34 -- packages/react-router/\n\n# Look for specific changes\ngit log v1.120.13..v1.121.34 --oneline --grep=\"navigate\"\n```\n\n### Bisecting Issues\n\n```bash\n# Start bisect to find breaking commit\ngit bisect start\ngit bisect bad HEAD\ngit bisect good v1.120.13\n\n# Test each commit until you find the breaking change\n```\n\n## When to Stop & Reconsider\n\n**Stop changing code when:**\n\n- Your fix breaks multiple existing tests\n- You're changing fundamental assumptions\n- The solution feels hacky or overly complex\n\n**Consider instead:**\n\n- Adding a new API rather than changing existing behavior\n- Documenting the current behavior if it's actually correct\n- Creating a more targeted fix for the specific use case\n\n## Advanced Debugging Techniques\n\n### React DevTools\n\n- Inspect component tree to understand render context\n- Check props and state at each level\n- Use Profiler to identify performance issues\n\n### Browser DevTools\n\n```javascript\n// Add global debugging helpers\nwindow.debugRouter = router\nwindow.debugState = () => console.log(router.state)\n\n// Use conditional breakpoints\nif (router.state.location.pathname === '/problematic-route') {\n debugger\n}\n```\n\n### Test Isolation\n\n```javascript\n// Run only one test to isolate issues\ntest.only('this specific failing test', () => {\n // ...\n})\n\n// Skip problematic tests temporarily\ntest.skip('temporarily disabled', () => {\n // ...\n})\n```\n\n## Key Takeaways\n\n1. **Reproduction beats theory** - A failing test that demonstrates the issue is worth more than understanding the problem in theory\n\n2. **Existing tests are protection** - If your fix breaks many existing tests, you're probably changing the wrong thing\n\n3. **Context matters** - Especially in React, understanding where components are rendered and what context they have access to is crucial\n\n4. **Small changes, frequent validation** - Make small, targeted changes and test each one rather than large refactors\n\n5. **Sometimes the answer is \"don't change it\"** - Not every reported issue needs a code change; sometimes documentation or a new API is the right solution\n\n---\n\n_This guide was developed while investigating a navigation regression in TanStack Router, where `navigate({ to: \".\" })` unexpectedly redirected to the root instead of staying on the current route._\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2021-present Tanner Linsley\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "\n\n\n\n\n\n\n
\n\n\n\n## TanStack Router\n\nA modern router designed for type safety, dataโ€‘driven navigation, and seamless developer experience.\n\n- Endโ€‘to-end type safety (routes, params, loaders)\n- Schemaโ€‘driven search params with validation\n- Builtโ€‘in caching, prefetching & invalidation\n- Nested layouts, transitions & error boundaries\n\n### [Read the Router Docs โ†’](https://tanstack.com/router)\n\n\n\n\n\n## TanStack Start\n\nA fullโ€‘stack framework built on Router, designed for server rendering, streaming, and productionโ€‘ready deployments.\n\n- Fullโ€‘document SSR & streaming\n- Server functions & endโ€‘toโ€‘end type safety\n- Deploymentโ€‘ready bundling & builds\n- All the power of TanStack Router, plus fullโ€‘stack features\n\n### [Read the Start Docs โ†’](https://tanstack.com/start)\n\n
\n\n
\n\n

\n \"npm \"GitHub \"Bundle\n

\n

\n \"semantic-release\" \"Best \"Follow\n

\n\n
\n\n### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)\n\n
\n\n## Get Involved\n\n- We welcome issues and pull requests!\n- Participate in [GitHub discussions](https://github.com/TanStack/router/discussions)\n- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)\n- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions\n\n## Partners\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \"CodeRabbit\"\n \n \n \n \n \n \n \n \"Cloudflare\"\n \n \n \n \n \n \n \n \"Netlify\"\n \n \n
\n \n\t\t \n\t \n\t \n\t \"Neon\"\n\t\t \n\t \n \n \n \n \n \n \"Clerk\"\n \n \n \n \n \n \n \n \"Convex\"\n \n \n
\n \n \n \n \n \"Sentry\"\n \n \n \n \n \n \n \n \"Prisma\"\n \n \n \n \n \n \n \n \"Strapi\"\n \n \n
\n\n
\n\"Router\n

\nWe're looking for TanStack Router & Start Partners to join our mission! Partner with us to push the boundaries of TanStack Router & Start and build amazing things together.\n

\nLET'S CHAT\n
\n\n## Explore the TanStack Ecosystem\n\n- TanStack Config โ€“ Tooling for JS/TS packages\n- TanStack DB โ€“ Reactive sync client store\n- TanStack DevTools โ€“ Unified devtools panel\n- TanStack Form โ€“ Typeโ€‘safe form state\n- TanStack Pacer โ€“ Debouncing, throttling, batching
\n- TanStack Query โ€“ Async state & caching\n- TanStack Ranger โ€“ Range & slider primitives\n- TanStack Store โ€“ Reactive data store\n- TanStack Table โ€“ Headless datagrids\n- TanStack Virtual โ€“ Virtualized rendering\n\nโ€ฆ and more at TanStack.com ยป\n\n\n" }, { "path": "_artifacts/domain_map.yaml", "content": "# domain_map.yaml\n# Generated by skill-domain-discovery\n# Library: TanStack Router\n# Version: 1.166.2\n# Date: 2026-03-07\n# Status: reviewed\n\nlibrary:\n name: '@tanstack/react-router'\n version: '1.166.2'\n repository: 'https://github.com/TanStack/router'\n description: >-\n Type-safe router for React and Solid with built-in SWR caching,\n JSON-first search params, file-based route generation, and\n end-to-end type inference.\n primary_framework: 'React'\n\ndomains:\n - name: 'Defining Routes'\n slug: 'defining-routes'\n description: >-\n Setting up route trees via file-based, code-based, or virtual\n file routes, configuring the router instance, and registering\n types for end-to-end inference.\n\n - name: 'Navigating'\n slug: 'navigating'\n description: >-\n Moving between routes using Links, imperative navigation,\n redirects, preloading, active states, and navigation blocking.\n\n - name: 'Managing URL State'\n slug: 'managing-url-state'\n description: >-\n Reading and writing search params and path params with\n validation, serialization, middlewares, and type-safe adapters.\n\n - name: 'Loading Data'\n slug: 'loading-data'\n description: >-\n Fetching data via route loaders, coordinating external caches,\n managing SWR caching, deferred loading, and error/pending states.\n\n - name: 'Protecting Routes'\n slug: 'protecting-routes'\n description: >-\n Authentication guards, authorization checks, RBAC patterns,\n and redirect-based access control via beforeLoad.\n\n - name: 'Rendering and Layout'\n slug: 'rendering-and-layout'\n description: >-\n Outlets, nested layouts, pathless layouts, code splitting,\n error boundaries, not-found handling, route masking, scroll\n restoration, and document head management.\n\n - name: 'Type Safety'\n slug: 'type-safety'\n description: >-\n Router type registration, inference patterns, narrowing with\n from, TypeScript performance, and avoiding unnecessary type\n annotations.\n\n - name: 'Server-Side Rendering'\n slug: 'server-side-rendering'\n description: >-\n Non-streaming and streaming SSR setup, hydration, data\n serialization, and isomorphic router creation.\n\nskills:\n # โ”€โ”€ Defining Routes โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Route Setup'\n slug: 'route-setup'\n domain: 'defining-routes'\n description: >-\n Set up a TanStack Router project with file-based, code-based,\n or virtual file routes, configure the router instance, and\n register types.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n - '@tanstack/router-plugin'\n - '@tanstack/router-generator'\n - '@tanstack/router-cli'\n - '@tanstack/virtual-file-routes'\n - '@tanstack/eslint-plugin-router'\n covers:\n - createRouter\n - createRootRoute\n - createRootRouteWithContext\n - createRoute\n - createFileRoute\n - createLazyFileRoute\n - addChildren\n - routeTree.gen.ts\n - declare module Register\n - TanStackRouter bundler plugin\n - tsr.config.json\n - virtual file routes API\n - file naming conventions\n - route matching and sorting\n tasks:\n - 'Scaffold a new TanStack Router project'\n - 'Configure file-based routing with Vite plugin'\n - 'Set up code-based route tree manually'\n - 'Configure virtual file routes for custom conventions'\n - 'Register router types via module declaration'\n - 'Set up ESLint plugin for route property ordering'\n reference_candidates:\n - topic: 'file naming conventions'\n reason: '>10 distinct conventions (dot separator, $ token, _ prefix/suffix, () groups, [] escaping, index, route.tsx, __root)'\n failure_modes:\n - mistake: 'Missing router type registration'\n mechanism: >-\n Without declare module Register, top-level exports like\n Link, useNavigate, useParams have no type safety. Code\n compiles but all route paths are untyped strings.\n wrong_pattern: |\n const router = createRouter({ routeTree })\n // no declare module โ€” Link to=\"\" has no autocomplete\n correct_pattern: |\n const router = createRouter({ routeTree })\n declare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n }\n source: 'docs/router/guide/creating-a-router.md'\n priority: CRITICAL\n status: active\n skills: ['route-setup', 'type-safety']\n\n - mistake: 'Not committing routeTree.gen.ts'\n mechanism: >-\n routeTree.gen.ts is runtime code, not a build artifact.\n Without it in version control, other developers cannot\n build or run the project.\n source: 'docs/router/faq.md'\n priority: HIGH\n status: active\n\n - mistake: 'Wrong route property order breaks type inference'\n mechanism: >-\n Properties like beforeLoad must come before loader in\n createRoute/createFileRoute calls. Incorrect order causes\n context types to not flow into loader.\n wrong_pattern: |\n createFileRoute('/posts')({\n loader: ({ context }) => context.queryClient.ensureQueryData(postsQuery),\n beforeLoad: ({ context }) => ({ queryClient: context.queryClient }),\n })\n correct_pattern: |\n createFileRoute('/posts')({\n beforeLoad: ({ context }) => ({ queryClient: context.queryClient }),\n loader: ({ context }) => context.queryClient.ensureQueryData(postsQuery),\n })\n source: 'docs/router/eslint/create-route-property-order.md'\n priority: HIGH\n status: active\n\n - mistake: 'Placing TanStackRouter plugin after framework plugin'\n mechanism: >-\n The TanStackRouter Vite plugin must be listed before the\n React/Solid plugin in the Vite config. Wrong order causes\n route generation to fail silently.\n wrong_pattern: |\n plugins: [react(), TanStackRouterVite()]\n correct_pattern: |\n plugins: [TanStackRouterVite(), react()]\n source: 'docs/router/installation/with-vite.md'\n priority: HIGH\n status: active\n\n - mistake: 'Using getParentRoute incorrectly in code-based routing'\n mechanism: >-\n Every non-root route must reference its correct parent via\n getParentRoute. Wrong parent breaks type inference for\n context, search params, and path params from ancestors.\n source: 'docs/router/decisions-on-dx.md'\n priority: HIGH\n status: active\n\n compositions:\n - library: '@tanstack/eslint-plugin-router'\n skill: null\n\n # โ”€โ”€ Navigating โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Navigation'\n slug: 'navigation'\n domain: 'navigating'\n description: >-\n Navigate between routes using Link, useNavigate, Navigate\n component, and router.navigate. Configure preloading, active\n link states, and navigation blocking.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - Link component\n - useNavigate hook\n - Navigate component\n - router.navigate\n - ToOptions / NavigateOptions / LinkOptions\n - from / to relative navigation\n - activeOptions / activeProps / inactiveProps\n - preload (intent / viewport / render)\n - preloadDelay / defaultPreloadDelay\n - useBlocker hook\n - Block component\n - createLink (custom link components)\n - linkOptions helper\n - MatchRoute component\n - scroll restoration\n tasks:\n - 'Create type-safe links between routes'\n - 'Navigate programmatically after an action'\n - 'Set up link preloading on hover intent'\n - 'Style active and inactive links'\n - 'Block navigation for unsaved changes'\n - 'Create custom link components with createLink'\n - 'Build reusable navigation options with linkOptions'\n - 'Configure scroll restoration'\n failure_modes:\n - mistake: 'Interpolating params into the to string'\n mechanism: >-\n Agents build paths like to={`/posts/${id}`} instead of\n using the params option. Breaks type safety and param\n encoding.\n wrong_pattern: |\n Post\n correct_pattern: |\n Post\n source: 'docs/router/guide/navigation.md'\n priority: CRITICAL\n status: active\n skills: ['navigation', 'type-safety']\n\n - mistake: 'Using useNavigate instead of Link for user-clickable elements'\n mechanism: >-\n Link renders a real with href, supports cmd/ctrl+click\n and preloading. useNavigate produces no accessible element.\n source: 'docs/router/guide/navigation.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Not providing from for relative navigation'\n mechanism: >-\n Without from, the router assumes navigation from root.\n Only absolute paths are autocompleted. Relative paths\n like \"..\" resolve from root instead of current route.\n wrong_pattern: |\n Back\n correct_pattern: |\n Back\n source: 'docs/router/guide/navigation.md'\n priority: HIGH\n status: active\n\n - mistake: 'Using search as object instead of function loses existing params'\n mechanism: >-\n search={{ page: 2 }} replaces all search params.\n Must use function form to preserve existing params.\n wrong_pattern: |\n Page 2\n correct_pattern: |\n ({ ...prev, page: 2 })}>Page 2\n source: 'docs/router/how-to/navigate-with-search-params.md'\n priority: HIGH\n status: active\n skills: ['navigation', 'search-params']\n\n # โ”€โ”€ Managing URL State โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Search Params'\n slug: 'search-params'\n domain: 'managing-url-state'\n description: >-\n Validate, read, write, and transform search params with\n schema validation, adapters, middlewares, and custom\n serialization.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n - '@tanstack/zod-adapter'\n - '@tanstack/valibot-adapter'\n - '@tanstack/arktype-adapter'\n covers:\n - validateSearch\n - useSearch hook\n - Route.useSearch\n - getRouteApi().useSearch\n - search middlewares\n - retainSearchParams\n - stripSearchParams\n - custom serialization (parseSearch / stringifySearch)\n - zod adapter / valibot adapter / arktype adapter\n - search param inheritance from parent routes\n - structural sharing for search params\n tasks:\n - 'Add validated search params to a route'\n - 'Read search params in components'\n - 'Update search params while preserving others'\n - 'Share search params across parent and child routes'\n - 'Set up search param middlewares for retention/stripping'\n - 'Configure custom search param serialization'\n - 'Handle arrays, objects, and dates in search params'\n subsystems:\n - name: 'Zod adapter'\n package: '@tanstack/zod-adapter'\n config_surface: 'zodValidator, fallback() wrapper for .catch/.default type correctness'\n - name: 'Valibot adapter'\n package: '@tanstack/valibot-adapter'\n config_surface: 'Standard Schema compliant, requires valibot 1.0'\n - name: 'ArkType adapter'\n package: '@tanstack/arktype-adapter'\n config_surface: 'Standard Schema compliant, requires arktype 2.0-rc, pass directly to validateSearch'\n reference_candidates:\n - topic: 'search param validation patterns'\n reason: '>10 distinct patterns (basic, optional, arrays, objects, dates, discriminated unions, transforms, conditional, cross-route inheritance, middleware chaining)'\n failure_modes:\n - mistake: 'Using zod .catch() instead of adapter fallback()'\n mechanism: >-\n Zod .catch() makes the output type unknown, losing type\n safety. The @tanstack/zod-adapter fallback() preserves\n the correct inferred type.\n wrong_pattern: |\n z.object({ page: z.number().catch(1) })\n correct_pattern: |\n import { fallback } from '@tanstack/zod-adapter'\n z.object({ page: fallback(z.number(), 1) })\n source: 'docs/router/guide/search-params.md'\n priority: HIGH\n status: active\n\n - mistake: 'Returning entire search object from loaderDeps'\n mechanism: >-\n loaderDeps: ({ search }) => search causes loader to\n re-run on ANY search param change, not just relevant ones.\n Deep equality comparison fires on every unrelated change.\n wrong_pattern: |\n loaderDeps: ({ search }) => search\n correct_pattern: |\n loaderDeps: ({ search }) => ({ page: search.page })\n source: 'docs/router/guide/data-loading.md'\n priority: HIGH\n status: active\n skills: ['search-params', 'data-loading']\n\n - mistake: 'Passing Date objects in search params'\n mechanism: >-\n Date objects serialize to [object Object] in URLs.\n Must convert to ISO strings for correct serialization.\n wrong_pattern: |\n \n correct_pattern: |\n \n source: 'docs/router/how-to/arrays-objects-dates-search-params.md'\n priority: HIGH\n status: active\n\n - mistake: 'Parent route missing validateSearch blocks inheritance'\n mechanism: >-\n Child routes cannot access shared search params unless\n the parent route defines validateSearch. Without it,\n the types and runtime values are not available.\n source: 'docs/router/how-to/share-search-params-across-routes.md'\n priority: MEDIUM\n status: active\n\n - name: 'Path Params'\n slug: 'path-params'\n domain: 'managing-url-state'\n description: >-\n Define and consume dynamic path segments, splat routes,\n optional params, and prefix/suffix patterns.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - '$paramName dynamic segments'\n - '$ splat / _splat'\n - '{-$paramName} optional params'\n - '{$paramName} prefix/suffix patterns'\n - useParams hook\n - params.parse / params.stringify\n - pathParamsAllowedCharacters\n tasks:\n - 'Define routes with dynamic path parameters'\n - 'Use splat routes for catch-all matching'\n - 'Set up optional path parameters for i18n'\n - 'Navigate with type-safe path params'\n failure_modes:\n - mistake: 'Interpolating path params into to string'\n mechanism: >-\n Same as navigation failure mode โ€” agents build template\n literal paths instead of using params option.\n source: 'docs/router/guide/navigation.md'\n priority: CRITICAL\n status: active\n skills: ['path-params', 'navigation']\n\n - mistake: 'Using * for splat routes instead of $'\n mechanism: >-\n TanStack Router uses $ for splat routes, not * like some\n other routers. The captured value is under _splat key,\n not * (though * works in v1 for backwards compat, removed in v2).\n source: 'docs/router/routing/routing-concepts.md'\n priority: MEDIUM\n status: 'fixed-but-legacy-risk'\n version_context: '* works in v1 for compat but will be removed in v2'\n\n - mistake: 'Using curly braces for basic dynamic segments'\n mechanism: >-\n Basic dynamic segments use $postId (no braces). Curly\n braces are only for prefix/suffix patterns like {$postId}.txt\n or optional params {-$locale}.\n source: 'docs/router/guide/path-params.md'\n priority: MEDIUM\n status: active\n\n # โ”€โ”€ Loading Data โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Data Loading'\n slug: 'data-loading'\n domain: 'loading-data'\n description: >-\n Load data via route loaders with built-in SWR caching,\n configure staleTime/gcTime, use loaderDeps for cache keys,\n handle pending and error states, and inject dependencies\n via router context.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - loader option\n - loaderDeps\n - staleTime / gcTime / defaultPreloadStaleTime\n - pendingComponent / pendingMs / pendingMinMs\n - errorComponent / onError / onCatch\n - beforeLoad\n - router context / createRootRouteWithContext\n - router.invalidate\n - Await component\n - deferred data loading\n tasks:\n - 'Add a data loader to a route'\n - 'Configure cache timing (staleTime, gcTime)'\n - 'Set up loader dependencies for search-param-driven data'\n - 'Show pending UI during slow loads'\n - 'Handle loader errors with error boundaries'\n - 'Inject dependencies via router context'\n - 'Defer non-critical data with unawaited promises'\n - 'Invalidate cached data after mutations'\n failure_modes:\n - mistake: 'Assuming loaders only run on the server'\n mechanism: >-\n TanStack Router is client-first. Loaders run on the client\n by default (and also on the server if using TanStack Start).\n Agents trained on Remix/Next assume loaders are server-only\n and put server-only code (DB queries, fs access) in them.\n source: 'maintainer interview'\n priority: CRITICAL\n status: active\n skills: ['data-loading', 'ssr']\n\n - mistake: 'Not understanding staleTime default is 0'\n mechanism: >-\n Default staleTime is 0, meaning data is always considered\n stale and reloads in background on every route re-match.\n Agents may not set staleTime, causing excessive refetching.\n source: 'docs/router/guide/data-loading.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Using reset() instead of router.invalidate() in error components'\n mechanism: >-\n For loader errors, reset() only resets the error boundary\n but does not re-run the loader. Must use router.invalidate()\n to coordinate both reload and boundary reset.\n wrong_pattern: |\n function PostErrorComponent({ error, reset }) {\n return \n }\n correct_pattern: |\n function PostErrorComponent({ error, reset }) {\n const router = useRouter()\n return \n }\n source: 'docs/router/guide/data-loading.md'\n priority: HIGH\n status: active\n\n - mistake: 'Double parentheses missing on createRootRouteWithContext'\n mechanism: >-\n createRootRouteWithContext() is a factory โ€” it returns\n a function. Must call it twice: createRootRouteWithContext()(routeOptions).\n Missing second call is a common error.\n wrong_pattern: |\n const rootRoute = createRootRouteWithContext<{ auth: AuthState }>({\n component: RootComponent,\n })\n correct_pattern: |\n const rootRoute = createRootRouteWithContext<{ auth: AuthState }>()({\n component: RootComponent,\n })\n source: 'docs/router/guide/data-loading.md'\n priority: HIGH\n status: active\n\n - mistake: 'Using React hooks in beforeLoad or loader'\n mechanism: >-\n beforeLoad and loader are not React components โ€” hooks\n cannot be called in them. Must extract hook state in a\n wrapper component and pass via router context.\n source: 'docs/router/guide/router-context.md'\n priority: HIGH\n status: active\n\n compositions:\n - library: '@tanstack/react-query'\n skill: 'external-data-loading'\n\n - name: 'External Data Loading'\n slug: 'external-data-loading'\n domain: 'loading-data'\n description: >-\n Integrate TanStack Query (or other external caches) with\n Router for coordinated data loading, SSR dehydration/hydration,\n and streaming.\n type: composition\n packages:\n - '@tanstack/react-router'\n - '@tanstack/react-router-ssr-query'\n covers:\n - External cache coordination pattern\n - queryClient.ensureQueryData in loader\n - useSuspenseQuery in components\n - setupRouterSsrQueryIntegration\n - defaultPreloadStaleTime\n - dehydrate / hydrate router options\n - QueryClient per-request isolation\n - Wrap router option for providers\n tasks:\n - 'Set up TanStack Query with Router'\n - 'Preload query data in route loaders'\n - 'Configure SSR dehydration/hydration with Query'\n - 'Stream query data during SSR'\n failure_modes:\n - mistake: 'Not setting defaultPreloadStaleTime to 0 with external caches'\n mechanism: >-\n Router's built-in preload cache (30s default) prevents\n external library from controlling freshness. Set\n defaultPreloadStaleTime: 0 to let Query manage caching.\n wrong_pattern: |\n createRouter({ routeTree })\n correct_pattern: |\n createRouter({ routeTree, defaultPreloadStaleTime: 0 })\n source: 'docs/router/guide/external-data-loading.md'\n priority: HIGH\n status: active\n\n - mistake: 'Creating QueryClient outside createRouter for SSR'\n mechanism: >-\n For SSR, QueryClient must be created inside createRouter\n to ensure per-request isolation. A shared singleton leaks\n data between requests.\n wrong_pattern: |\n const queryClient = new QueryClient()\n const router = createRouter({ routeTree, context: { queryClient } })\n correct_pattern: |\n function createAppRouter() {\n const queryClient = new QueryClient()\n return createRouter({ routeTree, context: { queryClient } })\n }\n source: 'docs/router/guide/external-data-loading.md'\n priority: HIGH\n status: active\n\n - mistake: 'Awaiting prefetchQuery in loader blocks rendering'\n mechanism: >-\n For streaming/deferred patterns, prefetchQuery should NOT\n be awaited in the loader โ€” it starts fetching on server\n and streams without blocking. Awaiting defeats the purpose.\n source: 'docs/router/integrations/query.md'\n priority: MEDIUM\n status: active\n\n # โ”€โ”€ Protecting Routes โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Auth and Guards'\n slug: 'auth-and-guards'\n domain: 'protecting-routes'\n description: >-\n Protect routes with authentication checks, authorization\n guards, and RBAC patterns using beforeLoad redirects and\n layout routes.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - beforeLoad for auth checks\n - redirect() / throw redirect()\n - isRedirect helper\n - Authenticated layout routes (_authenticated)\n - Non-redirect auth (inline login)\n - RBAC with roles and permissions\n - Auth provider integration (Auth0, Clerk, Supabase)\n - Router context for auth state\n tasks:\n - 'Protect routes with authentication checks'\n - 'Redirect unauthenticated users to login'\n - 'Implement role-based access control'\n - 'Integrate third-party auth providers'\n - 'Pass auth state through router context'\n failure_modes:\n - mistake: 'Auth check in component instead of beforeLoad'\n mechanism: >-\n Component-level auth checks cause protected content to\n flash before redirect. beforeLoad runs before any\n component rendering and prevents the flash entirely.\n wrong_pattern: |\n component: () => {\n const auth = useAuth()\n if (!auth.isAuthenticated) return \n return \n }\n correct_pattern: |\n beforeLoad: ({ context }) => {\n if (!context.auth.isAuthenticated) {\n throw redirect({ to: '/login' })\n }\n }\n source: 'docs/router/how-to/setup-authentication.md'\n priority: HIGH\n status: active\n\n - mistake: 'Not re-throwing redirects in try/catch'\n mechanism: >-\n redirect() works by throwing. If beforeLoad has a try/catch\n for error handling, the redirect gets swallowed unless\n re-thrown via isRedirect() check.\n wrong_pattern: |\n beforeLoad: async ({ context }) => {\n try {\n await validateSession(context.auth)\n } catch (e) {\n // swallows redirect!\n console.error(e)\n }\n }\n correct_pattern: |\n beforeLoad: async ({ context }) => {\n try {\n await validateSession(context.auth)\n } catch (e) {\n if (isRedirect(e)) throw e\n console.error(e)\n }\n }\n source: 'docs/router/guide/authenticated-routes.md'\n priority: HIGH\n status: active\n\n - mistake: 'Trying to conditionally render root route component'\n mechanism: >-\n Root route is always rendered regardless of auth state.\n Use a pathless layout route (_authenticated) with\n beforeLoad for conditional rendering.\n source: 'docs/router/faq.md'\n priority: MEDIUM\n status: active\n\n # โ”€โ”€ Rendering and Layout โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Code Splitting'\n slug: 'code-splitting'\n domain: 'rendering-and-layout'\n description: >-\n Split route code into lazy-loaded chunks using automatic\n code splitting, .lazy.tsx files, or code-based lazy loading.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-plugin'\n covers:\n - autoCodeSplitting plugin option\n - .lazy.tsx file convention\n - createLazyFileRoute\n - createLazyRoute\n - lazyRouteComponent\n - getRouteApi for code-split components\n - codeSplitGroupings per-route override\n - splitBehavior programmatic config\n - Critical vs non-critical route properties\n tasks:\n - 'Enable automatic code splitting'\n - 'Manually split a route with .lazy.tsx'\n - 'Access typed hooks from code-split components'\n - 'Customize which properties are split per route'\n failure_modes:\n - mistake: 'Exporting route property functions prevents code splitting'\n mechanism: >-\n Exported functions from route files are included in the\n main bundle even with auto code splitting. Component\n functions must NOT be exported.\n wrong_pattern: |\n export function PostsComponent() { return
Posts
}\n correct_pattern: |\n function PostsComponent() { return
Posts
}\n source: 'docs/router/guide/automatic-code-splitting.md'\n priority: HIGH\n status: active\n\n - mistake: 'Trying to code-split the root route'\n mechanism: >-\n __root.tsx does not support code splitting โ€” it is always\n rendered regardless of current route.\n source: 'docs/router/guide/code-splitting.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Splitting the loader adds double async cost'\n mechanism: >-\n Loader is already async. Splitting it requires fetching\n the chunk AND then executing the loader, adding latency.\n Loaders should stay in the main bundle unless there is\n a specific reason to split them.\n source: 'docs/router/guide/code-splitting.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Importing Route in code-split files for typed hooks'\n mechanism: >-\n Importing the Route object in a lazy-loaded file pulls\n the route config into the lazy chunk, defeating code\n splitting. Use getRouteApi('/path') instead.\n wrong_pattern: |\n import { Route } from './posts.tsx'\n const data = Route.useLoaderData()\n correct_pattern: |\n import { getRouteApi } from '@tanstack/react-router'\n const route = getRouteApi('/posts')\n const data = route.useLoaderData()\n source: 'docs/router/guide/code-splitting.md'\n priority: HIGH\n status: active\n\n - name: 'Not Found and Errors'\n slug: 'not-found-and-errors'\n domain: 'rendering-and-layout'\n description: >-\n Handle not-found routes, missing resources, and route-level\n errors with notFound(), notFoundComponent, errorComponent,\n and CatchBoundary.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - notFound() function\n - notFoundComponent\n - defaultNotFoundComponent\n - notFoundMode (fuzzy / root)\n - errorComponent\n - onError / onCatch\n - CatchBoundary component\n - NotFoundRoute (deprecated)\n tasks:\n - 'Add a 404 page for unmatched routes'\n - 'Throw not-found for missing resources in loaders'\n - 'Configure error boundaries per route'\n - 'Target specific routes with notFound()'\n failure_modes:\n - mistake: 'Using deprecated NotFoundRoute'\n mechanism: >-\n NotFoundRoute is deprecated. When present, notFound() and\n notFoundComponent will NOT work. Must remove NotFoundRoute\n and use notFoundComponent instead.\n source: 'docs/router/guide/not-found-errors.md'\n priority: HIGH\n status: 'fixed-but-legacy-risk'\n version_context: 'NotFoundRoute deprecated, will be removed in next major'\n\n - mistake: 'Expecting useLoaderData to work in notFoundComponent'\n mechanism: >-\n When notFoundComponent renders, the route's loader may\n not have completed. useLoaderData() may return undefined.\n Use useParams, useSearch, or useRouteContext instead.\n source: 'docs/router/guide/not-found-errors.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Leaf route cannot handle not-found errors'\n mechanism: >-\n Routes without children never render Outlet and therefore\n cannot catch not-found errors. Only routes with children\n (or the root route) can have notFoundComponent.\n source: 'docs/router/guide/not-found-errors.md'\n priority: MEDIUM\n status: active\n\n - name: 'Route Masking'\n slug: 'route-masking'\n domain: 'rendering-and-layout'\n description: >-\n Mask the browser URL while navigating to a different internal\n route, with configurable unmask behavior.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - mask option on Link / navigate\n - createRouteMask\n - routeMasks router option\n - unmaskOnReload\n - location.maskedLocation\n - location.state.__tempLocation\n tasks:\n - 'Show a modal route with a clean URL'\n - 'Configure declarative route masks'\n - 'Control unmask behavior on page reload'\n failure_modes:\n - mistake: 'Expecting masked URLs to survive sharing'\n mechanism: >-\n Masking data is stored in browser history state. When a\n URL is shared or opened in a new tab, masking data is\n lost and the visible URL is used directly.\n source: 'docs/router/guide/route-masking.md'\n priority: MEDIUM\n status: active\n\n # โ”€โ”€ Type Safety โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Type Safety'\n slug: 'type-safety'\n domain: 'type-safety'\n description: >-\n Leverage TanStack Router's fully inferred type system.\n Avoid unnecessary type annotations, narrow routes with from,\n and optimize TypeScript performance.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - Full type inference philosophy\n - Register module declaration\n - from narrowing on hooks and Link\n - strict false for shared components\n - getRouteApi for code-split typed access\n - addChildren with object syntax for TS perf\n - LinkProps / ValidateLinkOptions type utilities\n - as const satisfies pattern\n tasks:\n - 'Register router types for global type safety'\n - 'Narrow route types with from parameter'\n - 'Use getRouteApi in code-split components'\n - 'Optimize TypeScript performance in large route trees'\n - 'Build type-safe link option utilities'\n failure_modes:\n - mistake: 'Adding type annotations or casts to inferred values'\n mechanism: >-\n TanStack Router is fully type-safe with full inference.\n Adding as Type, generic type parameters, satisfies, or\n explicit type annotations is unnecessary and can mask\n real type errors or break the inference chain.\n wrong_pattern: |\n const search = useSearch({ from: '/posts' }) as { page: number }\n correct_pattern: |\n const search = useSearch({ from: '/posts' })\n // search.page is already typed as number\n source: 'maintainer interview'\n priority: CRITICAL\n status: active\n\n - mistake: 'Using un-narrowed LinkProps type'\n mechanism: >-\n LinkProps without generics is an extremely large union type.\n Using it as a variable type causes severe TS performance\n degradation. Use as const satisfies or narrow with generics.\n wrong_pattern: |\n const props: LinkProps = { to: '/posts' }\n correct_pattern: |\n const props = { to: '/posts' } as const satisfies LinkProps\n source: 'docs/router/guide/type-safety.md'\n priority: HIGH\n status: active\n\n - mistake: 'Not narrowing Link/useNavigate with from'\n mechanism: >-\n Without from, search resolves to a union of ALL routes\n search params. TypeScript check time grows linearly with\n route count. Always provide from to narrow.\n wrong_pattern: |\n \n correct_pattern: |\n \n source: 'docs/router/guide/type-safety.md'\n priority: HIGH\n status: active\n\n # โ”€โ”€ Server-Side Rendering โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'SSR'\n slug: 'ssr'\n domain: 'server-side-rendering'\n description: >-\n Set up server-side rendering with non-streaming or streaming\n approaches, manage hydration, and handle document head.\n type: core\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-core'\n covers:\n - RouterClient / RouterServer\n - renderRouterToString / renderRouterToStream\n - createRequestHandler\n - defaultRenderHandler / defaultStreamHandler\n - HeadContent / Scripts components\n - head route option (meta, links, styles, scripts)\n - ScriptOnce component\n - Automatic loader dehydration/hydration\n - Memory history on server\n - Data serialization (Date, Error, FormData, undefined)\n tasks:\n - 'Set up non-streaming SSR with Express'\n - 'Set up streaming SSR'\n - 'Configure document head management'\n - 'Handle hydration mismatches'\n failure_modes:\n - mistake: 'Using browser APIs in loaders without environment check'\n mechanism: >-\n Loaders run on both client and server when using SSR.\n Browser-only APIs (window, document, localStorage) will\n throw on the server.\n source: 'docs/router/guide/ssr.md'\n priority: HIGH\n status: active\n skills: ['ssr', 'data-loading']\n\n - mistake: 'Using hash fragments for server-rendered content'\n mechanism: >-\n Hash fragments are client-only โ€” browsers never send them\n to the server. Using hash for conditional rendering causes\n hydration mismatches during SSR.\n source: 'docs/router/guide/navigation.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Generating Next.js or Remix SSR patterns'\n mechanism: >-\n Agents trained on Next.js generate getServerSideProps,\n App Router patterns, or server components. Agents trained\n on Remix generate server-only loader exports. TanStack\n Router has its own SSR API (RouterClient/RouterServer).\n source: 'maintainer interview'\n priority: CRITICAL\n status: active\n skills: ['ssr', 'route-setup', 'data-loading']\n\n # โ”€โ”€ Migration โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Migrate from React Router'\n slug: 'migrate-from-react-router'\n domain: 'defining-routes'\n description: >-\n Step-by-step migration from React Router v7 to TanStack Router,\n covering route definitions, navigation, search params, and\n data loading.\n type: lifecycle\n packages:\n - '@tanstack/react-router'\n - '@tanstack/router-plugin'\n covers:\n - Migration checklist\n - Route definition conversion\n - Link / useNavigate API differences\n - useSearchParams to validateSearch + useSearch\n - useParams with from\n - Outlet replacement\n - Loader conversion\n - Code splitting differences\n tasks:\n - 'Migrate routes from React Router to TanStack Router'\n - 'Convert React Router Links and navigation'\n - 'Replace useSearchParams with validated search params'\n - 'Convert React Router loaders'\n failure_modes:\n - mistake: 'Leaving React Router imports alongside TanStack Router'\n mechanism: >-\n React Router and TanStack Router share similar API names\n (Link, useNavigate, Outlet). Leftover React Router imports\n cause context errors (\"cannot use useNavigate outside of\n context\"). Uninstall react-router-dom to surface these.\n source: 'docs/router/how-to/migrate-from-react-router.md'\n priority: HIGH\n status: active\n\n - mistake: 'Using React Router useSearchParams pattern'\n mechanism: >-\n React Router uses useSearchParams() returning URLSearchParams.\n TanStack Router uses validateSearch schema + useSearch()\n returning typed objects. Agents may generate the RR pattern.\n wrong_pattern: |\n const [searchParams, setSearchParams] = useSearchParams()\n const page = Number(searchParams.get('page'))\n correct_pattern: |\n // In route definition:\n validateSearch: z.object({ page: fallback(z.number(), 1) })\n // In component:\n const { page } = Route.useSearch()\n source: 'docs/router/installation/migrate-from-react-router.md'\n priority: HIGH\n status: active\n\ntensions:\n - name: 'Type safety strictness vs rapid prototyping'\n skills: ['type-safety', 'route-setup']\n description: >-\n Full type inference requires proper setup (Register, correct\n property order, getParentRoute). This upfront cost conflicts\n with quick prototyping where developers want to skip setup.\n implication: >-\n Agents skip Register declaration or use type casts to silence\n errors, producing code that compiles but has no type safety.\n\n - name: 'Client-first loaders vs SSR expectations'\n skills: ['data-loading', 'ssr']\n description: >-\n Loaders are client-first by design but agents assume they are\n server-only (Remix/Next mental model). This tension means\n browser APIs work in loaders by default but break under SSR.\n implication: >-\n Agents either put server-only code in client loaders or avoid\n browser APIs unnecessarily, depending on which framework mental\n model they default to.\n\n - name: 'Built-in SWR cache vs external cache coordination'\n skills: ['data-loading', 'external-data-loading']\n description: >-\n Router has built-in caching with staleTime/gcTime defaults.\n When using an external cache like React Query, the built-in\n cache must be bypassed (defaultPreloadStaleTime: 0) or it\n conflicts with the external library's freshness management.\n implication: >-\n Agents use both caches simultaneously without disabling the\n built-in one, causing stale data or double-fetching.\n\n - name: 'Code splitting granularity vs loader performance'\n skills: ['code-splitting', 'data-loading']\n description: >-\n Splitting more aggressively reduces initial bundle but splitting\n the loader adds a network round-trip before data can be fetched.\n The optimal split point differs per route.\n implication: >-\n Agents split everything including loaders, adding latency to\n data loading without understanding the tradeoff.\n\ncross_references:\n - from: 'route-setup'\n to: 'type-safety'\n reason: 'Register declaration and property order are prerequisites for type inference'\n - from: 'navigation'\n to: 'search-params'\n reason: 'Link search prop and navigate search option directly interact with search param validation'\n - from: 'data-loading'\n to: 'search-params'\n reason: 'loaderDeps consumes validated search params as cache keys'\n - from: 'data-loading'\n to: 'external-data-loading'\n reason: 'Understanding built-in caching is prerequisite for coordinating with external caches'\n - from: 'auth-and-guards'\n to: 'data-loading'\n reason: 'beforeLoad runs before loader โ€” auth context flows into loader via route context'\n - from: 'code-splitting'\n to: 'data-loading'\n reason: 'Loader splitting decisions affect data loading performance'\n - from: 'ssr'\n to: 'data-loading'\n reason: 'SSR changes where loaders execute โ€” must handle both environments'\n - from: 'ssr'\n to: 'external-data-loading'\n reason: 'SSR dehydration/hydration requires special setup for Query integration'\n - from: 'not-found-and-errors'\n to: 'data-loading'\n reason: 'notFound() thrown in loaders interacts with error boundaries and loader data availability'\n - from: 'migrate-from-react-router'\n to: 'route-setup'\n reason: 'Migration requires understanding TanStack Router route setup to replace RR patterns'\n\ngaps: []\n" }, { "path": "_artifacts/skill_spec.md", "content": "# TanStack Router โ€” Skill Spec\n\nTanStack Router is a type-safe router for React and Solid applications with built-in SWR caching, JSON-first search params, file-based route generation, and end-to-end type inference. It is client-first/isomorphic โ€” loaders run on the client by default and additionally on the server when used with TanStack Start.\n\n## Domains\n\n| Domain | Description | Skills |\n| --------------------- | ------------------------------------------------------------------- | --------------------------------------------------- |\n| Defining Routes | Setting up route trees, configuring the router, registering types | route-setup, migrate-from-react-router |\n| Navigating | Links, imperative navigation, preloading, blocking | navigation |\n| Managing URL State | Search params and path params with validation and serialization | search-params, path-params |\n| Loading Data | Route loaders, SWR caching, external cache coordination, context/DI | data-loading, external-data-loading |\n| Protecting Routes | Auth guards, RBAC, beforeLoad redirects | auth-and-guards |\n| Rendering and Layout | Code splitting, error/not-found handling, route masking | code-splitting, not-found-and-errors, route-masking |\n| Type Safety | Inference patterns, narrowing, TS performance | type-safety |\n| Server-Side Rendering | SSR setup, hydration, head management | ssr |\n\n## Skill Inventory\n\n| Skill | Type | Domain | What it covers | Failure modes |\n| ------------------------- | ----------- | --------------------- | ------------------------------------------------------------------------------------ | ------------- |\n| route-setup | core | defining-routes | createRouter, file/code/virtual routing, Register, plugin config, ESLint | 5 |\n| navigation | core | navigating | Link, useNavigate, Navigate, preloading, blocking, active states, scroll restoration | 4 |\n| search-params | core | managing-url-state | validateSearch, useSearch, middlewares, serialization, adapters | 4 |\n| path-params | core | managing-url-state | $params, splats, optional params, prefix/suffix patterns | 3 |\n| data-loading | core | loading-data | loader, loaderDeps, staleTime/gcTime, pending/error, context/DI, deferred | 5 |\n| external-data-loading | composition | loading-data | TanStack Query integration, SSR dehydration/hydration, streaming | 3 |\n| auth-and-guards | core | protecting-routes | beforeLoad redirects, layout auth, RBAC, provider integration | 3 |\n| code-splitting | core | rendering-and-layout | autoCodeSplitting, .lazy.tsx, getRouteApi, split groupings | 4 |\n| not-found-and-errors | core | rendering-and-layout | notFound(), notFoundComponent, errorComponent, CatchBoundary | 3 |\n| route-masking | core | rendering-and-layout | mask option, createRouteMask, unmaskOnReload | 1 |\n| type-safety | core | type-safety | Register, from narrowing, TS perf, type utilities | 3 |\n| ssr | core | server-side-rendering | RouterClient/Server, streaming, hydration, head management | 3 |\n| migrate-from-react-router | lifecycle | defining-routes | Migration checklist, API mapping, search params conversion | 2 |\n\n## Failure Mode Inventory\n\n### route-setup (5 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ------------------------------------------------------ | -------- | --------------------------------------- | ------------ |\n| 1 | Missing router type registration | CRITICAL | docs/guide/creating-a-router | type-safety |\n| 2 | Not committing routeTree.gen.ts | HIGH | docs/faq | โ€” |\n| 3 | Wrong route property order breaks type inference | HIGH | docs/eslint/create-route-property-order | โ€” |\n| 4 | Placing TanStackRouter plugin after framework plugin | HIGH | docs/installation/with-vite | โ€” |\n| 5 | Using getParentRoute incorrectly in code-based routing | HIGH | docs/decisions-on-dx | โ€” |\n\n### navigation (4 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | -------------------------------------------------------- | -------- | --------------------------------------- | ------------- |\n| 1 | Interpolating params into the to string | CRITICAL | docs/guide/navigation | type-safety |\n| 2 | Using useNavigate instead of Link for clickable elements | MEDIUM | docs/guide/navigation | โ€” |\n| 3 | Not providing from for relative navigation | HIGH | docs/guide/navigation | โ€” |\n| 4 | Using search as object instead of function loses params | HIGH | docs/how-to/navigate-with-search-params | search-params |\n\n### search-params (4 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ------------------------------------------------------ | -------- | -------------------------------- | ------------ |\n| 1 | Using zod .catch() instead of adapter fallback() | HIGH | docs/guide/search-params | โ€” |\n| 2 | Returning entire search object from loaderDeps | HIGH | docs/guide/data-loading | data-loading |\n| 3 | Passing Date objects in search params | HIGH | docs/how-to/arrays-objects-dates | โ€” |\n| 4 | Parent route missing validateSearch blocks inheritance | MEDIUM | docs/how-to/share-search-params | โ€” |\n\n### path-params (3 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | --------------------------------------------- | -------- | ----------------------------- | ------------ |\n| 1 | Interpolating path params into to string | CRITICAL | docs/guide/navigation | navigation |\n| 2 | Using \\* for splat routes instead of $ | MEDIUM | docs/routing/routing-concepts | โ€” |\n| 3 | Using curly braces for basic dynamic segments | MEDIUM | docs/guide/path-params | โ€” |\n\n### data-loading (5 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ---------------------------------------------------------------- | -------- | ------------------------- | ------------ |\n| 1 | Assuming loaders only run on the server | CRITICAL | maintainer interview | ssr |\n| 2 | Not understanding staleTime default is 0 | MEDIUM | docs/guide/data-loading | โ€” |\n| 3 | Using reset() instead of router.invalidate() in error components | HIGH | docs/guide/data-loading | โ€” |\n| 4 | Double parentheses missing on createRootRouteWithContext | HIGH | docs/guide/data-loading | โ€” |\n| 5 | Using React hooks in beforeLoad or loader | HIGH | docs/guide/router-context | โ€” |\n\n### external-data-loading (3 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ------------------------------------------------- | -------- | -------------------------------- | ------------ |\n| 1 | Not setting defaultPreloadStaleTime to 0 | HIGH | docs/guide/external-data-loading | โ€” |\n| 2 | Creating QueryClient outside createRouter for SSR | HIGH | docs/guide/external-data-loading | โ€” |\n| 3 | Awaiting prefetchQuery in loader blocks rendering | MEDIUM | docs/integrations/query | โ€” |\n\n### auth-and-guards (3 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | --------------------------------------------------- | -------- | -------------------------------- | ------------ |\n| 1 | Auth check in component instead of beforeLoad | HIGH | docs/how-to/setup-authentication | โ€” |\n| 2 | Not re-throwing redirects in try/catch | HIGH | docs/guide/authenticated-routes | โ€” |\n| 3 | Trying to conditionally render root route component | MEDIUM | docs/faq | โ€” |\n\n### code-splitting (4 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ---------------------------------------------------------- | -------- | ----------------------------------- | ------------ |\n| 1 | Exporting route property functions prevents code splitting | HIGH | docs/guide/automatic-code-splitting | โ€” |\n| 2 | Trying to code-split the root route | MEDIUM | docs/guide/code-splitting | โ€” |\n| 3 | Splitting the loader adds double async cost | MEDIUM | docs/guide/code-splitting | โ€” |\n| 4 | Importing Route in code-split files for typed hooks | HIGH | docs/guide/code-splitting | โ€” |\n\n### not-found-and-errors (3 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ---------------------------------------------------- | -------- | --------------------------- | ------------ |\n| 1 | Using deprecated NotFoundRoute | HIGH | docs/guide/not-found-errors | โ€” |\n| 2 | Expecting useLoaderData to work in notFoundComponent | MEDIUM | docs/guide/not-found-errors | โ€” |\n| 3 | Leaf route cannot handle not-found errors | MEDIUM | docs/guide/not-found-errors | โ€” |\n\n### route-masking (1 failure mode)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ---------------------------------------- | -------- | ------------------------ | ------------ |\n| 1 | Expecting masked URLs to survive sharing | MEDIUM | docs/guide/route-masking | โ€” |\n\n### type-safety (3 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | --------------------------------------------------- | -------- | ---------------------- | ------------ |\n| 1 | Adding type annotations or casts to inferred values | CRITICAL | maintainer interview | โ€” |\n| 2 | Using un-narrowed LinkProps type | HIGH | docs/guide/type-safety | โ€” |\n| 3 | Not narrowing Link/useNavigate with from | HIGH | docs/guide/type-safety | โ€” |\n\n### ssr (3 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ------------------------------------------------------- | -------- | --------------------- | ------------------------- |\n| 1 | Using browser APIs in loaders without environment check | HIGH | docs/guide/ssr | data-loading |\n| 2 | Using hash fragments for server-rendered content | MEDIUM | docs/guide/navigation | โ€” |\n| 3 | Generating Next.js or Remix SSR patterns | CRITICAL | maintainer interview | route-setup, data-loading |\n\n### migrate-from-react-router (2 failure modes)\n\n| # | Mistake | Priority | Source | Cross-skill? |\n| --- | ------------------------------------------------------ | -------- | ------------------------------------------- | ------------ |\n| 1 | Leaving React Router imports alongside TanStack Router | HIGH | docs/how-to/migrate-from-react-router | โ€” |\n| 2 | Using React Router useSearchParams pattern | HIGH | docs/installation/migrate-from-react-router | โ€” |\n\n## Tensions\n\n| Tension | Skills | Agent implication |\n| ------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------- |\n| Type safety strictness vs rapid prototyping | type-safety โ†” route-setup | Agents skip Register declaration or use type casts to silence errors |\n| Client-first loaders vs SSR expectations | data-loading โ†” ssr | Agents put server-only code in client loaders or avoid browser APIs unnecessarily |\n| Built-in SWR cache vs external cache coordination | data-loading โ†” external-data-loading | Agents use both caches simultaneously causing stale data or double-fetching |\n| Code splitting granularity vs loader performance | code-splitting โ†” data-loading | Agents split everything including loaders, adding latency |\n\n## Cross-References\n\n| From | To | Reason |\n| ------------------------- | --------------------- | ---------------------------------------------------------------------------------- |\n| route-setup | type-safety | Register declaration and property order are prerequisites for type inference |\n| navigation | search-params | Link search prop directly interacts with search param validation |\n| data-loading | search-params | loaderDeps consumes validated search params as cache keys |\n| data-loading | external-data-loading | Understanding built-in caching is prerequisite for external cache coordination |\n| auth-and-guards | data-loading | beforeLoad runs before loader โ€” auth context flows into loader via route context |\n| code-splitting | data-loading | Loader splitting decisions affect data loading performance |\n| ssr | data-loading | SSR changes where loaders execute โ€” must handle both environments |\n| ssr | external-data-loading | SSR dehydration/hydration requires special Query setup |\n| not-found-and-errors | data-loading | notFound() in loaders interacts with error boundaries and loader data availability |\n| migrate-from-react-router | route-setup | Migration requires understanding TanStack Router route setup |\n\n## Subsystems & Reference Candidates\n\n| Skill | Subsystems | Reference candidates |\n| ------------- | --------------------------------------------- | -------------------------------------------------------- |\n| route-setup | โ€” | file naming conventions (>10 distinct conventions) |\n| search-params | Zod adapter, Valibot adapter, ArkType adapter | search param validation patterns (>10 distinct patterns) |\n| All others | โ€” | โ€” |\n\n## Recommended Skill File Structure\n\n- **Core skills:** route-setup, navigation, search-params, path-params, data-loading, code-splitting, not-found-and-errors, route-masking, type-safety, ssr, auth-and-guards\n- **Framework skills:** None needed separately โ€” React and Solid share the same core API surface. Framework-specific notes belong inline.\n- **Lifecycle skills:** migrate-from-react-router\n- **Composition skills:** external-data-loading (TanStack Query)\n- **Reference files:** search-params (validation patterns), route-setup (file naming conventions)\n\n## Composition Opportunities\n\n| Library | Integration points | Composition skill needed? |\n| --------------------- | --------------------------------------------------------- | ------------------------------------------ |\n| @tanstack/react-query | Loader coordination, SSR dehydration/hydration, streaming | Yes โ€” external-data-loading |\n| Zod | Search param validation | No โ€” covered as subsystem in search-params |\n| Valibot | Search param validation | No โ€” covered as subsystem in search-params |\n| ArkType | Search param validation | No โ€” covered as subsystem in search-params |\n" }, { "path": "_artifacts/skill_tree.yaml", "content": "# skills/_artifacts/skill_tree.yaml\nlibrary:\n name: '@tanstack/router'\n version: '1.166.2'\n repository: 'https://github.com/TanStack/router'\n description: >-\n Type-safe router for React and Solid with built-in SWR caching,\n JSON-first search params, and end-to-end type inference.\ngenerated_from:\n domain_map: '_artifacts/domain_map.yaml'\n skill_spec: '_artifacts/skill_spec.md'\ngenerated_at: '2026-03-07'\n\nskills:\n # โ”€โ”€ Router Core Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Router Core'\n slug: 'router-core'\n type: 'core'\n domain: 'defining-routes'\n path: 'skills/router-core/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Framework-agnostic core concepts for TanStack Router: route trees,\n createRouter, createRoute, createRootRoute, createRootRouteWithContext,\n addChildren, Register type declaration, route matching, route sorting,\n file naming conventions. Entry point for all router skills.\n sources:\n - 'TanStack/router:docs/router/overview.md'\n - 'TanStack/router:docs/router/routing/routing-concepts.md'\n - 'TanStack/router:docs/router/routing/route-trees.md'\n - 'TanStack/router:docs/router/routing/route-matching.md'\n - 'TanStack/router:docs/router/guide/creating-a-router.md'\n - 'TanStack/router:docs/router/decisions-on-dx.md'\n - 'TanStack/router:packages/router-core/src'\n\n - name: 'Search Params'\n slug: 'router-core/search-params'\n type: 'sub-skill'\n domain: 'managing-url-state'\n path: 'skills/router-core/search-params/SKILL.md'\n package: 'packages/router-core'\n description: >-\n validateSearch, search param validation with Zod/Valibot/ArkType adapters,\n fallback(), search middlewares (retainSearchParams, stripSearchParams),\n custom serialization (parseSearch, stringifySearch), search param\n inheritance, loaderDeps for cache keys, reading and writing search params.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/search-params.md'\n - 'TanStack/router:docs/router/how-to/setup-basic-search-params.md'\n - 'TanStack/router:docs/router/how-to/validate-search-params.md'\n - 'TanStack/router:docs/router/how-to/navigate-with-search-params.md'\n - 'TanStack/router:docs/router/how-to/share-search-params-across-routes.md'\n - 'TanStack/router:docs/router/how-to/arrays-objects-dates-search-params.md'\n - 'TanStack/router:docs/router/guide/custom-search-param-serialization.md'\n subsystems:\n - 'Zod adapter'\n - 'Valibot adapter'\n - 'ArkType adapter'\n references:\n - 'references/validation-patterns.md'\n\n - name: 'Path Params'\n slug: 'router-core/path-params'\n type: 'sub-skill'\n domain: 'managing-url-state'\n path: 'skills/router-core/path-params/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Dynamic path segments ($paramName), splat routes ($ / _splat),\n optional params ({-$paramName}), prefix/suffix patterns ({$param}.ext),\n useParams, params.parse/stringify, pathParamsAllowedCharacters,\n i18n locale patterns.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/path-params.md'\n - 'TanStack/router:docs/router/guide/internationalization-i18n.md'\n - 'TanStack/router:docs/router/routing/routing-concepts.md'\n\n - name: 'Navigation'\n slug: 'router-core/navigation'\n type: 'sub-skill'\n domain: 'navigating'\n path: 'skills/router-core/navigation/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Link component, useNavigate, Navigate component, router.navigate,\n ToOptions/NavigateOptions/LinkOptions, from/to relative navigation,\n activeOptions/activeProps, preloading (intent/viewport/render),\n preloadDelay, navigation blocking (useBlocker, Block), createLink,\n linkOptions helper, scroll restoration, MatchRoute.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/navigation.md'\n - 'TanStack/router:docs/router/guide/preloading.md'\n - 'TanStack/router:docs/router/guide/navigation-blocking.md'\n - 'TanStack/router:docs/router/guide/link-options.md'\n - 'TanStack/router:docs/router/guide/custom-link.md'\n - 'TanStack/router:docs/router/guide/scroll-restoration.md'\n\n - name: 'Data Loading'\n slug: 'router-core/data-loading'\n type: 'sub-skill'\n domain: 'loading-data'\n path: 'skills/router-core/data-loading/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Route loader option, loaderDeps for cache keys, staleTime/gcTime/\n defaultPreloadStaleTime SWR caching, pendingComponent/pendingMs/\n pendingMinMs, errorComponent/onError/onCatch, beforeLoad, router\n context and createRootRouteWithContext DI pattern, router.invalidate,\n Await component, deferred data loading with unawaited promises.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/data-loading.md'\n - 'TanStack/router:docs/router/guide/deferred-data-loading.md'\n - 'TanStack/router:docs/router/guide/router-context.md'\n - 'TanStack/router:docs/router/guide/data-mutations.md'\n\n - name: 'Auth and Guards'\n slug: 'router-core/auth-and-guards'\n type: 'sub-skill'\n domain: 'protecting-routes'\n path: 'skills/router-core/auth-and-guards/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Route protection with beforeLoad, redirect()/throw redirect(),\n isRedirect helper, authenticated layout routes (_authenticated),\n non-redirect auth (inline login), RBAC with roles and permissions,\n auth provider integration (Auth0, Clerk, Supabase), router context\n for auth state.\n requires:\n - 'router-core'\n - 'router-core/data-loading'\n sources:\n - 'TanStack/router:docs/router/guide/authenticated-routes.md'\n - 'TanStack/router:docs/router/how-to/setup-authentication.md'\n - 'TanStack/router:docs/router/how-to/setup-auth-providers.md'\n - 'TanStack/router:docs/router/how-to/setup-rbac.md'\n\n - name: 'Code Splitting'\n slug: 'router-core/code-splitting'\n type: 'sub-skill'\n domain: 'rendering-and-layout'\n path: 'skills/router-core/code-splitting/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Automatic code splitting (autoCodeSplitting), .lazy.tsx convention,\n createLazyFileRoute, createLazyRoute, lazyRouteComponent, getRouteApi\n for typed hooks in split files, codeSplitGroupings per-route override,\n splitBehavior programmatic config, critical vs non-critical properties.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/code-splitting.md'\n - 'TanStack/router:docs/router/guide/automatic-code-splitting.md'\n\n - name: 'Not Found and Errors'\n slug: 'router-core/not-found-and-errors'\n type: 'sub-skill'\n domain: 'rendering-and-layout'\n path: 'skills/router-core/not-found-and-errors/SKILL.md'\n package: 'packages/router-core'\n description: >-\n notFound() function, notFoundComponent, defaultNotFoundComponent,\n notFoundMode (fuzzy/root), errorComponent, onError/onCatch,\n CatchBoundary, NotFoundRoute (deprecated), route masking (mask\n option, createRouteMask, unmaskOnReload).\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/not-found-errors.md'\n - 'TanStack/router:docs/router/guide/route-masking.md'\n\n - name: 'Type Safety'\n slug: 'router-core/type-safety'\n type: 'sub-skill'\n domain: 'type-safety'\n path: 'skills/router-core/type-safety/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Full type inference philosophy (never cast, never annotate inferred\n values), Register module declaration, from narrowing on hooks and\n Link, strict:false for shared components, getRouteApi for code-split\n typed access, addChildren with object syntax for TS perf, LinkProps\n and ValidateLinkOptions type utilities, as const satisfies pattern.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:docs/router/guide/type-safety.md'\n - 'TanStack/router:docs/router/guide/type-utilities.md'\n - 'TanStack/router:docs/router/guide/render-optimizations.md'\n\n - name: 'SSR'\n slug: 'router-core/ssr'\n type: 'sub-skill'\n domain: 'server-side-rendering'\n path: 'skills/router-core/ssr/SKILL.md'\n package: 'packages/router-core'\n description: >-\n Non-streaming and streaming SSR, RouterClient/RouterServer,\n renderRouterToString/renderRouterToStream, createRequestHandler,\n defaultRenderHandler/defaultStreamHandler, HeadContent/Scripts\n components, head route option (meta/links/styles/scripts),\n ScriptOnce, automatic loader dehydration/hydration, memory\n history on server, data serialization, document head management.\n requires:\n - 'router-core'\n - 'router-core/data-loading'\n sources:\n - 'TanStack/router:docs/router/guide/ssr.md'\n - 'TanStack/router:docs/router/guide/document-head-management.md'\n - 'TanStack/router:docs/router/how-to/setup-ssr.md'\n\n # โ”€โ”€ React Router Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'React Router'\n slug: 'react-router'\n type: 'framework'\n domain: 'defining-routes'\n path: 'skills/react-router/SKILL.md'\n package: 'packages/react-router'\n description: >-\n React bindings for TanStack Router: RouterProvider, useRouter,\n useRouterState, useMatch, useMatches, useLocation, useSearch,\n useParams, useNavigate, useLoaderData, useLoaderDeps,\n useRouteContext, useBlocker, useCanGoBack, Link, Navigate,\n Outlet, CatchBoundary, ErrorComponent. React-specific patterns\n for hooks, providers, SSR hydration, and createLink with\n forwardRef.\n requires:\n - 'router-core'\n sources:\n - 'TanStack/router:packages/react-router/src'\n - 'TanStack/router:docs/router/guide/creating-a-router.md'\n - 'TanStack/router:docs/router/installation/manual.md'\n\n # โ”€โ”€ Composition Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'External Data Loading (TanStack Query)'\n slug: 'compositions/router-query'\n type: 'composition'\n domain: 'loading-data'\n path: 'skills/compositions/router-query/SKILL.md'\n package: 'packages/react-router'\n description: >-\n Integrating TanStack Router with TanStack Query: queryClient\n in router context, ensureQueryData/prefetchQuery in loaders,\n useSuspenseQuery in components, defaultPreloadStaleTime: 0,\n setupRouterSsrQueryIntegration for SSR dehydration/hydration\n and streaming, per-request QueryClient isolation.\n requires:\n - 'router-core'\n - 'router-core/data-loading'\n - 'react-router'\n sources:\n - 'TanStack/router:docs/router/guide/external-data-loading.md'\n - 'TanStack/router:docs/router/integrations/query.md'\n\n # โ”€โ”€ Lifecycle Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Migrate from React Router'\n slug: 'lifecycle/migrate-from-react-router'\n type: 'lifecycle'\n domain: 'defining-routes'\n path: 'skills/lifecycle/migrate-from-react-router/SKILL.md'\n package: 'packages/react-router'\n description: >-\n Step-by-step migration from React Router v7 to TanStack Router:\n route definition conversion, Link/useNavigate API differences,\n useSearchParams to validateSearch + useSearch, useParams with from,\n Outlet replacement, loader conversion, code splitting differences.\n requires:\n - 'router-core'\n - 'react-router'\n sources:\n - 'TanStack/router:docs/router/how-to/migrate-from-react-router.md'\n - 'TanStack/router:docs/router/installation/migrate-from-react-router.md'\n" }, { "path": "_artifacts/start_domain_map.yaml", "content": "# domain_map.yaml\n# Generated by skill-domain-discovery\n# Library: TanStack Start\n# Version: 1.166.2\n# Date: 2026-03-07\n# Status: reviewed\n\nlibrary:\n name: '@tanstack/react-start'\n version: '1.166.2'\n repository: 'https://github.com/TanStack/router'\n description: >-\n Full-stack React framework built on TanStack Router and Vite. Adds\n SSR, streaming, server functions (type-safe RPCs), middleware,\n server routes, and universal deployment. Isomorphic by default โ€”\n all code runs in both environments unless explicitly constrained.\n primary_framework: 'React'\n\ndomains:\n - name: 'Project Setup'\n slug: 'project-setup'\n description: >-\n Scaffolding a Start project, configuring Vite plugin, router\n setup with getRouter(), root route with document shell, client\n and server entry points.\n\n - name: 'Server Functions'\n slug: 'server-functions'\n description: >-\n Creating type-safe RPCs with createServerFn, input validation,\n calling from loaders/components/other server functions, error\n handling, streaming responses.\n\n - name: 'Middleware and Context'\n slug: 'middleware-and-context'\n description: >-\n Request middleware, server function middleware, context passing\n with sendContext, global middleware via createStart, middleware\n factories, fetch override precedence.\n\n - name: 'Execution Model'\n slug: 'execution-model'\n description: >-\n Isomorphic code execution, environment functions\n (createServerFn, createServerOnlyFn, createClientOnlyFn,\n createIsomorphicFn), import protection, dead code elimination,\n environment variable safety.\n\n - name: 'Server Routes'\n slug: 'server-routes'\n description: >-\n Server-side API endpoints defined in routes, HTTP method\n handlers, handler middleware, request/response patterns.\n\n - name: 'Deployment and Rendering'\n slug: 'deployment-and-rendering'\n description: >-\n Hosting providers (Cloudflare, Netlify, Vercel, Node/Docker),\n selective SSR, SPA mode, static prerendering, ISR with\n Cache-Control headers, SEO and head management.\n\nskills:\n # โ”€โ”€ Project Setup โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Start Setup'\n slug: 'start-setup'\n domain: 'project-setup'\n description: >-\n Scaffold a TanStack Start project, configure Vite plugin with\n tanstackStart(), set up router with getRouter(), create root\n route with document shell (HeadContent, Scripts, Outlet),\n configure client and server entry points.\n type: core\n packages:\n - '@tanstack/react-start'\n - '@tanstack/start-plugin-core'\n covers:\n - tanstackStart Vite plugin\n - getRouter() factory pattern\n - Root route document shell\n - HeadContent / Scripts / Outlet\n - Client entry point (optional)\n - Server entry point (optional)\n - routeTree.gen.ts\n - tsconfig configuration\n tasks:\n - 'Scaffold a new TanStack Start project'\n - 'Configure the Vite plugin'\n - 'Set up the router factory'\n - 'Customize client/server entry points'\n failure_modes:\n - mistake: 'React plugin before Start plugin in Vite config'\n mechanism: >-\n Start's Vite plugin must come before React's plugin.\n Wrong order causes route generation and server function\n compilation to fail.\n wrong_pattern: |\n plugins: [react(), tanstackStart()]\n correct_pattern: |\n plugins: [tanstackStart(), react()]\n source: 'docs/start/framework/react/build-from-scratch.md'\n priority: CRITICAL\n status: active\n\n - mistake: 'Enabling verbatimModuleSyntax in tsconfig'\n mechanism: >-\n verbatimModuleSyntax causes server bundles to leak into\n client bundles. Must be disabled.\n source: 'docs/start/framework/react/build-from-scratch.md'\n priority: HIGH\n status: active\n\n - mistake: 'Missing Scripts component in root route'\n mechanism: >-\n The Scripts component must be rendered in the body of\n the root route for proper hydration and functionality.\n Without it, client-side JavaScript does not load.\n source: 'docs/start/framework/react/guide/routing.md'\n priority: HIGH\n status: active\n\n # โ”€โ”€ Server Functions โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Server Functions'\n slug: 'server-functions'\n domain: 'server-functions'\n description: >-\n Create type-safe RPCs with createServerFn, validate inputs\n with Zod or plain functions, call from loaders/components/\n event handlers, handle errors/redirects/notFound, stream\n responses with ReadableStream or async generators.\n type: core\n packages:\n - '@tanstack/react-start'\n - '@tanstack/start-client-core'\n - '@tanstack/start-server-core'\n covers:\n - createServerFn (GET/POST)\n - inputValidator (Zod or function)\n - useServerFn hook\n - Server context utilities (getRequest, getRequestHeader, setResponseHeader, setResponseStatus)\n - Error handling (throw errors, redirect, notFound)\n - Streaming (ReadableStream, async generators)\n - File organization (.functions.ts, .server.ts)\n - FormData handling\n tasks:\n - 'Create a server function for data fetching'\n - 'Validate server function inputs'\n - 'Call server functions from components'\n - 'Stream data from server functions'\n - 'Handle errors in server functions'\n failure_modes:\n - mistake: 'Putting server-only code in loaders instead of server functions'\n mechanism: >-\n Loaders are ISOMORPHIC โ€” they run on both client and server.\n Database queries, file system access, and secret API keys\n in loaders will either fail on the client or leak to the\n client bundle. Use createServerFn for server-only logic.\n wrong_pattern: |\n export const Route = createFileRoute('/posts')({\n loader: async () => {\n const posts = await db.query('SELECT * FROM posts')\n return { posts }\n },\n })\n correct_pattern: |\n const getPosts = createServerFn({ method: 'GET' })\n .handler(async () => {\n const posts = await db.query('SELECT * FROM posts')\n return { posts }\n })\n\n export const Route = createFileRoute('/posts')({\n loader: () => getPosts(),\n })\n source: 'maintainer interview'\n priority: CRITICAL\n status: active\n skills: ['server-functions', 'execution-model']\n\n - mistake: 'Using dynamic imports for server functions'\n mechanism: >-\n Dynamic imports of server functions can cause bundler\n issues. Static imports are safe โ€” the build process\n replaces server implementations with RPC stubs.\n wrong_pattern: |\n const { getUser } = await import('~/utils/users.functions')\n correct_pattern: |\n import { getUser } from '~/utils/users.functions'\n source: 'docs/start/framework/react/guide/server-functions.md'\n priority: HIGH\n status: active\n\n - mistake: 'Generating Next.js or Remix server patterns'\n mechanism: >-\n Agents generate getServerSideProps, \"use server\" directives,\n or Remix-style loader exports. TanStack Start uses\n createServerFn for server-only code.\n wrong_pattern: |\n 'use server'\n export async function getUser() { ... }\n correct_pattern: |\n const getUser = createServerFn({ method: 'GET' })\n .handler(async () => { ... })\n source: 'maintainer interview'\n priority: CRITICAL\n status: active\n\n # โ”€โ”€ Middleware and Context โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Middleware'\n slug: 'middleware'\n domain: 'middleware-and-context'\n description: >-\n Request middleware and server function middleware with\n createMiddleware, context passing via next(), sendContext\n for client-server transfer, global middleware via createStart\n in src/start.ts, middleware factories, fetch override\n precedence, header merging.\n type: core\n packages:\n - '@tanstack/react-start'\n - '@tanstack/start-client-core'\n - '@tanstack/start-server-core'\n covers:\n - createMiddleware\n - Request middleware (.server only)\n - Server function middleware (.client + .server)\n - Context passing via next({ context })\n - sendContext for client-server transfer\n - Global middleware (createStart in src/start.ts)\n - Middleware factories\n - Fetch override precedence\n - Header merging\n - Method order enforcement (middleware โ†’ inputValidator โ†’ client โ†’ server)\n tasks:\n - 'Add authentication middleware'\n - 'Pass context through middleware chain'\n - 'Configure global request middleware'\n - 'Create reusable middleware factories'\n failure_modes:\n - mistake: 'Trusting client context without server validation'\n mechanism: >-\n Client context via sendContext is NOT validated by default.\n Dynamic user-generated data must be validated in server-side\n middleware before use.\n source: 'docs/start/framework/react/guide/middleware.md'\n priority: HIGH\n status: active\n\n - mistake: 'Wrong middleware method order'\n mechanism: >-\n TypeScript enforces method order: middleware โ†’ inputValidator\n โ†’ client โ†’ server. Wrong order causes type errors and\n runtime failures.\n source: 'docs/start/framework/react/guide/middleware.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Confusing request vs server function middleware'\n mechanism: >-\n Request middleware runs on ALL server requests (SSR, server\n routes, server functions). Server function middleware runs\n only for server functions and has .client() method. Using\n the wrong type causes unexpected scope.\n source: 'docs/start/framework/react/guide/middleware.md'\n priority: MEDIUM\n status: active\n\n # โ”€โ”€ Execution Model โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Execution Model'\n slug: 'execution-model'\n domain: 'execution-model'\n description: >-\n Isomorphic code execution model, environment boundary functions\n (createServerFn, createServerOnlyFn, createClientOnlyFn,\n createIsomorphicFn), import protection, dead code elimination,\n environment variable safety (VITE_ prefix), useHydrated hook.\n type: core\n packages:\n - '@tanstack/react-start'\n - '@tanstack/start-client-core'\n - '@tanstack/start-server-core'\n covers:\n - Isomorphic-by-default principle\n - createServerFn (RPC boundary)\n - createServerOnlyFn (throws on client)\n - createClientOnlyFn (throws on server)\n - createIsomorphicFn (different impl per env)\n - ClientOnly component\n - useHydrated hook\n - Import protection (experimental)\n - Environment variables (VITE_ prefix, process.env)\n - Dead code elimination / tree shaking\n tasks:\n - 'Protect server-only code from client bundles'\n - 'Use environment-specific implementations'\n - 'Handle environment variables safely'\n - 'Debug import protection violations'\n failure_modes:\n - mistake: 'Assuming loaders are server-only'\n mechanism: >-\n ALL code in TanStack Start is isomorphic by default.\n Loaders run on BOTH server and client. Server-only\n operations must use createServerFn, createServerOnlyFn,\n or server routes.\n wrong_pattern: |\n export const Route = createFileRoute('/dashboard')({\n loader: async () => {\n const secret = process.env.API_SECRET\n return fetch(`https://api.example.com/data`, {\n headers: { Authorization: secret }\n })\n },\n })\n correct_pattern: |\n const getData = createServerFn({ method: 'GET' })\n .handler(async () => {\n const secret = process.env.API_SECRET\n return fetch(`https://api.example.com/data`, {\n headers: { Authorization: secret }\n })\n })\n\n export const Route = createFileRoute('/dashboard')({\n loader: () => getData(),\n })\n source: 'docs/start/framework/react/guide/execution-model.md'\n priority: CRITICAL\n status: active\n skills: ['execution-model', 'server-functions']\n\n - mistake: 'Exposing secrets via module-level process.env'\n mechanism: >-\n Module-level process.env access runs in both environments.\n The variable value leaks into the client bundle. Access\n secrets only inside createServerFn or createServerOnlyFn.\n wrong_pattern: |\n const apiKey = process.env.SECRET_KEY\n export function fetchData() { ... }\n correct_pattern: |\n const fetchData = createServerFn({ method: 'GET' })\n .handler(async () => {\n const apiKey = process.env.SECRET_KEY\n return fetch(url, { headers: { Authorization: apiKey } })\n })\n source: 'docs/start/framework/react/guide/execution-model.md'\n priority: CRITICAL\n status: active\n\n - mistake: 'Using VITE_ prefix for server secrets'\n mechanism: >-\n VITE_ prefixed variables are exposed to the client bundle.\n Server secrets must NOT have the VITE_ prefix. Access\n them via process.env inside server functions only.\n source: 'docs/start/framework/react/guide/environment-variables.md'\n priority: CRITICAL\n status: active\n\n # โ”€โ”€ Server Routes โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Server Routes'\n slug: 'server-routes'\n domain: 'server-routes'\n description: >-\n Define server-side API endpoints alongside app routes using\n the server property with HTTP method handlers, per-handler\n middleware via createHandlers, request/response patterns.\n type: core\n packages:\n - '@tanstack/react-start'\n - '@tanstack/start-server-core'\n covers:\n - server property on createFileRoute\n - handlers object (GET, POST, PUT, DELETE)\n - createHandlers for per-handler middleware\n - Handler context (request, params, context)\n - Request body parsing (json, text, formData)\n - Response helpers (Response.json)\n - File naming for API routes\n tasks:\n - 'Create a REST API endpoint'\n - 'Add middleware to server route handlers'\n - 'Handle different HTTP methods'\n failure_modes:\n - mistake: 'Duplicate path resolution for server routes'\n mechanism: >-\n Each route can only have a single handler file. Having\n both users.ts and users/index.ts causes errors.\n source: 'docs/start/framework/react/guide/server-routes.md'\n priority: MEDIUM\n status: active\n\n # โ”€โ”€ Deployment and Rendering โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Deployment'\n slug: 'deployment'\n domain: 'deployment-and-rendering'\n description: >-\n Deploy TanStack Start to Cloudflare Workers, Netlify, Vercel,\n Node.js/Docker, Bun, Railway. Configure selective SSR, SPA\n mode, static prerendering, ISR with Cache-Control headers.\n type: core\n packages:\n - '@tanstack/react-start'\n - '@tanstack/start-plugin-core'\n covers:\n - Cloudflare Workers deployment\n - Netlify deployment\n - Vercel / Railway deployment\n - Node.js / Docker deployment\n - Bun deployment\n - Selective SSR (ssr option per route)\n - SPA mode configuration\n - Static prerendering (prerender option)\n - ISR with Cache-Control headers\n - SEO (head property, structured data)\n tasks:\n - 'Deploy to Cloudflare Workers'\n - 'Deploy to Netlify'\n - 'Configure selective SSR per route'\n - 'Enable SPA mode'\n - 'Set up static prerendering'\n - 'Configure ISR with cache headers'\n failure_modes:\n - mistake: 'Bun deployment with React 18'\n mechanism: >-\n Bun-specific deployment only works with React 19.\n For React 18, use Node.js deployment guidelines.\n source: 'docs/start/framework/react/guide/hosting.md'\n priority: MEDIUM\n status: active\n\n - mistake: 'Missing nodejs_compat flag for Cloudflare Workers'\n mechanism: >-\n Cloudflare Workers requires compatibility_flags:\n [\"nodejs_compat\"] in wrangler config. Without it,\n Node.js APIs used by Start fail at runtime.\n source: 'docs/start/framework/react/guide/hosting.md'\n priority: HIGH\n status: active\n\n - mistake: 'Child route loosening parent SSR config'\n mechanism: >-\n SSR config inherits from parent and can only become MORE\n restrictive (true โ†’ data-only โ†’ false). A child cannot\n set ssr: true if parent has ssr: false.\n source: 'docs/start/framework/react/guide/selective-ssr.md'\n priority: MEDIUM\n status: active\n\ntensions:\n - name: 'Isomorphic defaults vs server-only expectations'\n skills: ['execution-model', 'server-functions']\n description: >-\n All code runs everywhere by default. Agents trained on\n Next.js/Remix assume loaders and route code are server-only.\n implication: >-\n Agents put secrets, DB queries, and file system access in\n loaders instead of server functions, causing client-side\n failures or security leaks.\n\n - name: 'Simplicity of isomorphic code vs security boundaries'\n skills: ['execution-model', 'middleware']\n description: >-\n The isomorphic model makes code easy to write but requires\n explicit boundaries for security. Agents don't realize they\n need to actively constrain execution environment.\n implication: >-\n Agents expose secrets via module-level process.env or\n forget to validate sendContext data in middleware.\n\ncross_references:\n - from: 'server-functions'\n to: 'execution-model'\n reason: 'Server functions ARE the isomorphic boundary โ€” understanding the execution model is prerequisite'\n - from: 'server-functions'\n to: 'middleware'\n reason: 'Server function middleware chains compose with server functions'\n - from: 'middleware'\n to: 'server-routes'\n reason: 'Server routes use the same middleware system'\n - from: 'deployment'\n to: 'execution-model'\n reason: 'Deployment target affects which environment code runs in'\n\ngaps: []\n" }, { "path": "_artifacts/start_skill_tree.yaml", "content": "# skills/_artifacts/start_skill_tree.yaml\nlibrary:\n name: '@tanstack/react-start'\n version: '1.166.2'\n repository: 'https://github.com/TanStack/router'\n description: >-\n Full-stack React framework built on TanStack Router and Vite.\n Adds SSR, streaming, server functions (type-safe RPCs), middleware,\n server routes, and universal deployment. Isomorphic by default โ€”\n all code runs in both environments unless explicitly constrained.\ngenerated_from:\n domain_map: '_artifacts/start_domain_map.yaml'\ngenerated_at: '2026-03-07'\n\nskills:\n # โ”€โ”€ Start Core Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Start Core'\n slug: 'start-core'\n type: 'core'\n domain: 'project-setup'\n path: 'skills/start-core/SKILL.md'\n package: 'packages/start-client-core'\n description: >-\n Core overview for TanStack Start: tanstackStart() Vite plugin,\n getRouter() factory, root route document shell (HeadContent,\n Scripts, Outlet), client/server entry points, routeTree.gen.ts,\n tsconfig configuration. Entry point for all Start skills.\n sources:\n - 'TanStack/router:docs/start/framework/react/build-from-scratch.md'\n - 'TanStack/router:docs/start/framework/react/quick-start.md'\n - 'TanStack/router:docs/start/framework/react/guide/routing.md'\n\n - name: 'Server Functions'\n slug: 'start-core/server-functions'\n type: 'sub-skill'\n domain: 'server-functions'\n path: 'skills/start-core/server-functions/SKILL.md'\n package: 'packages/start-client-core'\n description: >-\n createServerFn (GET/POST), inputValidator (Zod or function),\n useServerFn hook, server context utilities (getRequest,\n getRequestHeader, setResponseHeader, setResponseStatus), error\n handling (throw errors, redirect, notFound), streaming\n (ReadableStream, async generators), FormData handling, file\n organization (.functions.ts, .server.ts).\n requires:\n - 'start-core'\n sources:\n - 'TanStack/router:docs/start/framework/react/guide/server-functions.md'\n\n - name: 'Middleware'\n slug: 'start-core/middleware'\n type: 'sub-skill'\n domain: 'middleware-and-context'\n path: 'skills/start-core/middleware/SKILL.md'\n package: 'packages/start-client-core'\n description: >-\n createMiddleware, request middleware (.server only), server\n function middleware (.client + .server), context passing via\n next({ context }), sendContext for client-server transfer,\n global middleware via createStart in src/start.ts, middleware\n factories, method order enforcement.\n requires:\n - 'start-core'\n - 'start-core/server-functions'\n sources:\n - 'TanStack/router:docs/start/framework/react/guide/middleware.md'\n\n - name: 'Execution Model'\n slug: 'start-core/execution-model'\n type: 'sub-skill'\n domain: 'execution-model'\n path: 'skills/start-core/execution-model/SKILL.md'\n package: 'packages/start-client-core'\n description: >-\n Isomorphic-by-default principle, environment boundary functions\n (createServerFn, createServerOnlyFn, createClientOnlyFn,\n createIsomorphicFn), ClientOnly component, useHydrated hook,\n import protection, dead code elimination, environment variable\n safety (VITE_ prefix, process.env).\n requires:\n - 'start-core'\n sources:\n - 'TanStack/router:docs/start/framework/react/guide/execution-model.md'\n - 'TanStack/router:docs/start/framework/react/guide/environment-variables.md'\n\n - name: 'Server Routes'\n slug: 'start-core/server-routes'\n type: 'sub-skill'\n domain: 'server-routes'\n path: 'skills/start-core/server-routes/SKILL.md'\n package: 'packages/start-client-core'\n description: >-\n Server-side API endpoints using the server property on\n createFileRoute, HTTP method handlers (GET, POST, PUT, DELETE),\n createHandlers for per-handler middleware, handler context\n (request, params, context), request body parsing, response\n helpers, file naming for API routes.\n requires:\n - 'start-core'\n sources:\n - 'TanStack/router:docs/start/framework/react/guide/server-routes.md'\n\n - name: 'Deployment'\n slug: 'start-core/deployment'\n type: 'sub-skill'\n domain: 'deployment-and-rendering'\n path: 'skills/start-core/deployment/SKILL.md'\n package: 'packages/start-client-core'\n description: >-\n Deploy to Cloudflare Workers, Netlify, Vercel, Node.js/Docker,\n Bun, Railway. Selective SSR (ssr option per route), SPA mode,\n static prerendering, ISR with Cache-Control headers, SEO and\n head management.\n requires:\n - 'start-core'\n sources:\n - 'TanStack/router:docs/start/framework/react/guide/hosting.md'\n - 'TanStack/router:docs/start/framework/react/guide/selective-ssr.md'\n - 'TanStack/router:docs/start/framework/react/guide/static-prerendering.md'\n - 'TanStack/router:docs/start/framework/react/guide/full-stack-seo.md'\n\n # โ”€โ”€ React Start Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'React Start'\n slug: 'react-start'\n type: 'framework'\n domain: 'project-setup'\n path: 'skills/react-start/SKILL.md'\n package: 'packages/react-start'\n description: >-\n React bindings for TanStack Start: createStart, StartClient,\n StartServer, React-specific imports, re-exports from\n @tanstack/react-router, full project setup with React.\n requires:\n - 'start-core'\n sources:\n - 'TanStack/router:packages/react-start/src'\n - 'TanStack/router:docs/start/framework/react/build-from-scratch.md'\n\n # โ”€โ”€ Lifecycle Skills โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n - name: 'Migrate from Next.js'\n slug: 'lifecycle/migrate-from-nextjs'\n type: 'lifecycle'\n domain: 'project-setup'\n path: 'skills/lifecycle/migrate-from-nextjs/SKILL.md'\n package: 'packages/react-start'\n description: >-\n Step-by-step migration from Next.js App Router to TanStack\n Start: route definition conversion, API mapping, server\n function conversion from Server Actions, middleware conversion,\n data fetching pattern changes.\n requires:\n - 'start-core'\n - 'react-start'\n sources:\n - 'TanStack/router:docs/start/framework/react/guide/server-functions.md'\n - 'TanStack/router:docs/start/framework/react/guide/middleware.md'\n - 'TanStack/router:docs/start/framework/react/guide/execution-model.md'\n" }, { "path": "benchmarks/bundle-size/.gitignore", "content": "node_modules\ndist\nscenarios/*/src/routeTree.gen.ts\n\nresults/*.json\nresults/*.md\nresults/*.js\n!results/.gitkeep\n" }, { "path": "benchmarks/bundle-size/README.md", "content": "# Bundle Size Benchmarks\n\nThis workspace contains deterministic bundle-size fixtures for:\n\n- `@tanstack/react-router`\n- `@tanstack/solid-router`\n- `@tanstack/vue-router`\n- `@tanstack/react-start`\n- `@tanstack/solid-start`\n\nEach package has two scenarios:\n\n- `minimal`: Small route app with `__root` + index route that renders `hello world`\n- `full`: Same route shape plus a broad root-level harness that imports/uses the full hooks/components surface\n- Start `full` scenarios also exercise `createServerFn`, `createMiddleware`, and `useServerFn`\n\n## Design Notes\n\n- Scenarios use file-based routing as the default app style.\n- Router scenarios use `@tanstack/router-plugin/vite` with `autoCodeSplitting: true`.\n- Start scenarios use `@tanstack/-start/plugin/vite` with router code-splitting enabled.\n- Full-surface coverage is manually maintained (no strict export-coverage gate).\n- Metrics are measured from initial-load JS graph only and reported as raw/gzip/brotli bytes.\n- Gzip is the primary tracking signal for PR deltas and historical charting.\n\n## Local Run\n\n```bash\npnpm nx run @benchmarks/bundle-size:build\n```\n\nThis writes:\n\n- `benchmarks/bundle-size/results/current.json`\n- `benchmarks/bundle-size/results/benchmark-action.json`\n\n## CI Reporting\n\n- PR workflow generates a sticky comment with:\n - current gzip values\n - baseline delta\n - inline sparkline trend\n- Pushes to `main` publish historical chart data to GitHub Pages via `benchmark-action/github-action-benchmark`.\n\n## Manual Update Policy\n\nWhen router/start public hooks/components evolve, update the corresponding `*-full/src/routes/__root.tsx` harness to keep full scenarios representative.\n\n## Backfill Readiness\n\nThe measurement script supports optional interfaces for historical backfilling:\n\n- `--sha`\n- `--measured-at`\n- `--append-history`\n\nThese are intended for one-off scripts that replay historical commits and append results to the same history dataset shape used for chart generation.\nIf `--append-history` points at a `data.js` file, output is written as `window.BENCHMARK_DATA = ...` for direct GitHub Pages compatibility.\n" }, { "path": "benchmarks/bundle-size/package.json", "content": "{\n \"name\": \"@benchmarks/bundle-size\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"node ../../scripts/benchmarks/bundle-size/measure.mjs\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/solid-router\": \"workspace:^\",\n \"@tanstack/vue-router\": \"workspace:^\",\n \"@tanstack/react-start\": \"workspace:^\",\n \"@tanstack/solid-start\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"solid-js\": \"^1.9.10\",\n \"vue\": \"^3.5.16\"\n },\n \"devDependencies\": {\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"@vitejs/plugin-vue\": \"^6.0.5\",\n \"@vitejs/plugin-vue-jsx\": \"^5.1.5\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^8.0.0\",\n \"vite-plugin-solid\": \"^2.11.11\"\n }\n}\n" }, { "path": "benchmarks/bundle-size/results/.gitkeep", "content": "\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-full/index.html", "content": "\n\n \n \n \n react-router-full\n \n \n
\n \n \n\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-full/src/main.tsx", "content": "import ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({\n routeTree,\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (!rootElement) {\n throw new Error('Root element `#app` not found')\n}\nif (!rootElement.innerHTML) {\n ReactDOM.createRoot(rootElement).render()\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-full/src/routes/__root.tsx", "content": "import {\n Asset,\n Await,\n Block,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n HeadContent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScriptOnce,\n Scripts,\n ScrollRestoration,\n createLink,\n createRootRoute,\n linkOptions,\n useAwaited,\n useBlocker,\n useCanGoBack,\n useElementScrollRestoration,\n useHydrated,\n useLinkProps,\n useLoaderData,\n useLoaderDeps,\n useLocation,\n useMatch,\n useMatchRoute,\n useMatches,\n useNavigate,\n useParams,\n useParentMatches,\n useChildMatches,\n useRouteContext,\n useRouter,\n useRouterState,\n useSearch,\n useTags,\n} from '@tanstack/react-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n const router = useRouter()\n const hydrated = useHydrated()\n const awaited = useAwaited({ promise: Promise.resolve('ready') })\n const linkProps = useLinkProps({ to: '/' } as any)\n const matchRoute = useMatchRoute()\n const matches = useMatches()\n const parentMatches = useParentMatches()\n const childMatches = useChildMatches()\n const match = useMatch({ strict: false, shouldThrow: false } as any)\n const loaderDeps = useLoaderDeps({ strict: false } as any)\n const loaderData = useLoaderData({ strict: false } as any)\n const params = useParams({ strict: false } as any)\n const search = useSearch({ strict: false } as any)\n const routeContext = useRouteContext({ strict: false } as any)\n const routerState = useRouterState({ select: (state) => state.status } as any)\n const location = useLocation()\n const canGoBack = useCanGoBack()\n const navigate = useNavigate()\n const scrollEntry = useElementScrollRestoration({ id: 'root-scroll' })\n const tags = useTags()\n\n useBlocker({\n shouldBlockFn: () => false,\n disabled: true,\n withResolver: false,\n })\n\n const linkFactoryResult = linkOptions({ to: '/' } as any)\n const routeMatchResult = matchRoute({ to: '/' } as any)\n const SvgLink = createLink('svg')\n\n const hooksAndComponents = [\n useAwaited,\n useHydrated,\n useLinkProps,\n useMatchRoute,\n useMatches,\n useParentMatches,\n useChildMatches,\n useMatch,\n useLoaderDeps,\n useLoaderData,\n useBlocker,\n useNavigate,\n useParams,\n useSearch,\n useRouteContext,\n useRouter,\n useRouterState,\n useLocation,\n useCanGoBack,\n useElementScrollRestoration,\n useTags,\n Await,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScrollRestoration,\n Block,\n ScriptOnce,\n Asset,\n HeadContent,\n Scripts,\n ]\n\n ;(globalThis as any).__TANSTACK_BUNDLE_SIZE_KEEP__ = {\n hooksAndComponents,\n }\n\n void awaited\n void linkFactoryResult\n void matches\n void parentMatches\n void childMatches\n void match\n void loaderDeps\n void loaderData\n void params\n void search\n void routeContext\n void routerState\n void location\n void canGoBack\n void navigate\n void scrollEntry\n void tags\n void routeMatchResult\n\n return (\n <>\n \n {'window.__tsr_bundle_size = true'}\n \n home\n \n \n \n {() => }\n }>\n \n \n \n {() => }\n \n false} disabled withResolver={false}>\n {() => }\n \n }>\n \n \n \n \n \n \n \n \n
\n
hello world
\n
\n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-full/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-full/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n }),\n react(),\n ],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-minimal/index.html", "content": "\n\n \n \n \n react-router-minimal\n \n \n
\n \n \n\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-minimal/src/main.tsx", "content": "import ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (!rootElement) {\n throw new Error('Root element `#app` not found')\n}\nif (!rootElement.innerHTML) {\n ReactDOM.createRoot(rootElement).render()\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-minimal/src/routes/__root.tsx", "content": "import { Outlet, createRootRoute } from '@tanstack/react-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return \n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-minimal/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-router-minimal/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n }),\n react(),\n ],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-full/src/router.tsx", "content": "import { createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n scrollRestoration: true,\n })\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-full/src/routes/__root.tsx", "content": "import {\n Asset,\n Await,\n Block,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n HeadContent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScriptOnce,\n Scripts,\n ScrollRestoration,\n createLink,\n createRootRoute,\n linkOptions,\n useAwaited,\n useBlocker,\n useCanGoBack,\n useElementScrollRestoration,\n useHydrated,\n useLinkProps,\n useLoaderData,\n useLoaderDeps,\n useLocation,\n useMatch,\n useMatchRoute,\n useMatches,\n useNavigate,\n useParams,\n useParentMatches,\n useChildMatches,\n useRouteContext,\n useRouter,\n useRouterState,\n useSearch,\n useTags,\n} from '@tanstack/react-router'\nimport {\n createMiddleware,\n createServerFn,\n useServerFn,\n} from '@tanstack/react-start'\n\nconst requestMiddleware = createMiddleware().server(async ({ next }) => {\n return next()\n})\n\nconst functionMiddleware = createMiddleware({ type: 'function' })\n .client(async ({ next }) => {\n return next()\n })\n .server(async ({ next }) => {\n return next()\n })\n\nconst helloServerFn = createServerFn({ method: 'GET' })\n .middleware([requestMiddleware, functionMiddleware])\n .handler(async () => {\n return 'hello from server fn'\n })\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n const router = useRouter()\n const hydrated = useHydrated()\n const awaited = useAwaited({ promise: Promise.resolve('ready') })\n const linkProps = useLinkProps({ to: '/' } as any)\n const matchRoute = useMatchRoute()\n const matches = useMatches()\n const parentMatches = useParentMatches()\n const childMatches = useChildMatches()\n const match = useMatch({ strict: false, shouldThrow: false } as any)\n const loaderDeps = useLoaderDeps({ strict: false } as any)\n const loaderData = useLoaderData({ strict: false } as any)\n const params = useParams({ strict: false } as any)\n const search = useSearch({ strict: false } as any)\n const routeContext = useRouteContext({ strict: false } as any)\n const routerState = useRouterState({ select: (state) => state.status } as any)\n const location = useLocation()\n const canGoBack = useCanGoBack()\n const navigate = useNavigate()\n const scrollEntry = useElementScrollRestoration({ id: 'root-scroll' })\n const tags = useTags()\n const invokeServerFn = useServerFn(helloServerFn)\n\n useBlocker({\n shouldBlockFn: () => false,\n disabled: true,\n withResolver: false,\n })\n\n const linkFactoryResult = linkOptions({ to: '/' } as any)\n const routeMatchResult = matchRoute({ to: '/' } as any)\n const SvgLink = createLink('svg')\n\n const startSurface = [createMiddleware, createServerFn, useServerFn]\n const hooksAndComponents = [\n useAwaited,\n useHydrated,\n useLinkProps,\n useMatchRoute,\n useMatches,\n useParentMatches,\n useChildMatches,\n useMatch,\n useLoaderDeps,\n useLoaderData,\n useBlocker,\n useNavigate,\n useParams,\n useSearch,\n useRouteContext,\n useRouter,\n useRouterState,\n useLocation,\n useCanGoBack,\n useElementScrollRestoration,\n useTags,\n Await,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScrollRestoration,\n Block,\n ScriptOnce,\n Asset,\n HeadContent,\n Scripts,\n ]\n\n ;(globalThis as any).__TANSTACK_BUNDLE_SIZE_KEEP__ = {\n hooksAndComponents,\n startSurface,\n }\n\n void awaited\n void linkFactoryResult\n void matches\n void parentMatches\n void childMatches\n void match\n void loaderDeps\n void loaderData\n void params\n void search\n void routeContext\n void routerState\n void location\n void canGoBack\n void navigate\n void scrollEntry\n void tags\n void routeMatchResult\n void invokeServerFn\n\n return (\n \n \n \n \n \n {'window.__tsr_bundle_size = true'}\n \n home\n \n \n \n {() => }\n }>\n \n \n \n {() => }\n \n false} disabled withResolver={false}>\n {() => }\n \n }>\n \n \n \n \n \n \n \n \n
\n
hello world
\n
\n \n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-full/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-full/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport viteReact from '@vitejs/plugin-react'\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite'\n\nexport default defineConfig({\n plugins: [tanstackStart(), viteReact()],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-minimal/src/router.tsx", "content": "import { createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n scrollRestoration: true,\n })\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-minimal/src/routes/__root.tsx", "content": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRoute,\n} from '@tanstack/react-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-minimal/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/react-start-minimal/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport viteReact from '@vitejs/plugin-react'\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite'\n\nexport default defineConfig({\n plugins: [tanstackStart(), viteReact()],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-full/index.html", "content": "\n\n \n \n \n solid-router-full\n \n \n
\n \n \n\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-full/src/main.tsx", "content": "import { render } from 'solid-js/web'\nimport { RouterProvider, createRouter } from '@tanstack/solid-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({\n routeTree,\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/solid-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (!rootElement) {\n throw new Error('Root element `#app` not found')\n}\nif (!rootElement.innerHTML) {\n render(() => , rootElement)\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-full/src/routes/__root.tsx", "content": "import {\n Asset,\n Await,\n Block,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n HeadContent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScriptOnce,\n Scripts,\n ScrollRestoration,\n createLink,\n createRootRoute,\n linkOptions,\n useAwaited,\n useBlocker,\n useCanGoBack,\n useChildMatches,\n useElementScrollRestoration,\n useHydrated,\n useLinkProps,\n useLoaderData,\n useLoaderDeps,\n useLocation,\n useMatch,\n useMatchRoute,\n useMatches,\n useNavigate,\n useParams,\n useParentMatches,\n useRouteContext,\n useRouter,\n useRouterState,\n useSearch,\n useTags,\n} from '@tanstack/solid-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n const router = useRouter()\n const hydrated = useHydrated()\n const [awaited] = useAwaited({ promise: Promise.resolve('ready') })\n const linkProps = useLinkProps({ to: '/' } as any)\n const matchRoute = useMatchRoute()\n const matches = useMatches()\n const parentMatches = useParentMatches()\n const childMatches = useChildMatches()\n const match = useMatch({ strict: false, shouldThrow: false } as any)\n const loaderDeps = useLoaderDeps({ strict: false } as any)\n const loaderData = useLoaderData({ strict: false } as any)\n const params = useParams({ strict: false } as any)\n const search = useSearch({ strict: false } as any)\n const routeContext = useRouteContext({ strict: false } as any)\n const routerState = useRouterState({ select: (state) => state.status } as any)\n const location = useLocation()\n const canGoBack = useCanGoBack()\n const navigate = useNavigate()\n const scrollEntry = useElementScrollRestoration({ id: 'root-scroll' })\n const tags = useTags()\n\n useBlocker({\n shouldBlockFn: () => false,\n disabled: true,\n withResolver: false,\n })\n\n const linkFactoryResult = linkOptions({ to: '/' } as any)\n const routeMatchResult = matchRoute({ to: '/' } as any)\n const SvgLink = createLink('svg')\n\n const hooksAndComponents = [\n useAwaited,\n useHydrated,\n useLinkProps,\n useMatchRoute,\n useMatches,\n useParentMatches,\n useChildMatches,\n useMatch,\n useLoaderDeps,\n useLoaderData,\n useBlocker,\n useNavigate,\n useParams,\n useSearch,\n useRouteContext,\n useRouter,\n useRouterState,\n useLocation,\n useCanGoBack,\n useElementScrollRestoration,\n useTags,\n Await,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScrollRestoration,\n Block,\n ScriptOnce,\n Asset,\n HeadContent,\n Scripts,\n ]\n\n ;(globalThis as any).__TANSTACK_BUNDLE_SIZE_KEEP__ = {\n hooksAndComponents,\n }\n\n void awaited\n void linkFactoryResult\n void matches()\n void parentMatches()\n void childMatches()\n void match()\n void loaderDeps()\n void loaderData()\n void params()\n void search()\n void routeContext()\n void routerState()\n void location()\n void canGoBack()\n void navigate\n void scrollEntry\n void tags()\n void routeMatchResult()\n\n return (\n <>\n \n {'window.__tsr_bundle_size = true'}\n \n home\n \n \n \n {() => }\n }>\n \n \n \n {() => }\n \n false} disabled withResolver={false}>\n {() => }\n \n }>\n \n \n \n {() => }\n \n \n \n \n
\n
hello world
\n
\n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-full/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-full/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'solid',\n autoCodeSplitting: true,\n }),\n solid(),\n ],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-minimal/index.html", "content": "\n\n \n \n \n solid-router-minimal\n \n \n
\n \n \n\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-minimal/src/main.tsx", "content": "import { render } from 'solid-js/web'\nimport { RouterProvider, createRouter } from '@tanstack/solid-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/solid-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (!rootElement) {\n throw new Error('Root element `#app` not found')\n}\nif (!rootElement.innerHTML) {\n render(() => , rootElement)\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-minimal/src/routes/__root.tsx", "content": "import { Outlet, createRootRoute } from '@tanstack/solid-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return \n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-minimal/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-router-minimal/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'solid',\n autoCodeSplitting: true,\n }),\n solid(),\n ],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-full/src/router.tsx", "content": "import { createRouter } from '@tanstack/solid-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n scrollRestoration: true,\n })\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-full/src/routes/__root.tsx", "content": "import {\n Asset,\n Await,\n Block,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n HeadContent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScriptOnce,\n Scripts,\n ScrollRestoration,\n createLink,\n createRootRoute,\n linkOptions,\n useAwaited,\n useBlocker,\n useCanGoBack,\n useChildMatches,\n useElementScrollRestoration,\n useHydrated,\n useLinkProps,\n useLoaderData,\n useLoaderDeps,\n useLocation,\n useMatch,\n useMatchRoute,\n useMatches,\n useNavigate,\n useParams,\n useParentMatches,\n useRouteContext,\n useRouter,\n useRouterState,\n useSearch,\n useTags,\n} from '@tanstack/solid-router'\nimport {\n createMiddleware,\n createServerFn,\n useServerFn,\n} from '@tanstack/solid-start'\n\ntype BundleSizeKeep = {\n hooksAndComponents: ReadonlyArray\n startSurface: ReadonlyArray\n}\n\ndeclare global {\n var __TANSTACK_BUNDLE_SIZE_KEEP__: BundleSizeKeep | undefined\n}\n\nconst requestMiddleware = createMiddleware().server(async ({ next }) => {\n return next()\n})\n\nconst functionMiddleware = createMiddleware({ type: 'function' })\n .client(async ({ next }) => {\n return next()\n })\n .server(async ({ next }) => {\n return next()\n })\n\nconst helloServerFn = createServerFn({ method: 'GET' })\n .middleware([requestMiddleware, functionMiddleware])\n .handler(async () => {\n return 'hello from server fn'\n })\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n const router = useRouter()\n const hydrated = useHydrated()\n const [awaited] = useAwaited({ promise: Promise.resolve('ready') })\n const linkProps = useLinkProps({ to: '/' })\n const matchRoute = useMatchRoute()\n const matches = useMatches()\n const parentMatches = useParentMatches()\n const childMatches = useChildMatches()\n const match = useMatch({ strict: false, shouldThrow: false })\n const loaderDeps = useLoaderDeps({ strict: false })\n const loaderData = useLoaderData({ strict: false })\n const params = useParams({ strict: false })\n const search = useSearch({ strict: false })\n const routeContext = useRouteContext({ strict: false })\n const routerState = useRouterState({ select: (state) => state.status })\n const location = useLocation()\n const canGoBack = useCanGoBack()\n const navigate = useNavigate()\n const scrollEntry = useElementScrollRestoration({ id: 'root-scroll' })\n const tags = useTags()\n const invokeServerFn = useServerFn(helloServerFn)\n\n useBlocker({\n shouldBlockFn: () => false,\n disabled: true,\n withResolver: false,\n })\n\n const linkFactoryResult = linkOptions({ to: '/' })\n const routeMatchResult = matchRoute({ to: '/' })\n const SvgLink = createLink('svg')\n\n const startSurface = [createMiddleware, createServerFn, useServerFn]\n const hooksAndComponents = [\n useAwaited,\n useHydrated,\n useLinkProps,\n useMatchRoute,\n useMatches,\n useParentMatches,\n useChildMatches,\n useMatch,\n useLoaderDeps,\n useLoaderData,\n useBlocker,\n useNavigate,\n useParams,\n useSearch,\n useRouteContext,\n useRouter,\n useRouterState,\n useLocation,\n useCanGoBack,\n useElementScrollRestoration,\n useTags,\n Await,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScrollRestoration,\n Block,\n ScriptOnce,\n Asset,\n HeadContent,\n Scripts,\n ]\n\n globalThis.__TANSTACK_BUNDLE_SIZE_KEEP__ = {\n hooksAndComponents,\n startSurface,\n }\n\n void awaited\n void linkFactoryResult\n void matches()\n void parentMatches()\n void childMatches()\n void match()\n void loaderDeps()\n void loaderData()\n void params()\n void search()\n void routeContext()\n void routerState()\n void location()\n void canGoBack()\n void navigate\n void scrollEntry\n void tags()\n void routeMatchResult()\n void invokeServerFn\n\n return (\n \n \n \n \n \n {'window.__tsr_bundle_size = true'}\n \n home\n \n \n \n {() => }\n }>\n \n \n \n {() => }\n \n false} disabled withResolver={false}>\n {() => }\n \n }>\n \n \n \n {() => }\n \n \n \n \n
\n
hello world
\n
\n \n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-full/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-full/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\n\nexport default defineConfig({\n plugins: [tanstackStart(), solid({ ssr: true })],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-minimal/src/router.tsx", "content": "import { createRouter } from '@tanstack/solid-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n scrollRestoration: true,\n })\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-minimal/src/routes/__root.tsx", "content": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRoute,\n} from '@tanstack/solid-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-minimal/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/solid-start-minimal/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\n\nexport default defineConfig({\n plugins: [tanstackStart(), solid({ ssr: true })],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-full/index.html", "content": "\n\n \n \n \n vue-router-full\n \n \n
\n \n \n\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-full/src/main.tsx", "content": "import { createApp } from 'vue'\nimport { RouterProvider, createRouter } from '@tanstack/vue-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({\n routeTree,\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/vue-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (!rootElement) {\n throw new Error('Root element `#app` not found')\n}\nif (!rootElement.innerHTML) {\n createApp({\n setup() {\n return () => \n },\n }).mount('#app')\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-full/src/routes/__root.tsx", "content": "import {\n Asset,\n Await,\n Block,\n Body,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n HeadContent,\n Html,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScriptOnce,\n Scripts,\n ScrollRestoration,\n createLink,\n createRootRoute,\n linkOptions,\n useAwaited,\n useBlocker,\n useCanGoBack,\n useChildMatches,\n useElementScrollRestoration,\n useLinkProps,\n useLoaderData,\n useLoaderDeps,\n useLocation,\n useMatch,\n useMatchRoute,\n useMatches,\n useNavigate,\n useParams,\n useParentMatches,\n useRouteContext,\n useRouter,\n useRouterState,\n useSearch,\n useTags,\n} from '@tanstack/vue-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n const router = useRouter()\n const [awaited] = useAwaited({ promise: Promise.resolve('ready') })\n const linkProps = useLinkProps({ to: '/' } as any)\n const matchRoute = useMatchRoute()\n const matches = useMatches()\n const parentMatches = useParentMatches()\n const childMatches = useChildMatches()\n const match = useMatch({ strict: false, shouldThrow: false } as any)\n const loaderDeps = useLoaderDeps({ strict: false } as any)\n const loaderData = useLoaderData({ strict: false } as any)\n const params = useParams({ strict: false } as any)\n const search = useSearch({ strict: false } as any)\n const routeContext = useRouteContext({ strict: false } as any)\n const routerState = useRouterState({ select: (state) => state.status } as any)\n const location = useLocation()\n const canGoBack = useCanGoBack()\n const navigate = useNavigate()\n const scrollEntry = useElementScrollRestoration({ id: 'root-scroll' })\n const tags = useTags()\n\n useBlocker({\n shouldBlockFn: () => false,\n disabled: true,\n withResolver: false,\n })\n\n const linkFactoryResult = linkOptions({ to: '/' } as any)\n const routeMatchResult = matchRoute({ to: '/' } as any)\n const SvgLink = createLink('svg')\n\n const hooksAndComponents = [\n useAwaited,\n useLinkProps,\n useMatchRoute,\n useMatches,\n useParentMatches,\n useChildMatches,\n useMatch,\n useLoaderDeps,\n useLoaderData,\n useBlocker,\n useNavigate,\n useParams,\n useSearch,\n useRouteContext,\n useRouter,\n useRouterState,\n useLocation,\n useCanGoBack,\n useElementScrollRestoration,\n useTags,\n Await,\n CatchBoundary,\n CatchNotFound,\n ClientOnly,\n DefaultGlobalNotFound,\n ErrorComponent,\n Link,\n Match,\n MatchRoute,\n Matches,\n Navigate,\n Outlet,\n RouterContextProvider,\n ScrollRestoration,\n Block,\n ScriptOnce,\n Asset,\n HeadContent,\n Scripts,\n Body,\n Html,\n ]\n\n ;(globalThis as any).__TANSTACK_BUNDLE_SIZE_KEEP__ = {\n hooksAndComponents,\n }\n\n void awaited\n void linkFactoryResult\n void matches.value\n void parentMatches.value\n void childMatches.value\n void match.value\n void loaderDeps.value\n void loaderData.value\n void params.value\n void search.value\n void routeContext.value\n void routerState.value\n void location.value\n void canGoBack.value\n void navigate\n void scrollEntry\n void tags()\n void routeMatchResult.value\n\n return (\n <>\n \n {'window.__tsr_bundle_size = true'}\n \n home\n \n \n \n {() => }\n }>\n \n \n }\n />\n false} disabled withResolver={false}>\n {() => }\n \n }>\n \n \n \n \n \n \n \n \n
\n
hello world
\n
\n \n )\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-full/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/vue-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-full/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport vueJsx from '@vitejs/plugin-vue-jsx'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'vue',\n autoCodeSplitting: true,\n }),\n vue(),\n vueJsx(),\n ],\n})\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-minimal/index.html", "content": "\n\n \n \n \n vue-router-minimal\n \n \n
\n \n \n\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-minimal/src/main.tsx", "content": "import { createApp } from 'vue'\nimport { RouterProvider, createRouter } from '@tanstack/vue-router'\nimport { routeTree } from './routeTree.gen'\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/vue-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')\nif (!rootElement) {\n throw new Error('Root element `#app` not found')\n}\nif (!rootElement.innerHTML) {\n createApp({\n setup() {\n return () => \n },\n }).mount('#app')\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-minimal/src/routes/__root.tsx", "content": "import { Outlet, createRootRoute } from '@tanstack/vue-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return \n}\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-minimal/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/vue-router'\n\nexport const Route = createFileRoute('/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return
hello world
\n}\n" }, { "path": "benchmarks/bundle-size/scenarios/vue-router-minimal/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport vueJsx from '@vitejs/plugin-vue-jsx'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'vue',\n autoCodeSplitting: true,\n }),\n vue(),\n vueJsx(),\n ],\n})\n" }, { "path": "benchmarks/bundle-size/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"target\": \"ESNext\",\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"preserve\",\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "benchmarks/client-nav/README.md", "content": "# Client Navigation Benchmarks\n\nCross-framework client-side navigation benchmarks for:\n\n- `@tanstack/react-router`\n- `@tanstack/solid-router`\n- `@tanstack/vue-router`\n\n## Layout\n\n- `react/` - React benchmark + Vitest config\n- `solid/` - Solid benchmark + Vitest config\n- `vue/` - Vue benchmark + Vitest config\n\n## Run\n\nRun all benchmarks through Nx so dependency builds are part of the graph:\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:perf --outputStyle=stream --skipRemoteCache\n```\n\nRun framework-specific benchmarks:\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:perf:react --outputStyle=stream --skipRemoteCache\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:perf:solid --outputStyle=stream --skipRemoteCache\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:perf:vue --outputStyle=stream --skipRemoteCache\n```\n\nRun framework-specific flame benchmarks (10 second loop, profiled with `@platformatic/flame`, forced to `NODE_ENV=production`):\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:flame:react --outputStyle=stream --skipRemoteCache\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:flame:solid --outputStyle=stream --skipRemoteCache\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:flame:vue --outputStyle=stream --skipRemoteCache\n```\n\nTypecheck benchmark sources:\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/client-nav:test:types --outputStyle=stream --skipRemoteCache\n```\n" }, { "path": "benchmarks/client-nav/jsdom.ts", "content": "import { JSDOM } from 'jsdom'\n\nconst dom = new JSDOM('', {\n url: 'http://localhost/',\n})\n\nconst { window } = dom\n\nfunction setGlobal(name: string, value: unknown) {\n Object.defineProperty(globalThis, name, {\n value,\n configurable: true,\n writable: true,\n })\n}\n\nsetGlobal('window', window)\nsetGlobal('document', window.document)\nsetGlobal('self', window)\nsetGlobal('navigator', window.navigator)\nsetGlobal('location', window.location)\nsetGlobal('history', window.history)\nsetGlobal('HTMLElement', window.HTMLElement)\nsetGlobal('Element', window.Element)\nsetGlobal('SVGElement', window.SVGElement)\nsetGlobal('DocumentFragment', window.DocumentFragment)\nsetGlobal('Node', window.Node)\nsetGlobal('MutationObserver', window.MutationObserver)\nsetGlobal('sessionStorage', window.sessionStorage)\nsetGlobal('localStorage', window.localStorage)\nsetGlobal('getComputedStyle', window.getComputedStyle.bind(window))\n\nsetGlobal(\n 'requestAnimationFrame',\n window.requestAnimationFrame?.bind(window) ??\n ((callback: (time: number) => void) =>\n setTimeout(() => callback(performance.now()), 16)),\n)\n\nsetGlobal(\n 'cancelAnimationFrame',\n window.cancelAnimationFrame?.bind(window) ??\n ((handle: number) => clearTimeout(handle)),\n)\n\nwindow.scrollTo = () => {}\n\nexport { window }\n" }, { "path": "benchmarks/client-nav/package.json", "content": "{\n \"name\": \"@benchmarks/client-nav\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build:react\": \"vite build --config ./react/vite.config.ts\",\n \"build:solid\": \"vite build --config ./solid/vite.config.ts\",\n \"build:vue\": \"vite build --config ./vue/vite.config.ts\",\n \"test:flame:react\": \"NODE_ENV=production flame run --md-format=detailed --delay=none --node-options=\\\"--stack-size=65500\\\" ./react/speed.flame.ts\",\n \"test:flame:solid\": \"NODE_ENV=production flame run --md-format=detailed --delay=none --node-options=\\\"--stack-size=65500\\\" ./solid/speed.flame.ts\",\n \"test:flame:vue\": \"NODE_ENV=production flame run --md-format=detailed --delay=none --node-options=\\\"--stack-size=65500\\\" ./vue/speed.flame.ts\",\n \"test:perf\": \"NODE_ENV=production vitest bench --config ./vitest.config.ts\",\n \"test:perf:react\": \"NODE_ENV=production vitest bench --config ./react/vite.config.ts ./react/speed.bench.ts\",\n \"test:perf:solid\": \"NODE_ENV=production vitest bench --config ./solid/vite.config.ts ./solid/speed.bench.ts\",\n \"test:perf:vue\": \"NODE_ENV=production vitest bench --config ./vue/vite.config.ts ./vue/speed.bench.ts\",\n \"test:types\": \"pnpm run test:types:react && pnpm run test:types:solid && pnpm run test:types:vue\",\n \"test:types:react\": \"tsc -p ./react/tsconfig.json --noEmit\",\n \"test:types:solid\": \"tsc -p ./solid/tsconfig.json --noEmit\",\n \"test:types:vue\": \"tsc -p ./vue/tsconfig.json --noEmit\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/router-core\": \"workspace:^\",\n \"@tanstack/solid-router\": \"workspace:^\",\n \"@tanstack/vue-router\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"solid-js\": \"^1.9.10\",\n \"vue\": \"^3.5.16\"\n },\n \"devDependencies\": {\n \"@platformatic/flame\": \"^1.6.0\",\n \"@codspeed/vitest-plugin\": \"^5.0.1\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"@vitejs/plugin-vue\": \"^6.0.5\",\n \"@vitejs/plugin-vue-jsx\": \"^5.1.5\",\n \"@types/jsdom\": \"28.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^8.0.0\",\n \"vite-plugin-solid\": \"^2.11.11\",\n \"vitest\": \"^4.0.17\"\n },\n \"nx\": {\n \"targets\": {\n \"build:react\": {\n \"cache\": false,\n \"dependsOn\": [\n {\n \"projects\": [\n \"@tanstack/react-router\"\n ],\n \"target\": \"build\"\n }\n ]\n },\n \"build:solid\": {\n \"cache\": false,\n \"dependsOn\": [\n {\n \"projects\": [\n \"@tanstack/solid-router\"\n ],\n \"target\": \"build\"\n }\n ]\n },\n \"build:vue\": {\n \"cache\": false,\n \"dependsOn\": [\n {\n \"projects\": [\n \"@tanstack/vue-router\"\n ],\n \"target\": \"build\"\n }\n ]\n },\n \"test:perf\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:react\",\n \"build:solid\",\n \"build:vue\"\n ]\n },\n \"test:flame:react\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:react\"\n ]\n },\n \"test:flame:solid\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:solid\"\n ]\n },\n \"test:flame:vue\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:vue\"\n ]\n },\n \"test:perf:react\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:react\"\n ]\n },\n \"test:perf:solid\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:solid\"\n ]\n },\n \"test:perf:vue\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:vue\"\n ]\n },\n \"test:types\": {\n \"cache\": false,\n \"dependsOn\": [\n \"^build\"\n ]\n }\n }\n }\n}\n" }, { "path": "benchmarks/client-nav/react/app.tsx", "content": "import {\n Link,\n Outlet,\n RouterProvider,\n createMemoryHistory,\n createRootRoute,\n createRoute,\n createRouter,\n useParams,\n useSearch,\n} from '@tanstack/react-router'\nimport { createRoot } from 'react-dom/client'\n\nfunction runPerfSelectorComputation(seed: number) {\n let value = Math.trunc(seed) | 0\n\n for (let index = 0; index < 100; index++) {\n value = (value * 1664525 + 1013904223 + index) >>> 0\n }\n\n return value\n}\n\nconst selectors = Array.from({ length: 20 }, (_, index) => index)\n\nfunction Params() {\n const params = useParams({\n strict: false,\n select: (params) => runPerfSelectorComputation(Number(params.id ?? 0)),\n })\n void params\n return null\n}\n\nfunction Search() {\n const search = useSearch({\n strict: false,\n select: (search) => runPerfSelectorComputation(Number(search.id ?? 0)),\n })\n void search\n return null\n}\n\nfunction Links() {\n return (\n \n Link\n \n )\n}\n\nfunction Root() {\n return (\n <>\n {selectors.map((selector) => (\n \n ))}\n {selectors.map((selector) => (\n \n ))}\n {selectors.map((selector) => (\n \n ))}\n \n \n )\n}\n\nconst rootRoute = createRootRoute({\n component: Root,\n})\n\nconst route = createRoute({\n getParentRoute: () => rootRoute,\n path: '/$id',\n component: () =>
,\n})\n\nexport function mountTestApp(container: Element) {\n const router = createRouter({\n history: createMemoryHistory({\n initialEntries: ['/0'],\n }),\n scrollRestoration: true,\n routeTree: rootRoute.addChildren([route]),\n })\n\n const reactRoot = createRoot(container)\n reactRoot.render()\n\n return {\n router,\n unmount() {\n reactRoot.unmount()\n },\n }\n}\n" }, { "path": "benchmarks/client-nav/react/setup.ts", "content": "import type { NavigateOptions } from '@tanstack/router-core'\nimport type * as App from './app'\n\nconst appModulePath = './dist/app.js'\nconst { mountTestApp } = (await import(appModulePath)) as typeof App\n\nexport function setup() {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'client-nav benchmark is running without NODE_ENV=production; React dev overhead will dominate results.',\n )\n }\n let id = 0\n let unmount: (() => void) | undefined = undefined\n let container: HTMLDivElement | undefined = undefined\n let unsub = () => {}\n let next: () => Promise = () => Promise.reject('Test not initialized')\n\n async function before() {\n id = 0\n container = document.createElement('div')\n document.body.append(container)\n\n const { router, unmount: dispose } = mountTestApp(container)\n unmount = dispose\n let resolve: () => void = () => {}\n unsub = router.subscribe('onRendered', () => resolve())\n\n const navigate = (opts: NavigateOptions) =>\n new Promise((resolveNext) => {\n resolve = resolveNext\n router.navigate(opts)\n })\n\n next = () => {\n const nextId = id++\n\n return navigate({\n to: '/$id',\n params: { id: nextId },\n // update search every 2 navigations, to still test them, but also measure the impact of granular re-rendering\n search: { id: Math.floor(nextId / 2) },\n replace: true,\n })\n }\n await router.load()\n }\n\n function after() {\n unmount?.()\n container?.remove()\n unsub()\n }\n\n function tick() {\n return next()\n }\n\n return {\n before,\n tick,\n after,\n }\n}\n" }, { "path": "benchmarks/client-nav/react/speed.bench.ts", "content": "import { afterAll, beforeAll, bench, describe } from 'vitest'\nimport { setup } from './setup'\n\ndescribe('client-nav', () => {\n const test = setup()\n\n /**\n * Running `vitest bench` ignores \"suite hooks\" like `beforeAll` and `afterAll`,\n * so we use tinybench's `setup` and `teardown` options to run our setup and teardown logic.\n *\n * But CodSpeed calls the benchmarked function directly, bypassing `setup` and `teardown`,\n * but it does support `beforeAll` and `afterAll`.\n *\n * So it looks like we're setting up in duplicate, but in reality, it's only running once per environment, as intended.\n */\n\n beforeAll(test.before)\n afterAll(test.after)\n\n bench(\n 'client-side navigation loop (react)',\n async () => {\n for (let i = 0; i < 10; i++) {\n await test.tick()\n }\n },\n {\n warmupIterations: 100,\n time: 10_000,\n setup: test.before,\n teardown: test.after,\n },\n )\n})\n" }, { "path": "benchmarks/client-nav/react/speed.flame.ts", "content": "import { window } from '../jsdom.ts'\nimport { setup } from './setup.ts'\n\nconst DURATION_MS = 10_000\n\nconst test = setup()\n\ntry {\n await test.before()\n\n const startedAt = performance.now()\n while (performance.now() - startedAt < DURATION_MS) {\n await test.tick()\n }\n} finally {\n test.after()\n window.close()\n}\n" }, { "path": "benchmarks/client-nav/react/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"allowImportingTsExtensions\": true,\n \"jsxImportSource\": \"react\",\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\n \"speed.bench.ts\",\n \"speed.flame.ts\",\n \"../jsdom.ts\",\n \"setup.ts\",\n \"vite.config.ts\",\n \"../vitest.setup.ts\"\n ]\n}\n" }, { "path": "benchmarks/client-nav/react/vite.config.ts", "content": "import { defineConfig } from 'vitest/config'\nimport react from '@vitejs/plugin-react'\nimport codspeedPlugin from '@codspeed/vitest-plugin'\n\nexport default defineConfig({\n plugins: [\n !!(process.env.VITEST && process.env.WITH_INSTRUMENTATION) &&\n codspeedPlugin(),\n react(),\n ],\n build: {\n outDir: './react/dist',\n emptyOutDir: true,\n minify: false,\n lib: {\n entry: './react/app.tsx',\n formats: ['es'],\n fileName: 'app',\n },\n },\n test: {\n name: '@benchmarks/client-nav (react)',\n watch: false,\n environment: 'jsdom',\n setupFiles: ['./vitest.setup.ts'],\n },\n})\n" }, { "path": "benchmarks/client-nav/solid/app.tsx", "content": "import { For, createEffect } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport {\n Link,\n Outlet,\n RouterProvider,\n createMemoryHistory,\n createRootRoute,\n createRoute,\n createRouter,\n useParams,\n useSearch,\n} from '@tanstack/solid-router'\n\nfunction runPerfSelectorComputation(seed: number) {\n let value = Math.trunc(seed) | 0\n\n for (let index = 0; index < 100; index++) {\n value = (value * 1664525 + 1013904223 + index) >>> 0\n }\n\n return value\n}\n\nconst selectors = Array.from({ length: 20 }, (_, index) => index)\n\nfunction Params() {\n const params = useParams({\n strict: false,\n select: (params) => runPerfSelectorComputation(Number(params.id ?? 0)),\n })\n\n createEffect(() => {\n void params()\n })\n\n return null\n}\n\nfunction Search() {\n const search = useSearch({\n strict: false,\n select: (search) => runPerfSelectorComputation(Number(search.id ?? 0)),\n })\n\n createEffect(() => {\n void search()\n })\n\n return null\n}\n\nfunction Links() {\n return (\n \n Link\n \n )\n}\n\nfunction Root() {\n return (\n <>\n {() => }\n {() => }\n {() => }\n \n \n )\n}\n\nconst root = createRootRoute({\n component: Root,\n})\n\nconst route = createRoute({\n getParentRoute: () => root,\n path: '/$id',\n component: () => {\n return
\n },\n})\n\nexport function mountTestApp(container: Element) {\n const router = createRouter({\n history: createMemoryHistory({\n initialEntries: ['/0'],\n }),\n scrollRestoration: true,\n routeTree: root.addChildren([route]),\n })\n\n const unmount = render(() => , container)\n\n return { router, unmount }\n}\n" }, { "path": "benchmarks/client-nav/solid/setup.ts", "content": "import type { NavigateOptions } from '@tanstack/router-core'\nimport type * as App from './app'\n\nconst appModulePath = './dist/app.js'\nconst { mountTestApp } = (await import(appModulePath)) as typeof App\n\nexport function setup() {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'client-nav benchmark is running without NODE_ENV=production; Solid dev overhead will dominate results.',\n )\n }\n\n let id = 0\n let dispose: (() => void) | undefined = undefined\n let container: HTMLDivElement | undefined = undefined\n let unsub = () => {}\n let next: () => Promise = () => Promise.reject('Test not initialized')\n\n async function before() {\n id = 0\n container = document.createElement('div')\n document.body.append(container)\n\n const { router, unmount } = mountTestApp(container)\n dispose = unmount\n let resolveRendered: () => void = () => {}\n unsub = router.subscribe('onRendered', () => {\n resolveRendered()\n })\n\n const navigate = (opts: NavigateOptions) =>\n new Promise((resolveNext) => {\n resolveRendered = resolveNext\n router.navigate(opts)\n })\n\n next = () => {\n const nextId = id++\n\n return navigate({\n to: '/$id',\n params: { id: nextId },\n // update search every 2 navigations, to still test them, but also measure the impact of granular re-rendering\n search: { id: Math.floor(nextId / 2) },\n replace: true,\n })\n }\n await router.load()\n }\n\n function after() {\n dispose?.()\n container?.remove()\n unsub()\n }\n\n function tick() {\n return next()\n }\n\n return {\n before,\n tick,\n after,\n }\n}\n" }, { "path": "benchmarks/client-nav/solid/speed.bench.ts", "content": "import { afterAll, beforeAll, bench, describe } from 'vitest'\nimport { setup } from './setup'\n\ndescribe('client-nav', () => {\n const test = setup()\n\n /**\n * Running `vitest bench` ignores \"suite hooks\" like `beforeAll` and `afterAll`,\n * so we use tinybench's `setup` and `teardown` options to run our setup and teardown logic.\n *\n * But CodSpeed calls the benchmarked function directly, bypassing `setup` and `teardown`,\n * but it does support `beforeAll` and `afterAll`.\n *\n * So it looks like we're setting up in duplicate, but in reality, it's only running once per environment, as intended.\n */\n\n beforeAll(test.before)\n afterAll(test.after)\n\n bench(\n 'client-side navigation loop (solid)',\n async () => {\n for (let i = 0; i < 10; i++) {\n await test.tick()\n }\n },\n {\n warmupIterations: 100,\n time: 10_000,\n setup: test.before,\n teardown: test.after,\n },\n )\n})\n" }, { "path": "benchmarks/client-nav/solid/speed.flame.ts", "content": "import { window } from '../jsdom.ts'\nimport { setup } from './setup.ts'\n\nconst DURATION_MS = 10_000\n\nconst test = setup()\n\ntry {\n await test.before()\n\n const startedAt = performance.now()\n while (performance.now() - startedAt < DURATION_MS) {\n await test.tick()\n }\n} finally {\n test.after()\n window.close()\n}\n" }, { "path": "benchmarks/client-nav/solid/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"allowImportingTsExtensions\": true,\n \"jsxImportSource\": \"solid-js\",\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\n \"speed.bench.ts\",\n \"speed.flame.ts\",\n \"../jsdom.ts\",\n \"setup.ts\",\n \"vite.config.ts\",\n \"../vitest.setup.ts\"\n ]\n}\n" }, { "path": "benchmarks/client-nav/solid/vite.config.ts", "content": "import { defineConfig } from 'vitest/config'\nimport solid from 'vite-plugin-solid'\nimport codspeedPlugin from '@codspeed/vitest-plugin'\n\nexport default defineConfig({\n plugins: [\n !!(process.env.VITEST && process.env.WITH_INSTRUMENTATION) &&\n codspeedPlugin(),\n solid({ hot: false, dev: false }),\n ],\n build: {\n outDir: './solid/dist',\n emptyOutDir: true,\n minify: false,\n lib: {\n entry: './solid/app.tsx',\n formats: ['es'],\n fileName: 'app',\n },\n },\n resolve: {\n conditions: ['solid', 'browser'],\n },\n test: {\n name: '@benchmarks/client-nav (solid)',\n watch: false,\n environment: 'jsdom',\n setupFiles: ['./vitest.setup.ts'],\n server: {\n deps: {\n inline: [/@solidjs/, /@tanstack\\/solid-store/],\n },\n },\n },\n})\n" }, { "path": "benchmarks/client-nav/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\"vitest.setup.ts\"]\n}\n" }, { "path": "benchmarks/client-nav/vitest.config.ts", "content": "import { defineConfig } from 'vitest/config'\n\nexport default defineConfig({\n test: {\n watch: false,\n projects: [\n './react/vite.config.ts',\n './solid/vite.config.ts',\n './vue/vite.config.ts',\n ],\n },\n})\n" }, { "path": "benchmarks/client-nav/vitest.setup.ts", "content": "import { vi } from 'vitest'\n\n// @ts-expect-error\nglobal.IS_REACT_ACT_ENVIRONMENT = true\n\nwindow.scrollTo = vi.fn()\n" }, { "path": "benchmarks/client-nav/vue/app.tsx", "content": "import * as Vue from 'vue'\nimport {\n Link,\n Outlet,\n RouterProvider,\n createMemoryHistory,\n createRootRoute,\n createRoute,\n createRouter,\n useParams,\n useSearch,\n} from '@tanstack/vue-router'\n\nfunction runPerfSelectorComputation(seed: number) {\n let value = Math.trunc(seed) | 0\n\n for (let index = 0; index < 100; index++) {\n value = (value * 1664525 + 1013904223 + index) >>> 0\n }\n\n return value\n}\n\nconst selectors = Array.from({ length: 20 }, (_, index) => index)\n\nconst Params = Vue.defineComponent({\n setup() {\n const params = useParams({\n strict: false,\n select: (params) => runPerfSelectorComputation(Number(params.id ?? 0)),\n })\n\n return () => {\n void params.value\n return null\n }\n },\n})\n\nconst Search = Vue.defineComponent({\n setup() {\n const search = useSearch({\n strict: false,\n select: (search) => runPerfSelectorComputation(Number(search.id ?? 0)),\n })\n\n return () => {\n void search.value\n return null\n }\n },\n})\n\nconst Links = Vue.defineComponent({\n setup() {\n return () => (\n \n Link\n \n )\n },\n})\n\nconst Root = Vue.defineComponent({\n setup() {\n return () => (\n <>\n {selectors.map((selector) => (\n \n ))}\n {selectors.map((selector) => (\n \n ))}\n {selectors.map((selector) => (\n \n ))}\n \n \n )\n },\n})\n\nconst root = createRootRoute({\n component: Root,\n})\n\nconst route = createRoute({\n getParentRoute: () => root,\n path: '/$id',\n component: () =>
,\n})\n\nexport function mountTestApp(container: Element) {\n const router = createRouter({\n history: createMemoryHistory({\n initialEntries: ['/0'],\n }),\n scrollRestoration: true,\n routeTree: root.addChildren([route]),\n })\n\n const component = \n const app = Vue.createApp({\n render: () => component,\n })\n\n app.mount(container)\n\n return {\n router,\n unmount() {\n app.unmount()\n },\n }\n}\n" }, { "path": "benchmarks/client-nav/vue/setup.ts", "content": "import type { NavigateOptions } from '@tanstack/router-core'\nimport type * as App from './app'\n\nconst appModulePath = './dist/app.js'\nconst { mountTestApp } = (await import(appModulePath)) as typeof App\n\nexport function setup() {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'client-nav benchmark is running without NODE_ENV=production; Vue dev overhead will dominate results.',\n )\n }\n\n let id = 0\n let unmount: (() => void) | undefined = undefined\n let container: HTMLDivElement | undefined = undefined\n let unsub = () => {}\n let next: () => Promise = () => Promise.reject('Test not initialized')\n\n async function before() {\n id = 0\n container = document.createElement('div')\n document.body.append(container)\n\n const { router, unmount: dispose } = mountTestApp(container)\n unmount = dispose\n let resolveRendered: () => void = () => {}\n unsub = router.subscribe('onRendered', () => {\n resolveRendered()\n })\n\n const navigate = (opts: NavigateOptions) =>\n new Promise((resolveNext) => {\n resolveRendered = resolveNext\n router.navigate(opts)\n })\n\n next = () => {\n const nextId = id++\n\n return navigate({\n to: '/$id',\n params: { id: nextId },\n // update search every 2 navigations, to still test them, but also measure the impact of granular re-rendering\n search: { id: Math.floor(nextId / 2) },\n replace: true,\n })\n }\n await router.load()\n }\n\n function after() {\n unmount?.()\n container?.remove()\n unsub()\n }\n\n function tick() {\n return next()\n }\n\n return {\n before,\n tick,\n after,\n }\n}\n" }, { "path": "benchmarks/client-nav/vue/speed.bench.ts", "content": "import { afterAll, beforeAll, bench, describe } from 'vitest'\nimport { setup } from './setup'\n\ndescribe('client-nav', () => {\n const test = setup()\n\n /**\n * Running `vitest bench` ignores \"suite hooks\" like `beforeAll` and `afterAll`,\n * so we use tinybench's `setup` and `teardown` options to run our setup and teardown logic.\n *\n * But CodSpeed calls the benchmarked function directly, bypassing `setup` and `teardown`,\n * but it does support `beforeAll` and `afterAll`.\n *\n * So it looks like we're setting up in duplicate, but in reality, it's only running once per environment, as intended.\n */\n\n beforeAll(test.before)\n afterAll(test.after)\n\n bench(\n 'client-side navigation loop (vue)',\n async () => {\n for (let i = 0; i < 10; i++) {\n await test.tick()\n }\n },\n {\n warmupIterations: 100,\n time: 10_000,\n setup: test.before,\n teardown: test.after,\n },\n )\n})\n" }, { "path": "benchmarks/client-nav/vue/speed.flame.ts", "content": "import { window } from '../jsdom.ts'\nimport { setup } from './setup.ts'\n\nconst DURATION_MS = 10_000\n\nconst test = setup()\n\ntry {\n await test.before()\n\n const startedAt = performance.now()\n while (performance.now() - startedAt < DURATION_MS) {\n await test.tick()\n }\n} finally {\n test.after()\n window.close()\n}\n" }, { "path": "benchmarks/client-nav/vue/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"allowImportingTsExtensions\": true,\n \"jsxImportSource\": \"vue\",\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\n \"speed.bench.ts\",\n \"speed.flame.ts\",\n \"../jsdom.ts\",\n \"setup.ts\",\n \"vite.config.ts\",\n \"../vitest.setup.ts\"\n ]\n}\n" }, { "path": "benchmarks/client-nav/vue/vite.config.ts", "content": "import { defineConfig } from 'vitest/config'\nimport vue from '@vitejs/plugin-vue'\nimport vueJsx from '@vitejs/plugin-vue-jsx'\nimport codspeedPlugin from '@codspeed/vitest-plugin'\n\nexport default defineConfig({\n define: {\n 'process.env.NODE_ENV': JSON.stringify('production'),\n },\n plugins: [\n !!(process.env.VITEST && process.env.WITH_INSTRUMENTATION) &&\n codspeedPlugin(),\n vue(),\n vueJsx(),\n ],\n build: {\n outDir: './vue/dist',\n emptyOutDir: true,\n minify: false,\n lib: {\n entry: './vue/app.tsx',\n formats: ['es'],\n fileName: 'app',\n },\n },\n test: {\n name: '@benchmarks/client-nav (vue)',\n watch: false,\n environment: 'jsdom',\n setupFiles: ['./vitest.setup.ts'],\n },\n})\n" }, { "path": "benchmarks/ssr/README.md", "content": "# SSR Benchmarks\n\nCross-framework SSR request-loop benchmarks for:\n\n- `@tanstack/react-start`\n- `@tanstack/solid-start`\n- `@tanstack/vue-start`\n\nEach benchmark builds a Start app with file-based routes and runs Vitest benches against the built server handler.\n\n## Layout\n\n- `react/` - React Start benchmark + Vitest config\n- `solid/` - Solid Start benchmark + Vitest config\n- `vue/` - Vue Start benchmark + Vitest config\n\n## Run\n\nRun all benchmarks through Nx so dependency builds are part of the graph:\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/ssr:test:perf --outputStyle=stream --skipRemoteCache\n```\n\nRun framework-specific benchmarks:\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/ssr:test:perf:react --outputStyle=stream --skipRemoteCache\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/ssr:test:perf:solid --outputStyle=stream --skipRemoteCache\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/ssr:test:perf:vue --outputStyle=stream --skipRemoteCache\n```\n\nTypecheck benchmark sources:\n\n```bash\nCI=1 NX_DAEMON=false pnpm nx run @benchmarks/ssr:test:types --outputStyle=stream --skipRemoteCache\n```\n" }, { "path": "benchmarks/ssr/bench-utils.ts", "content": "export interface StartRequestHandler {\n fetch: (request: Request) => Promise | Response\n}\n\nexport interface RunSsrRequestLoopOptions {\n seed: number\n iterations?: number\n}\n\nconst requestInit = {\n method: 'GET',\n headers: {\n accept: 'text/html',\n },\n} satisfies RequestInit\n\nfunction createDeterministicRandom(seed: number) {\n let state = seed >>> 0\n\n return () => {\n state = (state * 1664525 + 1013904223) >>> 0\n return state / 0x100000000\n }\n}\n\nfunction randomSegment(random: () => number) {\n return Math.floor(random() * 1_000_000_000).toString(36)\n}\n\nfunction randomSearchValue(random: () => number) {\n return `q-${randomSegment(random)}`\n}\n\nfunction randomRequestUrl(random: () => number) {\n const a = randomSegment(random)\n const b = randomSegment(random)\n const c = randomSegment(random)\n const d = randomSegment(random)\n const q = randomSearchValue(random)\n\n return `http://localhost/${a}/${b}/${c}/${d}?q=${q}`\n}\n\nexport async function runSsrRequestLoop(\n handler: StartRequestHandler,\n { seed, iterations = 10 }: RunSsrRequestLoopOptions,\n) {\n const random = createDeterministicRandom(seed)\n const pendingBodyReads: Array> = []\n\n for (let index = 0; index < iterations; index++) {\n const requestUrl = randomRequestUrl(random)\n const response = await handler.fetch(new Request(requestUrl, requestInit))\n\n if (response.status !== 200) {\n await Promise.allSettled(pendingBodyReads)\n\n throw new Error(\n `Request failed with non-200 status ${response.status} (${requestUrl})`,\n )\n }\n\n pendingBodyReads.push(response.text().then(() => undefined))\n }\n\n await Promise.all(pendingBodyReads)\n}\n" }, { "path": "benchmarks/ssr/package.json", "content": "{\n \"name\": \"@benchmarks/ssr\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build:react\": \"vite build --config ./react/vite.config.ts\",\n \"build:solid\": \"vite build --config ./solid/vite.config.ts\",\n \"build:vue\": \"vite build --config ./vue/vite.config.ts\",\n \"test:perf\": \"vitest bench\",\n \"test:perf:react\": \"vitest bench --config ./react/vite.config.ts ./react/speed.bench.ts\",\n \"test:perf:solid\": \"vitest bench --config ./solid/vite.config.ts ./solid/speed.bench.ts\",\n \"test:perf:vue\": \"vitest bench --config ./vue/vite.config.ts ./vue/speed.bench.ts\",\n \"test:types\": \"pnpm run test:types:react && pnpm run test:types:solid && pnpm run test:types:vue\",\n \"test:types:react\": \"tsc -p ./react/tsconfig.json --noEmit\",\n \"test:types:solid\": \"tsc -p ./solid/tsconfig.json --noEmit\",\n \"test:types:vue\": \"tsc -p ./vue/tsconfig.json --noEmit\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-start\": \"workspace:^\",\n \"@tanstack/solid-router\": \"workspace:^\",\n \"@tanstack/solid-start\": \"workspace:^\",\n \"@tanstack/vue-router\": \"workspace:^\",\n \"@tanstack/vue-start\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"solid-js\": \"^1.9.10\",\n \"vue\": \"^3.5.16\"\n },\n \"devDependencies\": {\n \"@codspeed/vitest-plugin\": \"^5.0.1\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"@vitejs/plugin-vue-jsx\": \"^5.1.5\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^8.0.0\",\n \"vite-plugin-solid\": \"^2.11.11\",\n \"vitest\": \"^4.0.17\"\n },\n \"nx\": {\n \"targets\": {\n \"build:react\": {\n \"cache\": false,\n \"dependsOn\": [\n {\n \"projects\": [\n \"@tanstack/react-start\"\n ],\n \"target\": \"build\"\n }\n ]\n },\n \"build:solid\": {\n \"cache\": false,\n \"dependsOn\": [\n {\n \"projects\": [\n \"@tanstack/solid-start\"\n ],\n \"target\": \"build\"\n }\n ]\n },\n \"build:vue\": {\n \"cache\": false,\n \"dependsOn\": [\n {\n \"projects\": [\n \"@tanstack/vue-start\"\n ],\n \"target\": \"build\"\n }\n ]\n },\n \"test:perf\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:react\",\n \"build:solid\",\n \"build:vue\"\n ]\n },\n \"test:perf:react\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:react\"\n ]\n },\n \"test:perf:solid\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:solid\"\n ]\n },\n \"test:perf:vue\": {\n \"cache\": false,\n \"dependsOn\": [\n \"build:vue\"\n ]\n },\n \"test:types\": {\n \"cache\": false,\n \"dependsOn\": [\n \"^build\"\n ]\n }\n }\n }\n}\n" }, { "path": "benchmarks/ssr/react/speed.bench.ts", "content": "import { afterAll, beforeAll, bench, describe } from 'vitest'\nimport { runSsrRequestLoop } from '../bench-utils'\nimport type { StartRequestHandler } from '../bench-utils'\n\nconst appModulePath = './dist/server/server.js'\nconst benchmarkSeed = 0xdecafbad\n\nconst uninitializedHandler: StartRequestHandler = {\n fetch: () => Promise.reject(new Error('Benchmark not initialized')),\n}\n\nlet handler = uninitializedHandler\n\nasync function setup() {\n const module = (await import(appModulePath)) as {\n default: StartRequestHandler\n }\n\n handler = module.default\n}\n\nfunction teardown() {\n handler = uninitializedHandler\n}\n\ndescribe('ssr', () => {\n /**\n * Running `vitest bench` ignores \"suite hooks\" like `beforeAll` and `afterAll`,\n * so we use tinybench's `setup` and `teardown` options to run our setup and teardown logic.\n *\n * But CodSpeed calls the benchmarked function directly, bypassing `setup` and `teardown`,\n * but it does support `beforeAll` and `afterAll`.\n *\n * So it looks like we're setting up in duplicate, but in reality, it's only running once per environment, as intended.\n */\n beforeAll(setup)\n afterAll(teardown)\n\n bench(\n 'ssr request loop (react)',\n () => runSsrRequestLoop(handler, { seed: benchmarkSeed }),\n {\n warmupIterations: 100,\n time: 10_000,\n setup,\n teardown,\n throws: true,\n },\n )\n})\n" }, { "path": "benchmarks/ssr/react/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as ARouteImport } from './routes/$a'\nimport { Route as ABRouteImport } from './routes/$a.$b'\nimport { Route as ABCRouteImport } from './routes/$a.$b.$c'\nimport { Route as ABCDRouteImport } from './routes/$a.$b.$c.$d'\n\nconst ARoute = ARouteImport.update({\n id: '/$a',\n path: '/$a',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ABRoute = ABRouteImport.update({\n id: '/$b',\n path: '/$b',\n getParentRoute: () => ARoute,\n} as any)\nconst ABCRoute = ABCRouteImport.update({\n id: '/$c',\n path: '/$c',\n getParentRoute: () => ABRoute,\n} as any)\nconst ABCDRoute = ABCDRouteImport.update({\n id: '/$d',\n path: '/$d',\n getParentRoute: () => ABCRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRoutesByTo {\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths: '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n fileRoutesByTo: FileRoutesByTo\n to: '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n id: '__root__' | '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n ARoute: typeof ARouteWithChildren\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/$a': {\n id: '/$a'\n path: '/$a'\n fullPath: '/$a'\n preLoaderRoute: typeof ARouteImport\n parentRoute: typeof rootRouteImport\n }\n '/$a/$b': {\n id: '/$a/$b'\n path: '/$b'\n fullPath: '/$a/$b'\n preLoaderRoute: typeof ABRouteImport\n parentRoute: typeof ARoute\n }\n '/$a/$b/$c': {\n id: '/$a/$b/$c'\n path: '/$c'\n fullPath: '/$a/$b/$c'\n preLoaderRoute: typeof ABCRouteImport\n parentRoute: typeof ABRoute\n }\n '/$a/$b/$c/$d': {\n id: '/$a/$b/$c/$d'\n path: '/$d'\n fullPath: '/$a/$b/$c/$d'\n preLoaderRoute: typeof ABCDRouteImport\n parentRoute: typeof ABCRoute\n }\n }\n}\n\ninterface ABCRouteChildren {\n ABCDRoute: typeof ABCDRoute\n}\n\nconst ABCRouteChildren: ABCRouteChildren = {\n ABCDRoute: ABCDRoute,\n}\n\nconst ABCRouteWithChildren = ABCRoute._addFileChildren(ABCRouteChildren)\n\ninterface ABRouteChildren {\n ABCRoute: typeof ABCRouteWithChildren\n}\n\nconst ABRouteChildren: ABRouteChildren = {\n ABCRoute: ABCRouteWithChildren,\n}\n\nconst ABRouteWithChildren = ABRoute._addFileChildren(ABRouteChildren)\n\ninterface ARouteChildren {\n ABRoute: typeof ABRouteWithChildren\n}\n\nconst ARouteChildren: ARouteChildren = {\n ABRoute: ABRouteWithChildren,\n}\n\nconst ARouteWithChildren = ARoute._addFileChildren(ARouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n ARoute: ARouteWithChildren,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n\nimport type { getRouter } from './router.tsx'\nimport type { createStart } from '@tanstack/react-start'\ndeclare module '@tanstack/react-start' {\n interface Register {\n ssr: true\n router: Awaited>\n }\n}\n" }, { "path": "benchmarks/ssr/react/src/router.tsx", "content": "import { createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n defaultPreload: false,\n scrollRestoration: false,\n })\n}\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType\n }\n}\n" }, { "path": "benchmarks/ssr/react/src/routes/$a.$b.$c.$d.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b/$c/$d')({\n component: LevelDComponent,\n})\n\nfunction LevelDComponent() {\n return \n}\n" }, { "path": "benchmarks/ssr/react/src/routes/$a.$b.$c.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b/$c')({\n component: LevelCComponent,\n})\n\nfunction LevelCComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/react/src/routes/$a.$b.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b')({\n component: LevelBComponent,\n})\n\nfunction LevelBComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/react/src/routes/$a.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a')({\n component: LevelAComponent,\n})\n\nfunction LevelAComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/react/src/routes/__root.tsx", "content": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRoute,\n} from '@tanstack/react-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n validateSearch: (s) => s as { q?: string },\n})\n\nfunction RootComponent() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/react/src/workload.tsx", "content": "import { Link, useParams, useSearch } from '@tanstack/react-router'\n\nconst probes = Array.from({ length: 10 }, (_, index) => index)\n\nfunction runSelectorWork(input: string, salt: number) {\n let value = salt\n\n for (let index = 0; index < input.length; index++) {\n value = (value * 33 + input.charCodeAt(index) + index) >>> 0\n }\n\n for (let index = 0; index < 16; index++) {\n value = (value ^ (value << 13)) >>> 0\n value = (value ^ (value >> 17)) >>> 0\n value = (value ^ (value << 5)) >>> 0\n }\n\n return value\n}\n\nfunction ParamsProbe({ salt }: { salt: number }) {\n const params = useParams({\n strict: false,\n select: (nextParams) =>\n runSelectorWork(\n `${nextParams.a ?? ''}/${nextParams.b ?? ''}/${nextParams.c ?? ''}/${nextParams.d ?? ''}`,\n salt,\n ),\n })\n\n void params\n\n return null\n}\n\nfunction SearchProbe({ salt }: { salt: number }) {\n const search = useSearch({\n strict: false,\n select: (nextSearch) => runSelectorWork(String(nextSearch.q ?? ''), salt),\n })\n\n void search\n\n return null\n}\n\nfunction LinkProbe({ salt }: { salt: number }) {\n const value = String((salt % 97) + 1)\n\n return (\n \n Link\n \n )\n}\n\nexport function RouteWorkload() {\n return (\n <>\n {probes.map((probe) => (\n \n ))}\n {probes.map((probe) => (\n \n ))}\n {probes.map((probe) => (\n \n ))}\n \n )\n}\n" }, { "path": "benchmarks/ssr/react/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"react\",\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\n \"speed.bench.ts\",\n \"vite.config.ts\",\n \"../bench-utils.ts\",\n \"./src/**/*\"\n ]\n}\n" }, { "path": "benchmarks/ssr/react/vite.config.ts", "content": "import { fileURLToPath } from 'node:url'\nimport { defineConfig } from 'vitest/config'\nimport codspeedPlugin from '@codspeed/vitest-plugin'\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite'\nimport react from '@vitejs/plugin-react'\n\nconst rootDir = fileURLToPath(new URL('.', import.meta.url))\n\nexport default defineConfig({\n root: rootDir,\n plugins: [\n !!(process.env.VITEST && process.env.WITH_INSTRUMENTATION) &&\n codspeedPlugin(),\n tanstackStart({\n srcDirectory: 'src',\n }),\n react(),\n ],\n build: {\n outDir: './dist',\n emptyOutDir: true,\n minify: false,\n },\n test: {\n name: '@benchmarks/ssr (react)',\n watch: false,\n environment: 'node',\n },\n})\n" }, { "path": "benchmarks/ssr/solid/speed.bench.ts", "content": "import { afterAll, beforeAll, bench, describe } from 'vitest'\nimport { runSsrRequestLoop } from '../bench-utils'\nimport type { StartRequestHandler } from '../bench-utils'\n\nconst appModulePath = './dist/server/server.js'\nconst benchmarkSeed = 0xcafebabe\n\nconst uninitializedHandler: StartRequestHandler = {\n fetch: () => Promise.reject(new Error('Benchmark not initialized')),\n}\n\nlet handler = uninitializedHandler\n\nasync function setup() {\n const module = (await import(appModulePath)) as {\n default: StartRequestHandler\n }\n\n handler = module.default\n}\n\nfunction teardown() {\n handler = uninitializedHandler\n}\n\ndescribe('ssr', () => {\n /**\n * Running `vitest bench` ignores \"suite hooks\" like `beforeAll` and `afterAll`,\n * so we use tinybench's `setup` and `teardown` options to run our setup and teardown logic.\n *\n * But CodSpeed calls the benchmarked function directly, bypassing `setup` and `teardown`,\n * but it does support `beforeAll` and `afterAll`.\n *\n * So it looks like we're setting up in duplicate, but in reality, it's only running once per environment, as intended.\n */\n beforeAll(setup)\n afterAll(teardown)\n\n bench(\n 'ssr request loop (solid)',\n () => runSsrRequestLoop(handler, { seed: benchmarkSeed }),\n {\n warmupIterations: 100,\n time: 10_000,\n setup,\n teardown,\n throws: true,\n },\n )\n})\n" }, { "path": "benchmarks/ssr/solid/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as ARouteImport } from './routes/$a'\nimport { Route as ABRouteImport } from './routes/$a.$b'\nimport { Route as ABCRouteImport } from './routes/$a.$b.$c'\nimport { Route as ABCDRouteImport } from './routes/$a.$b.$c.$d'\n\nconst ARoute = ARouteImport.update({\n id: '/$a',\n path: '/$a',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ABRoute = ABRouteImport.update({\n id: '/$b',\n path: '/$b',\n getParentRoute: () => ARoute,\n} as any)\nconst ABCRoute = ABCRouteImport.update({\n id: '/$c',\n path: '/$c',\n getParentRoute: () => ABRoute,\n} as any)\nconst ABCDRoute = ABCDRouteImport.update({\n id: '/$d',\n path: '/$d',\n getParentRoute: () => ABCRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRoutesByTo {\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths: '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n fileRoutesByTo: FileRoutesByTo\n to: '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n id: '__root__' | '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n ARoute: typeof ARouteWithChildren\n}\n\ndeclare module '@tanstack/solid-router' {\n interface FileRoutesByPath {\n '/$a': {\n id: '/$a'\n path: '/$a'\n fullPath: '/$a'\n preLoaderRoute: typeof ARouteImport\n parentRoute: typeof rootRouteImport\n }\n '/$a/$b': {\n id: '/$a/$b'\n path: '/$b'\n fullPath: '/$a/$b'\n preLoaderRoute: typeof ABRouteImport\n parentRoute: typeof ARoute\n }\n '/$a/$b/$c': {\n id: '/$a/$b/$c'\n path: '/$c'\n fullPath: '/$a/$b/$c'\n preLoaderRoute: typeof ABCRouteImport\n parentRoute: typeof ABRoute\n }\n '/$a/$b/$c/$d': {\n id: '/$a/$b/$c/$d'\n path: '/$d'\n fullPath: '/$a/$b/$c/$d'\n preLoaderRoute: typeof ABCDRouteImport\n parentRoute: typeof ABCRoute\n }\n }\n}\n\ninterface ABCRouteChildren {\n ABCDRoute: typeof ABCDRoute\n}\n\nconst ABCRouteChildren: ABCRouteChildren = {\n ABCDRoute: ABCDRoute,\n}\n\nconst ABCRouteWithChildren = ABCRoute._addFileChildren(ABCRouteChildren)\n\ninterface ABRouteChildren {\n ABCRoute: typeof ABCRouteWithChildren\n}\n\nconst ABRouteChildren: ABRouteChildren = {\n ABCRoute: ABCRouteWithChildren,\n}\n\nconst ABRouteWithChildren = ABRoute._addFileChildren(ABRouteChildren)\n\ninterface ARouteChildren {\n ABRoute: typeof ABRouteWithChildren\n}\n\nconst ARouteChildren: ARouteChildren = {\n ABRoute: ABRouteWithChildren,\n}\n\nconst ARouteWithChildren = ARoute._addFileChildren(ARouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n ARoute: ARouteWithChildren,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n\nimport type { getRouter } from './router.tsx'\nimport type { createStart } from '@tanstack/solid-start'\ndeclare module '@tanstack/solid-start' {\n interface Register {\n ssr: true\n router: Awaited>\n }\n}\n" }, { "path": "benchmarks/ssr/solid/src/router.tsx", "content": "import { createRouter } from '@tanstack/solid-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n defaultPreload: false,\n scrollRestoration: false,\n })\n}\n\ndeclare module '@tanstack/solid-router' {\n interface Register {\n router: ReturnType\n }\n}\n" }, { "path": "benchmarks/ssr/solid/src/routes/$a.$b.$c.$d.tsx", "content": "import { createFileRoute } from '@tanstack/solid-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b/$c/$d')({\n component: LevelDComponent,\n})\n\nfunction LevelDComponent() {\n return \n}\n" }, { "path": "benchmarks/ssr/solid/src/routes/$a.$b.$c.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/solid-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b/$c')({\n component: LevelCComponent,\n})\n\nfunction LevelCComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/solid/src/routes/$a.$b.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/solid-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b')({\n component: LevelBComponent,\n})\n\nfunction LevelBComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/solid/src/routes/$a.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/solid-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a')({\n component: LevelAComponent,\n})\n\nfunction LevelAComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/solid/src/routes/__root.tsx", "content": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRoute,\n} from '@tanstack/solid-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n validateSearch: (s) => s as { q?: string },\n})\n\nfunction RootComponent() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/solid/src/workload.tsx", "content": "import { For, createEffect } from 'solid-js'\nimport { Link, useParams, useSearch } from '@tanstack/solid-router'\n\nconst probes = Array.from({ length: 10 }, (_, index) => index)\n\nfunction runSelectorWork(input: string, salt: number) {\n let value = salt\n\n for (let index = 0; index < input.length; index++) {\n value = (value * 33 + input.charCodeAt(index) + index) >>> 0\n }\n\n for (let index = 0; index < 16; index++) {\n value = (value ^ (value << 13)) >>> 0\n value = (value ^ (value >> 17)) >>> 0\n value = (value ^ (value << 5)) >>> 0\n }\n\n return value\n}\n\nfunction ParamsProbe(props: { salt: number }) {\n const params = useParams({\n strict: false,\n select: (nextParams) =>\n runSelectorWork(\n `${nextParams.a ?? ''}/${nextParams.b ?? ''}/${nextParams.c ?? ''}/${nextParams.d ?? ''}`,\n props.salt,\n ),\n })\n\n createEffect(() => {\n void params()\n })\n\n return null\n}\n\nfunction SearchProbe(props: { salt: number }) {\n const search = useSearch({\n strict: false,\n select: (nextSearch) =>\n runSelectorWork(String(nextSearch.q ?? ''), props.salt),\n })\n\n createEffect(() => {\n void search()\n })\n\n return null\n}\n\nfunction LinkProbe(props: { salt: number }) {\n const value = String((props.salt % 97) + 1)\n\n return (\n \n Link\n \n )\n}\n\nexport function RouteWorkload() {\n return (\n <>\n {(probe) => }\n {(probe) => }\n {(probe) => }\n \n )\n}\n" }, { "path": "benchmarks/ssr/solid/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"solid-js\",\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\n \"speed.bench.ts\",\n \"vite.config.ts\",\n \"../bench-utils.ts\",\n \"./src/**/*\"\n ]\n}\n" }, { "path": "benchmarks/ssr/solid/vite.config.ts", "content": "import { fileURLToPath } from 'node:url'\nimport { defineConfig } from 'vitest/config'\nimport codspeedPlugin from '@codspeed/vitest-plugin'\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\nimport solid from 'vite-plugin-solid'\n\nconst rootDir = fileURLToPath(new URL('.', import.meta.url))\n\nexport default defineConfig({\n root: rootDir,\n plugins: [\n !!(process.env.VITEST && process.env.WITH_INSTRUMENTATION) &&\n codspeedPlugin(),\n tanstackStart({\n srcDirectory: 'src',\n }),\n solid({ ssr: true, hot: false, dev: false }),\n ],\n build: {\n outDir: './dist',\n emptyOutDir: true,\n minify: false,\n },\n test: {\n name: '@benchmarks/ssr (solid)',\n watch: false,\n environment: 'node',\n server: {\n deps: {\n inline: [/@solidjs/, /@tanstack\\/solid-store/],\n },\n },\n },\n})\n" }, { "path": "benchmarks/ssr/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\"bench-utils.ts\"]\n}\n" }, { "path": "benchmarks/ssr/vitest.config.ts", "content": "import { defineConfig } from 'vitest/config'\n\nexport default defineConfig({\n test: {\n watch: false,\n projects: [\n './react/vite.config.ts',\n './solid/vite.config.ts',\n './vue/vite.config.ts',\n ],\n },\n})\n" }, { "path": "benchmarks/ssr/vue/speed.bench.ts", "content": "import { afterAll, beforeAll, bench, describe } from 'vitest'\nimport { runSsrRequestLoop } from '../bench-utils'\nimport type { StartRequestHandler } from '../bench-utils'\n\nconst appModulePath = './dist/server/server.js'\nconst benchmarkSeed = 0xdeadbeef\n\nconst uninitializedHandler: StartRequestHandler = {\n fetch: () => Promise.reject(new Error('Benchmark not initialized')),\n}\n\nlet handler = uninitializedHandler\n\nasync function setup() {\n const module = (await import(appModulePath)) as {\n default: StartRequestHandler\n }\n\n handler = module.default\n}\n\nfunction teardown() {\n handler = uninitializedHandler\n}\n\ndescribe('ssr', () => {\n /**\n * Running `vitest bench` ignores \"suite hooks\" like `beforeAll` and `afterAll`,\n * so we use tinybench's `setup` and `teardown` options to run our setup and teardown logic.\n *\n * But CodSpeed calls the benchmarked function directly, bypassing `setup` and `teardown`,\n * but it does support `beforeAll` and `afterAll`.\n *\n * So it looks like we're setting up in duplicate, but in reality, it's only running once per environment, as intended.\n */\n beforeAll(setup)\n afterAll(teardown)\n\n bench(\n 'ssr request loop (vue)',\n () => runSsrRequestLoop(handler, { seed: benchmarkSeed }),\n {\n warmupIterations: 100,\n time: 10_000,\n setup,\n teardown,\n throws: true,\n },\n )\n})\n" }, { "path": "benchmarks/ssr/vue/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as ARouteImport } from './routes/$a'\nimport { Route as ABRouteImport } from './routes/$a.$b'\nimport { Route as ABCRouteImport } from './routes/$a.$b.$c'\nimport { Route as ABCDRouteImport } from './routes/$a.$b.$c.$d'\n\nconst ARoute = ARouteImport.update({\n id: '/$a',\n path: '/$a',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ABRoute = ABRouteImport.update({\n id: '/$b',\n path: '/$b',\n getParentRoute: () => ARoute,\n} as any)\nconst ABCRoute = ABCRouteImport.update({\n id: '/$c',\n path: '/$c',\n getParentRoute: () => ABRoute,\n} as any)\nconst ABCDRoute = ABCDRouteImport.update({\n id: '/$d',\n path: '/$d',\n getParentRoute: () => ABCRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRoutesByTo {\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/$a': typeof ARouteWithChildren\n '/$a/$b': typeof ABRouteWithChildren\n '/$a/$b/$c': typeof ABCRouteWithChildren\n '/$a/$b/$c/$d': typeof ABCDRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths: '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n fileRoutesByTo: FileRoutesByTo\n to: '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n id: '__root__' | '/$a' | '/$a/$b' | '/$a/$b/$c' | '/$a/$b/$c/$d'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n ARoute: typeof ARouteWithChildren\n}\n\ndeclare module '@tanstack/vue-router' {\n interface FileRoutesByPath {\n '/$a': {\n id: '/$a'\n path: '/$a'\n fullPath: '/$a'\n preLoaderRoute: typeof ARouteImport\n parentRoute: typeof rootRouteImport\n }\n '/$a/$b': {\n id: '/$a/$b'\n path: '/$b'\n fullPath: '/$a/$b'\n preLoaderRoute: typeof ABRouteImport\n parentRoute: typeof ARoute\n }\n '/$a/$b/$c': {\n id: '/$a/$b/$c'\n path: '/$c'\n fullPath: '/$a/$b/$c'\n preLoaderRoute: typeof ABCRouteImport\n parentRoute: typeof ABRoute\n }\n '/$a/$b/$c/$d': {\n id: '/$a/$b/$c/$d'\n path: '/$d'\n fullPath: '/$a/$b/$c/$d'\n preLoaderRoute: typeof ABCDRouteImport\n parentRoute: typeof ABCRoute\n }\n }\n}\n\ninterface ABCRouteChildren {\n ABCDRoute: typeof ABCDRoute\n}\n\nconst ABCRouteChildren: ABCRouteChildren = {\n ABCDRoute: ABCDRoute,\n}\n\nconst ABCRouteWithChildren = ABCRoute._addFileChildren(ABCRouteChildren)\n\ninterface ABRouteChildren {\n ABCRoute: typeof ABCRouteWithChildren\n}\n\nconst ABRouteChildren: ABRouteChildren = {\n ABCRoute: ABCRouteWithChildren,\n}\n\nconst ABRouteWithChildren = ABRoute._addFileChildren(ABRouteChildren)\n\ninterface ARouteChildren {\n ABRoute: typeof ABRouteWithChildren\n}\n\nconst ARouteChildren: ARouteChildren = {\n ABRoute: ABRouteWithChildren,\n}\n\nconst ARouteWithChildren = ARoute._addFileChildren(ARouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n ARoute: ARouteWithChildren,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n\nimport type { getRouter } from './router.tsx'\nimport type { createStart } from '@tanstack/vue-start'\ndeclare module '@tanstack/vue-start' {\n interface Register {\n ssr: true\n router: Awaited>\n }\n}\n" }, { "path": "benchmarks/ssr/vue/src/router.tsx", "content": "import { createRouter } from '@tanstack/vue-router'\nimport { routeTree } from './routeTree.gen'\n\nexport function getRouter() {\n return createRouter({\n routeTree,\n defaultPreload: false,\n scrollRestoration: false,\n })\n}\n\ndeclare module '@tanstack/vue-router' {\n interface Register {\n router: ReturnType\n }\n}\n" }, { "path": "benchmarks/ssr/vue/src/routes/$a.$b.$c.$d.tsx", "content": "import { createFileRoute } from '@tanstack/vue-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b/$c/$d')({\n component: LevelDComponent,\n})\n\nfunction LevelDComponent() {\n return \n}\n" }, { "path": "benchmarks/ssr/vue/src/routes/$a.$b.$c.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/vue-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b/$c')({\n component: LevelCComponent,\n})\n\nfunction LevelCComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/vue/src/routes/$a.$b.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/vue-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a/$b')({\n component: LevelBComponent,\n})\n\nfunction LevelBComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/vue/src/routes/$a.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/vue-router'\nimport { RouteWorkload } from '../workload'\n\nexport const Route = createFileRoute('/$a')({\n component: LevelAComponent,\n})\n\nfunction LevelAComponent() {\n return (\n <>\n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/vue/src/routes/__root.tsx", "content": "import {\n Body,\n HeadContent,\n Html,\n Outlet,\n Scripts,\n createRootRoute,\n} from '@tanstack/vue-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n validateSearch: (s) => s as { q?: string },\n})\n\nfunction RootComponent() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "benchmarks/ssr/vue/src/workload.tsx", "content": "import * as Vue from 'vue'\nimport { Link, useParams, useSearch } from '@tanstack/vue-router'\n\nconst probes = Array.from({ length: 10 }, (_, index) => index)\n\nfunction runSelectorWork(input: string, salt: number) {\n let value = salt\n\n for (let index = 0; index < input.length; index++) {\n value = (value * 33 + input.charCodeAt(index) + index) >>> 0\n }\n\n for (let index = 0; index < 16; index++) {\n value = (value ^ (value << 13)) >>> 0\n value = (value ^ (value >> 17)) >>> 0\n value = (value ^ (value << 5)) >>> 0\n }\n\n return value\n}\n\nconst ParamsProbe = Vue.defineComponent({\n props: {\n salt: {\n type: Number,\n required: true,\n },\n },\n setup(props) {\n const params = useParams({\n strict: false,\n select: (nextParams) =>\n runSelectorWork(\n `${nextParams.a ?? ''}/${nextParams.b ?? ''}/${nextParams.c ?? ''}/${nextParams.d ?? ''}`,\n props.salt,\n ),\n })\n\n return () => {\n void params.value\n return null\n }\n },\n})\n\nconst SearchProbe = Vue.defineComponent({\n props: {\n salt: {\n type: Number,\n required: true,\n },\n },\n setup(props) {\n const search = useSearch({\n strict: false,\n select: (nextSearch) =>\n runSelectorWork(String(nextSearch.q ?? ''), props.salt),\n })\n\n return () => {\n void search.value\n return null\n }\n },\n})\n\nconst LinkProbe = Vue.defineComponent({\n props: {\n salt: {\n type: Number,\n required: true,\n },\n },\n setup(props) {\n const value = String((props.salt % 97) + 1)\n\n return () => (\n \n Link\n \n )\n },\n})\n\nexport const RouteWorkload = Vue.defineComponent({\n setup() {\n return () => (\n <>\n {probes.map((probe) => (\n \n ))}\n {probes.map((probe) => (\n \n ))}\n {probes.map((probe) => (\n \n ))}\n \n )\n },\n})\n" }, { "path": "benchmarks/ssr/vue/tsconfig.json", "content": "{\n \"extends\": \"../../../tsconfig.json\",\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxImportSource\": \"vue\",\n \"types\": [\"node\", \"vite/client\", \"vitest/globals\"]\n },\n \"include\": [\n \"speed.bench.ts\",\n \"vite.config.ts\",\n \"../bench-utils.ts\",\n \"./src/**/*\"\n ]\n}\n" }, { "path": "benchmarks/ssr/vue/vite.config.ts", "content": "import { fileURLToPath } from 'node:url'\nimport { defineConfig } from 'vitest/config'\nimport codspeedPlugin from '@codspeed/vitest-plugin'\nimport { tanstackStart } from '@tanstack/vue-start/plugin/vite'\nimport vueJsx from '@vitejs/plugin-vue-jsx'\n\nconst rootDir = fileURLToPath(new URL('.', import.meta.url))\n\nexport default defineConfig({\n root: rootDir,\n plugins: [\n !!(process.env.VITEST && process.env.WITH_INSTRUMENTATION) &&\n codspeedPlugin(),\n tanstackStart({\n srcDirectory: 'src',\n }),\n vueJsx(),\n ],\n build: {\n outDir: './dist',\n emptyOutDir: true,\n minify: false,\n },\n test: {\n name: '@benchmarks/ssr (vue)',\n watch: false,\n environment: 'node',\n },\n})\n" }, { "path": "docs/router/api/file-based-routing.md", "content": "---\ntitle: File-Based Routing API Reference\n---\n\nTanStack Router's file-based routing is quite flexible and can be configured to suit your project's needs.\n\n## Configuration options\n\nThe following options are available for configuring the file-based routing:\n\n- [`routesDirectory` (required)](#routesdirectory-required)\n- [`generatedRouteTree` (required)](#generatedroutetree-required)\n- [`virtualRouteConfig`](#virtualrouteconfig)\n- [`routeFilePrefix`](#routefileprefix)\n- [`routeFileIgnorePrefix`](#routefileignoreprefix)\n- [`routeFileIgnorePattern`](#routefileignorepattern)\n- [`indexToken`](#indextoken)\n- [`routeToken`](#routetoken)\n- [`quoteStyle`](#quotestyle)\n- [`semicolons`](#semicolons)\n- [`autoCodeSplitting`](#autocodesplitting)\n- [`disableTypes`](#disabletypes)\n- [`addExtensions`](#addextensions)\n- [`disableLogging`](#disablelogging)\n- [`routeTreeFileHeader`](#routetreefileheader)\n- [`routeTreeFileFooter`](#routetreefilefooter)\n- [`enableRouteTreeFormatting`](#enableroutetreeformatting)\n- [`tmpDir`](#tmpdir)\n\n> [!WARNING]\n> Do not set the `routeFilePrefix`, `routeFileIgnorePrefix`, or `routeFileIgnorePattern` options, to match any of the tokens used in the **File Naming Conventions** guide, or you may run into unexpected behavior.\n\n### `routesDirectory` (required)\n\nThis is the path to the directory where the route files are located, relative to the cwd (current working directory).\n\nBy default, the value is set to the following and cannot be set to an empty `string` or `undefined`.\n\n```txt\n./src/routes\n```\n\n### `generatedRouteTree` (required)\n\nThis is the path to the file where the generated route tree will be saved, relative to the cwd (current working directory).\n\nBy default, the value is set to the following and cannot be set to an empty `string` or `undefined`.\n\n```txt\n./src/routeTree.gen.ts\n```\n\nIf the [`disableTypes`](#disabletypes) is set to `true`, the generated route tree will be saved with the `.js` extension instead of `.ts`.\n\n### `virtualRouteConfig`\n\nThis option is used to configure the Virtual File Routes feature. See the \"Virtual File Routes\" guide for more information.\n\nBy default, this value is set to `undefined`.\n\n### `routeFilePrefix`\n\nThis option is used to identify route files in the route directory. This means that only files that start with this prefix will be considered for routing.\n\nBy default, this value is set to `` and as such all files in the route directory will be considered for routing.\n\n### `routeFileIgnorePrefix`\n\nThis option is used to ignore specific files and directories in the route directory. This can be useful if you want to \"opt-in\" certain files or directories that you do not want to be considered for routing.\n\nBy default, this value is set to `-`.\n\nWhen using this option, it allows you have structures like this where it let's you co-located related files that are not route files:\n\n```txt\nsrc/routes\nโ”œโ”€โ”€ posts\nโ”‚ โ”œโ”€โ”€ -components // Ignored\nโ”‚ โ”‚ โ”œโ”€โ”€ Post.tsx\nโ”‚ โ”œโ”€โ”€ index.tsx\nโ”‚ โ”œโ”€โ”€ route.tsx\n```\n\n### `routeFileIgnorePattern`\n\nThis option is used to ignore specific files and directories in the route directory. It can be used in regular expression format. For example, `.((css|const).ts)|test-page` will ignore files / directories with names containing `.css.ts`, `.const.ts` or `test-page`.\n\nBy default, this value is set to `undefined`.\n\n### `routeToken`\n\nAs mentioned in the Routing Concepts guide, a layout route is rendered at the specified path, and the child routes are rendered within the layout route. The `routeToken` is used to identify the layout route file in the route directory.\n\nBy default, this value is set to `route`.\n\n> ๐Ÿง  the following filenames would equal the same runtime URL:\n\n```txt\nsrc/routes/posts.tsx -> /posts\nsrc/routes/posts.route.tsx -> /posts\nsrc/routes/posts/route.tsx -> /posts\n```\n\n#### Using regex patterns for `routeToken`\n\nYou can use a regular expression pattern instead of a literal string to match multiple layout route naming conventions. This is useful when you want more flexibility in your file naming.\n\n**In `tsr.config.json`** (JSON config), use an object with `regex` and optional `flags` properties:\n\n```json\n{\n \"routeToken\": { \"regex\": \"[a-z]+-layout\", \"flags\": \"i\" }\n}\n```\n\n**In code** (inline config), you can use a native `RegExp`:\n\n```ts\n{\n routeToken: /[a-z]+-layout/i\n}\n```\n\nWith the regex pattern `[a-z]+-layout`, filenames like `dashboard.main-layout.tsx`, `posts.protected-layout.tsx`, or `admin.settings-layout.tsx` would all be recognized as layout routes.\n\n> [!NOTE]\n> The regex is matched against the **entire** final segment of the route path. For example, with `routeToken: { \"regex\": \"[a-z]+-layout\" }`:\n>\n> - `dashboard.main-layout.tsx` matches (`main-layout` is the full segment)\n> - `dashboard.my-layout-extra.tsx` does NOT match (the segment is `my-layout-extra`, not just `my-layout`)\n\n### `indexToken`\n\nAs mentioned in the Routing Concepts guide, an index route is a route that is matched when the URL path is exactly the same as the parent route. The `indexToken` is used to identify the index route file in the route directory.\n\nBy default, this value is set to `index`.\n\n> ๐Ÿง  the following filenames would equal the same runtime URL:\n\n```txt\nsrc/routes/posts.index.tsx -> /posts/\nsrc/routes/posts/index.tsx -> /posts/\n```\n\n#### Using regex patterns for `indexToken`\n\nSimilar to `routeToken`, you can use a regular expression pattern for `indexToken` to match multiple index route naming conventions.\n\n**In `tsr.config.json`** (JSON config):\n\n```json\n{\n \"indexToken\": { \"regex\": \"[a-z]+-page\" }\n}\n```\n\n**In code** (inline config):\n\n```ts\n{\n indexToken: /[a-z]+-page/\n}\n```\n\nWith the regex pattern `[a-z]+-page`, filenames like `home-page.tsx`, `posts.list-page.tsx`, or `dashboard.overview-page.tsx` would all be recognized as index routes.\n\n#### Escaping regex tokens\n\nWhen using regex tokens, you can still escape a segment to prevent it from being treated as a token by wrapping it in square brackets. For example, if your `indexToken` is `{ \"regex\": \"[a-z]+-page\" }` and you want a literal route segment called `home-page`, name your file `[home-page].tsx`.\n\n### `quoteStyle`\n\nWhen your generated route tree is generated and when you first create a new route, those files will be formatted with the quote style you specify here.\n\nBy default, this value is set to `single`.\n\n> [!TIP]\n> You should ignore the path of your generated route tree file from your linter and formatter to avoid conflicts.\n\n### `semicolons`\n\nWhen your generated route tree is generated and when you first create a new route, those files will be formatted with semicolons if this option is set to `true`.\n\nBy default, this value is set to `false`.\n\n> [!TIP]\n> You should ignore the path of your generated route tree file from your linter and formatter to avoid conflicts.\n\n### `autoCodeSplitting`\n\nThis feature is only available if you are using the TanStack Router Bundler Plugin.\n\nThis option is used to enable automatic code-splitting for non-critical route configuration items. See the \"Automatic Code-Splitting\" guide for more information.\n\nBy default, this value is set to `false`.\n\n> [!IMPORTANT]\n> The next major release of TanStack Router (i.e. v2), will have this value defaulted to `true`.\n\n### `disableTypes`\n\nThis option is used to disable generating types for the route tree.\n\nIf set to `true`, the generated route tree will not include any types and will be written as a `.js` file instead of a `.ts` file.\n\nBy default, this value is set to `false`.\n\n### `addExtensions`\n\n- Type: `boolean | string`\n- Default: `false`\n\nThis option controls file extensions on import paths in the generated route tree.\n\n- `false` โ€” Extensions are stripped from import paths (e.g. `'./routes/posts'`)\n- `true` โ€” The original file extensions are kept (e.g. `'./routes/posts.tsx'`)\n- `string` โ€” The original extension is replaced with the provided one (e.g. `'js'` produces `'./routes/posts.js'`)\n\nPassing a string is useful when your project uses ESM, since Node.js ESM requires `.js` extensions for imports even when the source files are `.ts` or `.tsx`.\n\n```ts\n// Example: replace .tsx/.ts extensions with .js in generated imports\nTanStackRouterVite({\n addExtensions: 'js',\n})\n```\n\n### `disableLogging`\n\nThis option turns off the console logging for the route generation process.\n\nBy default, this value is set to `false`.\n\n### `routeTreeFileHeader`\n\nThis option let's you prepend content to the start of the generated route tree file.\n\nBy default, this value is set to:\n\n```json\n[\n \"/* eslint-disable */\",\n \"// @ts-nocheck\",\n \"// noinspection JSUnusedGlobalSymbols\"\n]\n```\n\n### `routeTreeFileFooter`\n\nThis option let's you append content to the end of the generated route tree file.\n\nBy default, this value is set to:\n\n```json\n[]\n```\n\n### `enableRouteTreeFormatting`\n\nThis option turns on the formatting function on the generated route tree file, which can be time-consuming for large projects.\n\nBy default, this value is set to `true`.\n\n### `tmpDir`\n\nAtomic file writes (route files and the generated route tree file) are implemented by creating a temporary file first and then renaming it to their actual location.\n\nThis config option allows to configure the path of the temp directory that will be used for creating those temporary files.\nIf it is a relative path, it will be resolved to the current working directory.\nIf this value is not set, `process.env.TSR_TMP_DIR` will be used.\nIf `process.env.TSR_TMP_DIR` is not set, it will default to `.tanstack/tmp` relative to the current working directory.\n" }, { "path": "docs/router/api/router/ActiveLinkOptionsType.md", "content": "---\nid: ActiveLinkOptionsType\ntitle: ActiveLinkOptions type\n---\n\nThe `ActiveLinkOptions` type extends the [`LinkOptions`](./LinkOptionsType.md) type and contains additional options that can be used to describe how a link should be styled when it is active.\n\n```tsx\ntype ActiveLinkOptions = LinkOptions & {\n activeProps?:\n | React.AnchorHTMLAttributes\n | (() => React.AnchorHTMLAttributes)\n inactiveProps?:\n | React.AnchorHTMLAttributes\n | (() => React.AnchorHTMLAttributes)\n}\n```\n\n## ActiveLinkOptions properties\n\nThe `ActiveLinkOptions` object accepts/contains the following properties:\n\n### `activeProps`\n\n- `React.AnchorHTMLAttributes`\n- Optional\n- The props that will be applied to the anchor element when the link is active\n\n### `inactiveProps`\n\n- Type: `React.AnchorHTMLAttributes`\n- Optional\n- The props that will be applied to the anchor element when the link is inactive\n" }, { "path": "docs/router/api/router/AsyncRouteComponentType.md", "content": "---\nid: AsyncRouteComponentType\ntitle: AsyncRouteComponent type\n---\n\nThe `AsyncRouteComponent` type is used to describe a code-split route component that can be preloaded using a `component.preload()` method.\n\n```tsx\ntype AsyncRouteComponent = SyncRouteComponent & {\n preload?: () => Promise\n}\n```\n" }, { "path": "docs/router/api/router/FileRouteClass.md", "content": "---\nid: FileRouteClass\ntitle: FileRoute class\n---\n\n> [!CAUTION]\n> This class has been deprecated and will be removed in the next major version of TanStack Router.\n> Please use the [`createFileRoute`](./createFileRouteFunction.md) function instead.\n\nThe `FileRoute` class is a factory that can be used to create a file-based route instance. This route instance can then be used to automatically generate a route tree with the `tsr generate` and `tsr watch` commands.\n\n## `FileRoute` constructor\n\nThe `FileRoute` constructor accepts a single argument: the `path` of the file that the route will be generated for.\n\n### Constructor options\n\n- Type: `string` literal\n- Required, but **automatically inserted and updated by the `tsr generate` and `tsr watch` commands**.\n- The full path of the file that the route will be generated from.\n\n### Constructor returns\n\n- An instance of the `FileRoute` class that can be used to create a route.\n\n## `FileRoute` methods\n\nThe `FileRoute` class implements the following method(s):\n\n### `.createRoute` method\n\nThe `createRoute` method is a method that can be used to configure the file route instance. It accepts a single argument: the `options` that will be used to configure the file route instance.\n\n#### .createRoute options\n\n- Type: `Omit`\n- [`RouteOptions`](./RouteOptionsType.md)\n- Optional\n- The same options that are available to the `Route` class, but with the `getParentRoute`, `path`, and `id` options omitted since they are unnecessary for file-based routing.\n\n#### .createRoute returns\n\nA [`Route`](./RouteType.md) instance that can be used to configure the route to be inserted into the route-tree.\n\n> โš ๏ธ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier.\n\n### Examples\n\n```tsx\nimport { FileRoute } from '@tanstack/react-router'\n\nexport const Route = new FileRoute('/').createRoute({\n loader: () => {\n return 'Hello World'\n },\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n const data = Route.useLoaderData()\n return
{data}
\n}\n```\n" }, { "path": "docs/router/api/router/LinkOptionsType.md", "content": "---\nid: LinkOptionsType\ntitle: LinkOptions type\n---\n\nThe `LinkOptions` type extends the [`NavigateOptions`](./NavigateOptionsType.md) type and contains additional options that can be used by TanStack Router when handling actual anchor element attributes.\n\n```tsx\ntype LinkOptions = NavigateOptions & {\n target?: HTMLAnchorElement['target']\n activeOptions?: ActiveOptions\n preload?: false | 'intent'\n preloadDelay?: number\n disabled?: boolean\n}\n```\n\n## LinkOptions properties\n\nThe `LinkOptions` object accepts/contains the following properties:\n\n### `target`\n\n- Type: `HTMLAnchorElement['target']`\n- Optional\n- The standard anchor tag target attribute\n\n### `activeOptions`\n\n- Type: `ActiveOptions`\n- Optional\n- The options that will be used to determine if the link is active\n\n### `preload`\n\n- Type: `false | 'intent' | 'viewport' | 'render'`\n- Optional\n- If set, the link's preloading strategy will be set to this value.\n- See the [Preloading guide](../../guide/preloading.md) for more information.\n\n### `preloadDelay`\n\n- Type: `number`\n- Optional\n- Delay intent preloading by this many milliseconds. If the intent exits before this delay, the preload will be cancelled.\n\n### `disabled`\n\n- Type: `boolean`\n- Optional\n- If true, will render the link without the href attribute\n" }, { "path": "docs/router/api/router/LinkPropsType.md", "content": "---\nid: LinkPropsType\ntitle: LinkProps type\n---\n\nThe `LinkProps` type extends the [`ActiveLinkOptions`](./ActiveLinkOptionsType.md) and `React.AnchorHTMLAttributes` types and contains additional props specific to the `Link` component.\n\n```tsx\ntype LinkProps = ActiveLinkOptions &\n Omit, 'children'> & {\n children?:\n | React.ReactNode\n | ((state: { isActive: boolean }) => React.ReactNode)\n }\n```\n\n## LinkProps properties\n\n- All of the props from [`ActiveLinkOptions`](./ActiveLinkOptionsType.md)\n- All of the props from `React.AnchorHTMLAttributes`\n\n#### `children`\n\n- Type: `React.ReactNode | ((state: { isActive: boolean }) => React.ReactNode)`\n- Optional\n- The children that will be rendered inside of the anchor element. If a function is provided, it will be called with an object that contains the `isActive` boolean value that can be used to determine if the link is active.\n" }, { "path": "docs/router/api/router/MatchRouteOptionsType.md", "content": "---\nid: MatchRouteOptionsType\ntitle: MatchRouteOptions type\n---\n\nThe `MatchRouteOptions` type is used to describe the options that can be used when matching a route.\n\n```tsx\ninterface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean /* @deprecated */\n includeSearch?: boolean\n fuzzy?: boolean\n}\n```\n\n## MatchRouteOptions properties\n\nThe `MatchRouteOptions` type has the following properties:\n\n### `pending` property\n\n- Type: `boolean`\n- Optional\n- If `true`, will match against pending location instead of the current location\n\n### ~~`caseSensitive`~~ property (deprecated)\n\n- Type: `boolean`\n- Optional\n- If `true`, will match against the current location with case sensitivity\n- Declare case sensitivity in the route definition instead, or globally for all routes using the `caseSensitive` option on the router\n\n### `includeSearch` property\n\n- Type: `boolean`\n- Optional\n- If `true`, will match against the current location's search params using a deep inclusive check. e.g. `{ a: 1 }` will match for a current location of `{ a: 1, b: 2 }`\n\n### `fuzzy` property\n\n- Type: `boolean`\n- Optional\n- If `true`, will match against the current location using a fuzzy match. e.g. `/posts` will match for a current location of `/posts/123`\n" }, { "path": "docs/router/api/router/NavigateOptionsType.md", "content": "---\nid: NavigateOptionsType\ntitle: NavigateOptions type\n---\n\nThe `NavigateOptions` type is used to describe the options that can be used when describing a navigation action in TanStack Router.\n\n```tsx\ntype NavigateOptions = ToOptions & {\n replace?: boolean\n resetScroll?: boolean\n hashScrollIntoView?: boolean | ScrollIntoViewOptions\n viewTransition?: boolean | ViewTransitionOptions\n ignoreBlocker?: boolean\n reloadDocument?: boolean\n href?: string\n}\n```\n\n## NavigateOptions properties\n\nThe `NavigateOptions` object accepts the following properties:\n\n### `replace`\n\n- Type: `boolean`\n- Optional\n- Defaults to `false`.\n- If `true`, the location will be committed to the browser history using `history.replace` instead of `history.push`.\n\n### `resetScroll`\n\n- Type: `boolean`\n- Optional\n- Defaults to `true` so that the scroll position will be reset to 0,0 after the location is committed to the browser history.\n- If `false`, the scroll position will not be reset to 0,0 after the location is committed to history.\n\n### `hashScrollIntoView`\n\n- Type: `boolean | ScrollIntoViewOptions`\n- Optional\n- Defaults to `true` so the element with an id matching the hash will be scrolled into view after the location is committed to history.\n- If `false`, the element with an id matching the hash will not be scrolled into view after the location is committed to history.\n- If an object is provided, it will be passed to the `scrollIntoView` method as options.\n- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for more information on `ScrollIntoViewOptions`.\n\n### `viewTransition`\n\n- Type: `boolean | ViewTransitionOptions`\n- Optional\n- Defaults to `false`.\n- If `true`, navigation will be called using `document.startViewTransition()`.\n- If [`ViewTransitionOptions`](./ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will determine the strings array passed with `ViewTransitionOptions[\"types\"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.\n- If the browser does not support this api, this option will be ignored.\n- See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.\n- See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types\n\n### `ignoreBlocker`\n\n- Type: `boolean`\n- Optional\n- Defaults to `false`.\n- If `true`, navigation will ignore any blockers that might prevent it.\n\n### `reloadDocument`\n\n- Type: `boolean`\n- Optional\n- Defaults to `false`.\n- If `true`, navigation to a route inside of router will trigger a full page load instead of the traditional SPA navigation.\n\n### `href`\n\n- Type: `string`\n- Optional\n- This can be used instead of `to` to navigate to a fully built href, e.g. pointing to an external target.\n\n- [`ToOptions`](./ToOptionsType.md)\n" }, { "path": "docs/router/api/router/NotFoundErrorType.md", "content": "---\nid: NotFoundErrorType\ntitle: NotFoundError\n---\n\nThe `NotFoundError` type is used to represent a not-found error in TanStack Router.\n\n```tsx\nexport type NotFoundError = {\n global?: boolean\n data?: any\n throw?: boolean\n routeId?: string\n headers?: HeadersInit\n}\n```\n\n## NotFoundError properties\n\nThe `NotFoundError` object accepts/contains the following properties:\n\n### `global` property (โš ๏ธ deprecated, use `routeId: rootRouteId` instead)\n\n- Type: `boolean`\n- Optional - `default: false`\n- 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()`.\n\n### `data` property\n\n- Type: `any`\n- Optional\n- Custom data that is passed into to `notFoundComponent` when the not-found error is handled\n\n### `throw` property\n\n- Type: `boolean`\n- Optional - `default: false`\n- 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.\n\n### `routeId` property\n\n- Type: `string`\n- Optional\n- 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.\n\n### `headers` property\n\n- Type: `HeadersInit`\n- Optional\n- HTTP headers to be included when the not-found error is handled on the server side.\n" }, { "path": "docs/router/api/router/NotFoundRouteClass.md", "content": "---\nid: NotFoundRouteClass\ntitle: NotFoundRoute class\n---\n\n> [!CAUTION]\n> This class has been deprecated and will be removed in the next major version of TanStack Router.\n> Please use the `notFoundComponent` route option that is present during route configuration.\n> See the [Not Found Errors guide](../../guide/not-found-errors.md) for more information.\n\nThe `NotFoundRoute` class extends the `Route` class and can be used to create a not found route instance. A not found route instance can be passed to the `routerOptions.notFoundRoute` option to configure a default not-found/404 route for every branch of the route tree.\n\n## Constructor options\n\nThe `NotFoundRoute` constructor accepts an object as its only argument.\n\n- Type:\n\n```tsx\nOmit<\n RouteOptions,\n | 'path'\n | 'id'\n | 'getParentRoute'\n | 'caseSensitive'\n | 'parseParams'\n | 'stringifyParams'\n>\n```\n\n- [RouteOptions](./RouteOptionsType.md)\n- Required\n- The options that will be used to configure the not found route instance.\n\n## Examples\n\n```tsx\nimport { NotFoundRoute, createRouter } from '@tanstack/react-router'\nimport { Route as rootRoute } from './routes/__root'\nimport { routeTree } from './routeTree.gen'\n\nconst notFoundRoute = new NotFoundRoute({\n getParentRoute: () => rootRoute,\n component: () =>
Not found!!!
,\n})\n\nconst router = createRouter({\n routeTree,\n notFoundRoute,\n})\n\n// ... other code\n```\n" }, { "path": "docs/router/api/router/ParsedHistoryStateType.md", "content": "---\nid: ParsedHistoryStateType\ntitle: ParsedHistoryState type\n---\n\nThe `ParsedHistoryState` type represents a parsed state object. Additionally to `HistoryState`, it contains the index and the unique key of the route.\n\n```tsx\nexport type ParsedHistoryState = HistoryState & {\n key?: string // TODO: Remove in v2 - use __TSR_key instead\n __TSR_key?: string\n __TSR_index: number\n}\n```\n" }, { "path": "docs/router/api/router/ParsedLocationType.md", "content": "---\nid: ParsedLocationType\ntitle: ParsedLocation type\n---\n\nThe `ParsedLocation` type represents a parsed location in TanStack Router. It contains a lot of useful information about the current location, including the pathname, search params, hash, location state, and route masking information.\n\n```tsx\ninterface ParsedLocation {\n href: string\n pathname: string\n search: TFullSearchSchema\n searchStr: string\n state: ParsedHistoryState\n hash: string\n maskedLocation?: ParsedLocation\n unmaskOnReload?: boolean\n}\n```\n" }, { "path": "docs/router/api/router/RedirectType.md", "content": "---\nid: RedirectType\ntitle: Redirect type\n---\n\nThe `Redirect` type is used to represent a redirect action in TanStack Router.\n\n```tsx\nexport type Redirect = {\n statusCode?: number\n throw?: any\n headers?: HeadersInit\n} & NavigateOptions\n```\n\n- [`NavigateOptions`](./NavigateOptionsType.md)\n\n## Redirect properties\n\nThe `Redirect` object accepts/contains the following properties:\n\n### `statusCode` property\n\n- Type: `number`\n- Optional\n- The HTTP status code to use when redirecting\n\n### `throw` property\n\n- Type: `any`\n- Optional\n- If provided, will throw the redirect 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 `redirect({ throw: true })` to throw the redirect object instead of returning it.\n\n### `headers` property\n\n- Type: `HeadersInit`\n- Optional\n- The HTTP headers to use when redirecting.\n\n### Navigation Properties\n\nSince `Redirect` extends `NavigateOptions`, it also supports navigation properties:\n\n- **`to`**: Use for internal application routes (e.g., `/dashboard`, `../profile`)\n- **`href`**: Use for external URLs (e.g., `https://example.com`, `https://authprovider.com`)\n\n> **Important**: For external URLs, always use the `href` property instead of `to`. The `to` property is designed for internal navigation within your application.\n" }, { "path": "docs/router/api/router/RegisterType.md", "content": "---\nid: RegisterType\ntitle: Register type\n---\n\nThis type is used to register a route tree with a router instance. Doing so unlocks the full type safety of TanStack Router, including top-level exports from the `@tanstack/react-router` package.\n\n```tsx\nexport type Register = {\n // router: [Your router type here]\n}\n```\n\nTo register a route tree with a router instance, use declaration merging to add the type of your router instance to the Register interface under the `router` property:\n\n## Examples\n\n```tsx\nconst router = createRouter({\n // ...\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n```\n" }, { "path": "docs/router/api/router/RootRouteClass.md", "content": "---\nid: RootRouteClass\ntitle: RootRoute class\n---\n\n> [!CAUTION]\n> This class has been deprecated and will be removed in the next major version of TanStack Router.\n> Please use the [`createRootRoute`](./createRootRouteFunction.md) function instead.\n\nThe `RootRoute` class extends the `Route` class and can be used to create a root route instance. A root route instance can then be used to create a route tree.\n\n## `RootRoute` constructor\n\nThe `RootRoute` constructor accepts an object as its only argument.\n\n### Constructor options\n\nThe options that will be used to configure the root route instance.\n\n- Type:\n\n```tsx\nOmit<\n RouteOptions,\n | 'path'\n | 'id'\n | 'getParentRoute'\n | 'caseSensitive'\n | 'parseParams'\n | 'stringifyParams'\n>\n```\n\n- [`RouteOptions`](./RouteOptionsType.md)\n- Optional\n\n## Constructor returns\n\nA new [`Route`](./RouteType.md) instance.\n\n## Examples\n\n```tsx\nimport { RootRoute, createRouter, Outlet } from '@tanstack/react-router'\n\nconst rootRoute = new RootRoute({\n component: () => ,\n // ... root route options\n})\n\nconst routeTree = rootRoute.addChildren([\n // ... other routes\n])\n\nconst router = createRouter({\n routeTree,\n})\n```\n" }, { "path": "docs/router/api/router/RouteApiClass.md", "content": "---\nid: RouteApiClass\ntitle: RouteApi class\n---\n\n> [!CAUTION]\n> This class has been deprecated and will be removed in the next major version of TanStack Router.\n> Please use the [`getRouteApi`](./getRouteApiFunction.md) function instead.\n\nThe `RouteApi` class provides type-safe version of common hooks like `useParams`, `useSearch`, `useRouteContext`, `useNavigate`, `useLoaderData`, and `useLoaderDeps` that are pre-bound to a specific route ID and corresponding registered route types.\n\n## Constructor options\n\nThe `RouteApi` constructor accepts a single argument: the `options` that will be used to configure the `RouteApi` instance.\n\n### `opts.routeId` option\n\n- Type: `string`\n- Required\n- The route ID to which the `RouteApi` instance will be bound\n\n## Constructor returns\n\n- An instance of the [`RouteApi`](./RouteApiType.md) that is pre-bound to the route ID that it was called with.\n\n## Examples\n\n```tsx\nimport { RouteApi } from '@tanstack/react-router'\n\nconst routeApi = new RouteApi({ id: '/posts' })\n\nexport function PostsPage() {\n const posts = routeApi.useLoaderData()\n // ...\n}\n```\n" }, { "path": "docs/router/api/router/RouteApiType.md", "content": "---\nid: RouteApiType\ntitle: RouteApi Type\n---\n\nThe `RouteApi` describes an instance that provides type-safe versions of common hooks like `useParams`, `useSearch`, `useRouteContext`, `useNavigate`, `useLoaderData`, and `useLoaderDeps` that are pre-bound to a specific route ID and corresponding registered route types.\n\n## `RouteApi` properties and methods\n\nThe `RouteApi` has the following properties and methods:\n\n### `useMatch` method\n\n```tsx\n useMatch(opts?: {\n select?: (match: TAllContext) => TSelected\n }): TSelected\n```\n\n- A type-safe version of the [`useMatch`](./useMatchHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- Options\n - `opts.select`\n - Optional\n - `(match: RouteMatch) => TSelected`\n - If supplied, this function will be called with the route match and the return value will be returned from `useMatch`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.\n - `opts.structuralSharing`\n - Optional\n - `boolean`\n - Configures whether structural sharing is enabled for the value returned by `select`.\n - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information.\n- Returns\n - If a `select` function is provided, the return value of the `select` function.\n - If no `select` function is provided, the `RouteMatch` object or a loosened version of the `RouteMatch` object if `opts.strict` is `false`.\n\n### `useRouteContext` method\n\n```tsx\n useRouteContext(opts?: {\n select?: (search: TAllContext) => TSelected\n }): TSelected\n```\n\n- A type-safe version of the [`useRouteContext`](./useRouteContextHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- Options\n - `opts.select`\n - Optional\n - `(match: RouteContext) => TSelected`\n - If supplied, this function will be called with the route match and the return value will be returned from `useRouteContext`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.\n- Returns\n - If a `select` function is provided, the return value of the `select` function.\n - If no `select` function is provided, the `RouteContext` object or a loosened version of the `RouteContext` object if `opts.strict` is `false`.\n\n### `useSearch` method\n\n```tsx\n useSearch(opts?: {\n select?: (search: TFullSearchSchema) => TSelected\n }): TSelected\n```\n\n- A type-safe version of the [`useSearch`](./useSearchHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- Options\n - `opts.select`\n - Optional\n - `(match: TFullSearchSchema) => TSelected`\n - If supplied, this function will be called with the route match and the return value will be returned from `useSearch`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.\n - `opts.structuralSharing`\n - Optional\n - `boolean`\n - Configures whether structural sharing is enabled for the value returned by `select`.\n - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information.\n- Returns\n - If a `select` function is provided, the return value of the `select` function.\n - If no `select` function is provided, the `TFullSearchSchema` object or a loosened version of the `TFullSearchSchema` object if `opts.strict` is `false`.\n\n### `useParams` method\n\n```tsx\n useParams(opts?: {\n select?: (params: TAllParams) => TSelected\n }): TSelected\n```\n\n- A type-safe version of the [`useParams`](./useParamsHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- Options\n - `opts.select`\n - Optional\n - `(match: TAllParams) => TSelected`\n - If supplied, this function will be called with the route match and the return value will be returned from `useParams`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.\n - `opts.structuralSharing`\n - Optional\n - `boolean`\n - Configures whether structural sharing is enabled for the value returned by `select`.\n - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information.\n- Returns\n - If a `select` function is provided, the return value of the `select` function.\n - If no `select` function is provided, the `TAllParams` object or a loosened version of the `TAllParams` object if `opts.strict` is `false`.\n\n### `useLoaderData` method\n\n```tsx\n useLoaderData(opts?: {\n select?: (search: TLoaderData) => TSelected\n }): TSelected\n```\n\n- A type-safe version of the [`useLoaderData`](./useLoaderDataHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- Options\n - `opts.select`\n - Optional\n - `(match: TLoaderData) => TSelected`\n - If supplied, this function will be called with the route match and the return value will be returned from `useLoaderData`. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.\n - `opts.structuralSharing`\n - Optional\n - `boolean`\n - Configures whether structural sharing is enabled for the value returned by `select`.\n - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information.\n- Returns\n - If a `select` function is provided, the return value of the `select` function.\n - If no `select` function is provided, the `TLoaderData` object or a loosened version of the `TLoaderData` object if `opts.strict` is `false`.\n\n### `useLoaderDeps` method\n\n```tsx\n useLoaderDeps(opts?: {\n select?: (search: TLoaderDeps) => TSelected\n }): TSelected\n```\n\n- A type-safe version of the [`useLoaderDeps`](./useLoaderDepsHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- Options\n - `opts.select`\n - Optional\n - `(match: TLoaderDeps) => TSelected`\n - If supplied, this function will be called with the route match and the return value will be returned from `useLoaderDeps`.\n - `opts.structuralSharing`\n - Optional\n - `boolean`\n - Configures whether structural sharing is enabled for the value returned by `select`.\n - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information.\n- Returns\n - If a `select` function is provided, the return value of the `select` function.\n - If no `select` function is provided, the `TLoaderDeps` object.\n\n### `useNavigate` method\n\n```tsx\n useNavigate(): // navigate function\n```\n\n- A type-safe version of [`useNavigate`](./useNavigateHook.md) that is pre-bound to the route ID that the `RouteApi` instance was created with.\n\n### `redirect` method\n\n```tsx\n redirect(opts?: RedirectOptions): Redirect\n```\n\n- A type-safe version of the [`redirect`](./redirectFunction.md) function that is pre-bound to the route ID that the `RouteApi` instance was created with.\n- The `from` parameter is automatically set to the route ID, enabling type-safe relative redirects.\n- Options\n - All options from [`redirect`](./redirectFunction.md) except `from`, which is automatically provided.\n- Returns\n - A `Redirect` object that can be thrown from `beforeLoad` or `loader` callbacks.\n\n#### Example\n\n```tsx\nimport { getRouteApi } from '@tanstack/react-router'\n\nconst routeApi = getRouteApi('/dashboard/settings')\n\nexport const Route = createFileRoute('/dashboard/settings')({\n beforeLoad: ({ context }) => {\n if (!context.user) {\n // Type-safe redirect - 'from' is automatically '/dashboard/settings'\n throw routeApi.redirect({\n to: '../login', // Relative path to sibling route\n })\n }\n },\n})\n```\n" }, { "path": "docs/router/api/router/RouteClass.md", "content": "---\nid: RouteClass\ntitle: Route class\n---\n\n> [!CAUTION]\n> This class has been deprecated and will be removed in the next major version of TanStack Router.\n> Please use the [`createRoute`](./createRouteFunction.md) function instead.\n\nThe `Route` class implements the `RouteApi` class and can be used to create route instances. A route instance can then be used to create a route tree.\n\n## `Route` constructor\n\nThe `Route` constructor accepts an object as its only argument.\n\n### Constructor options\n\n- Type: [`RouteOptions`](./RouteOptionsType.md)\n- Required\n- The options that will be used to configure the route instance\n\n### Constructor returns\n\nA new [`Route`](./RouteType.md) instance.\n\n## Examples\n\n```tsx\nimport { Route } from '@tanstack/react-router'\nimport { rootRoute } from './__root'\n\nconst indexRoute = new Route({\n getParentRoute: () => rootRoute,\n path: '/',\n loader: () => {\n return 'Hello World'\n },\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n const data = indexRoute.useLoaderData()\n return
{data}
\n}\n```\n" }, { "path": "docs/router/api/router/RouteMaskType.md", "content": "---\nid: RouteMaskType\ntitle: RouteMask type\n---\n\nThe `RouteMask` type extends the [`ToOptions`](./ToOptionsType.md) type and has other the necessary properties to create a route mask.\n\n## RouteMask properties\n\nThe `RouteMask` type accepts an object with the following properties:\n\n### `...ToOptions`\n\n- Type: [`ToOptions`](./ToOptionsType.md)\n- Required\n- The options that will be used to configure the route mask\n\n### `options.routeTree`\n\n- Type: `TRouteTree`\n- Required\n- The route tree that this route mask will support\n\n### `options.unmaskOnReload`\n\n- Type: `boolean`\n- Optional\n- If `true`, the route mask will be removed when the page is reloaded\n" }, { "path": "docs/router/api/router/RouteMatchType.md", "content": "---\nid: RouteMatchType\ntitle: RouteMatch type\n---\n\nThe `RouteMatch` type represents a route match in TanStack Router.\n\n```tsx\ninterface RouteMatch {\n id: string\n routeId: string\n pathname: string\n params: Route['allParams']\n status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n isFetching: false | 'beforeLoad' | 'loader'\n showPending: boolean\n error: unknown\n paramsError: unknown\n searchError: unknown\n updatedAt: number\n loaderData?: Route['loaderData']\n context: Route['allContext']\n search: Route['fullSearchSchema']\n fetchedAt: number\n abortController: AbortController\n cause: 'enter' | 'stay'\n ssr?: boolean | 'data-only'\n}\n```\n" }, { "path": "docs/router/api/router/RouteOptionsType.md", "content": "---\nid: RouteOptionsType\ntitle: RouteOptions type\n---\n\nThe `RouteOptions` type is used to describe the options that can be used when creating a route.\n\n## RouteOptions properties\n\nThe `RouteOptions` type accepts an object with the following properties:\n\n### `getParentRoute` method\n\n- Type: `() => TParentRoute`\n- Required\n- A function that returns the parent route of the route being created. This is required to provide full type safety to child route configurations and to ensure that the route tree is built correctly.\n\n### `path` property\n\n- Type: `string`\n- Required, unless an `id` is provided to configure the route as a pathless layout route\n- The path segment that will be used to match the route.\n\n### `id` property\n\n- Type: `string`\n- Optional, but required if a `path` is not provided\n- The unique identifier for the route if it is to be configured as a pathless layout route. If provided, the route will not match against the location pathname and its routes will be flattened into its parent route for matching.\n\n### `component` property\n\n- Type: `RouteComponent` or `LazyRouteComponent`\n- Optional - Defaults to ``\n- The content to be rendered when the route is matched.\n\n### `errorComponent` property\n\n- Type: `RouteComponent` or `LazyRouteComponent`\n- Optional - Defaults to `routerOptions.defaultErrorComponent`\n- The content to be rendered when the route encounters an error.\n\n### `pendingComponent` property\n\n- Type: `RouteComponent` or `LazyRouteComponent`\n- Optional - Defaults to `routerOptions.defaultPendingComponent`\n- The content to be rendered if and when the route is pending and has reached its pendingMs threshold.\n\n### `notFoundComponent` property\n\n- Type: `NotFoundRouteComponent` or `LazyRouteComponent`\n- Optional - Defaults to `routerOptions.defaultNotFoundComponent`\n- The content to be rendered when the route is not found.\n\n### `validateSearch` method\n\n- Type: `(rawSearchParams: unknown) => TSearchSchema`\n- Optional\n- A function that will be called when this route is matched and passed the raw search params from the current location and return valid parsed search params. If this function throws, the route will be put into an error state and the error will be thrown during render. If this function does not throw, its return value will be used as the route's search params and the return type will be inferred into the rest of the router.\n- Optionally, the parameter type can be tagged with the `SearchSchemaInput` type like this: `(searchParams: TSearchSchemaInput & SearchSchemaInput) => TSearchSchema`. If this tag is present, `TSearchSchemaInput` will be used to type the `search` property of `` and `navigate()` **instead of** `TSearchSchema`. The difference between `TSearchSchemaInput` and `TSearchSchema` can be useful, for example, to express optional search parameters.\n\n### `search.middlewares` property\n\n- Type: `(({search: TSearchSchema, next: (newSearch: TSearchSchema) => TSearchSchema}) => TSearchSchema)[]`\n- Optional\n- Search middlewares are functions that transform the search parameters when generating new links for a route or its descendants.\n- A search middleware is passed in the current search (if it is the first middleware to run) or is invoked by the previous middleware calling `next`.\n\n### `parseParams` method (โš ๏ธ deprecated, use `params.parse` instead)\n\n- Type: `(rawParams: Record) => TParams`\n- Optional\n- A function that will be called when this route is matched and passed the raw params from the current location and return valid parsed params. If this function throws, the route will be put into an error state and the error will be thrown during render. If this function does not throw, its return value will be used as the route's params and the return type will be inferred into the rest of the router.\n\n### `stringifyParams` method (โš ๏ธ deprecated, use `params.stringify` instead)\n\n- Type: `(params: TParams) => Record`\n- Required if `parseParams` is provided\n- A function that will be called when this route's parsed params are being used to build a location. This function should return a valid object of `Record` mapping.\n\n### `params.parse` method\n\n- Type: `(rawParams: Record) => TParams`\n- Optional\n- A function that will be called when this route is matched and passed the raw params from the current location and return valid parsed params. If this function throws, the route will be put into an error state and the error will be thrown during render. If this function does not throw, its return value will be used as the route's params and the return type will be inferred into the rest of the router.\n\n### `params.stringify` method\n\n- Type: `(params: TParams) => Record`\n- A function that will be called when this route's parsed params are being used to build a location. This function should return a valid object of `Record` mapping.\n\n### `beforeLoad` method\n\n- Type:\n\n```tsx\ntype beforeLoad = (\n opts: RouteMatch & {\n search: TFullSearchSchema\n abortController: AbortController\n preload: boolean\n params: TAllParams\n context: TParentContext\n location: ParsedLocation\n navigate: NavigateFn // @deprecated\n buildLocation: BuildLocationFn\n cause: 'enter' | 'stay'\n },\n) => Promise | TRouteContext | void\n```\n\n- Optional\n- [`ParsedLocation`](./ParsedLocationType.md)\n- This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail.\n- If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render.\n- If this function returns a `TRouteContext` object, that object will be merged into the route's context and be made available in the `loader` and other related route components/methods.\n- It's common to use this function to check if a user is authenticated and redirect them to a login page if they are not. To do this, you can either return or throw a `redirect` object from this function.\n\n> ๐Ÿšง `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](./redirectFunction.md).\n\n### `loader` method\n\n- Type:\n\n```tsx\ntype loaderFn = (\n opts: RouteMatch & {\n abortController: AbortController\n cause: 'preload' | 'enter' | 'stay'\n context: TAllContext\n deps: TLoaderDeps\n location: ParsedLocation\n params: TAllParams\n preload: boolean\n parentMatchPromise: Promise>\n navigate: NavigateFn // @deprecated\n route: AnyRoute\n },\n) => Promise | TLoaderData | void\n\ntype loader =\n | loaderFn\n | {\n handler: loaderFn\n staleReloadMode?: 'background' | 'blocking'\n }\n```\n\n- Optional\n- [`ParsedLocation`](./ParsedLocationType.md)\n- This async function is called when a route is matched and passed the route's match object. If an error is thrown here, the route will be put into an error state and the error will be thrown during render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail.\n- If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render.\n- If this function returns a `TLoaderData` object, that object will be stored on the route match until the route match is no longer active. It can be accessed using the `useLoaderData` hook in any component that is a child of the route match before another `` is rendered.\n- Deps must be returned by your `loaderDeps` function in order to appear.\n- Use the object form to configure loader-specific behavior like `staleReloadMode`.\n- `staleReloadMode: 'background'` preserves stale-while-revalidate behavior for stale successful matches.\n- `staleReloadMode: 'blocking'` waits for the stale loader reload to complete before continuing.\n\n> ๐Ÿšง `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](./redirectFunction.md).\n\n### `loaderDeps` method\n\n- Type:\n\n```tsx\ntype loaderDeps = (opts: { search: TFullSearchSchema }) => Record\n```\n\n- Optional\n- A function that will be called before this route is matched to provide additional unique identification to the route match and serve as a dependency tracker for when the match should be reloaded. It should return any serializable value that can uniquely identify the route match from navigation to navigation.\n- By default, path params are already used to uniquely identify a route match, so it's unnecessary to return these here.\n- If your route match relies on search params for unique identification, it's required that you return them here so they can be made available in the `loader`'s `deps` argument.\n\n### `staleTime` property\n\n- Type: `number`\n- Optional\n- Defaults to `routerOptions.defaultStaleTime`, which defaults to `0`\n- The amount of time in milliseconds that a route match's loader data will be considered fresh. If a route match is matched again within this time frame, its loader data will not be reloaded.\n\n### `preloadStaleTime` property\n\n- Type: `number`\n- Optional\n- Defaults to `routerOptions.defaultPreloadStaleTime`, which defaults to `30_000` ms (30 seconds)\n- The amount of time in milliseconds that a route match's loader data will be considered fresh when preloading. If a route match is preloaded again within this time frame, its loader data will not be reloaded. If a route match is loaded (for navigation) within this time frame, the normal `staleTime` is used instead.\n\n### `gcTime` property\n\n- Type: `number`\n- Optional\n- Defaults to `routerOptions.defaultGcTime`, which defaults to 30 minutes.\n- The amount of time in milliseconds that a route match's loader data will be kept in memory after a preload or it is no longer in use.\n\n### `shouldReload` property\n\n- Type: `boolean | ((args: LoaderArgs) => boolean)`\n- Optional\n- If `false` or returns `false`, the route match's loader data will not be reloaded on subsequent matches.\n- If `true` or returns `true`, the route match's loader data will be reloaded on subsequent matches.\n- If `undefined` or returns `undefined`, the route match's loader data will adhere to the default stale-while-revalidate behavior.\n\n### `caseSensitive` property\n\n- Type: `boolean`\n- Optional\n- If `true`, this route will be matched as case-sensitive.\n\n### `wrapInSuspense` property\n\n- Type: `boolean`\n- Optional\n- If `true`, this route will be forcefully wrapped in a suspense boundary, regardless if a reason is found to do so from inspecting its provided components.\n\n### `pendingMs` property\n\n- Type: `number`\n- Optional\n- Defaults to `routerOptions.defaultPendingMs`, which defaults to `1000`\n- The threshold in milliseconds that a route must be pending before its `pendingComponent` is shown.\n\n### `pendingMinMs` property\n\n- Type: `number`\n- Optional\n- Defaults to `routerOptions.defaultPendingMinMs` which defaults to `500`\n- The minimum amount of time in milliseconds that the pending component will be shown for if it is shown. This is useful to prevent the pending component from flashing on the screen for a split second.\n\n### `preloadMaxAge` property\n\n- Type: `number`\n- Optional\n- Defaults to `30_000` ms (30 seconds)\n- The maximum amount of time in milliseconds that a route's preloaded route data will be cached for. If a route is not matched within this time frame, its loader data will be discarded.\n\n### `preSearchFilters` property (โš ๏ธ deprecated, use `search.middlewares` instead)\n\n- Type: `((search: TFullSearchSchema) => TFullSearchSchema)[]`\n- Optional\n- An array of functions that will be called when generating any new links to this route or its grandchildren.\n- Each function will be called with the current search params and should return a new search params object that will be used to generate the link.\n- It has a `pre` prefix because it is called before the user-provided function that is passed to `navigate`/`Link` etc has a chance to modify the search params.\n\n### `postSearchFilters` property (โš ๏ธ deprecated, use `search.middlewares` instead)\n\n- Type: `((search: TFullSearchSchema) => TFullSearchSchema)[]`\n- Optional\n- An array of functions that will be called when generating any new links to this route or its grandchildren.\n- Each function will be called with the current search params and should return a new search params object that will be used to generate the link.\n- It has a `post` prefix because it is called after the user-provided function that is passed to `navigate`/`Link` etc has modified the search params.\n\n### `onError` property\n\n- Type: `(error: any) => void`\n- Optional\n- A function that will be called when an error is thrown during a navigation or preload event.\n- If this function throws a [`redirect`](./redirectFunction.md), then the router will process and apply the redirect immediately.\n\n### `onEnter` property\n\n- Type: `(match: RouteMatch) => void`\n- Optional\n- A function that will be called when a route is matched and loaded after not being matched in the previous location.\n\n### `onStay` property\n\n- Type: `(match: RouteMatch) => void`\n- Optional\n- A function that will be called when a route is matched and loaded after being matched in the previous location.\n\n### `onLeave` property\n\n- Type: `(match: RouteMatch) => void`\n- Optional\n- A function that will be called when a route is no longer matched after being matched in the previous location.\n\n### `onCatch` property\n\n- Type: `(error: Error, errorInfo: ErrorInfo) => void`\n- Optional - Defaults to `routerOptions.defaultOnCatch`\n- A function that will be called when errors are caught when the route encounters an error.\n\n### `remountDeps` method\n\n- Type:\n\n```tsx\ntype remountDeps = (opts: RemountDepsOptions) => any\n\ninterface RemountDepsOptions<\n in out TRouteId,\n in out TFullSearchSchema,\n in out TAllParams,\n in out TLoaderDeps,\n> {\n routeId: TRouteId\n search: TFullSearchSchema\n params: TAllParams\n loaderDeps: TLoaderDeps\n}\n```\n\n- Optional\n- A function that will be called to determine whether a route component shall be remounted after navigation. If this function returns a different value than previously, it will remount.\n- The return value needs to be JSON serializable.\n- By default, a route component will not be remounted if it stays active after a navigation.\n\nExample:\nIf you want to configure to remount a route component upon `params` change, use:\n\n```tsx\nremountDeps: ({ params }) => params\n```\n\n### `headers` method\n\n- Type:\n\n```tsx\ntype headers = (opts: {\n matches: Array\n match: RouteMatch\n params: TAllParams\n loaderData?: TLoaderData\n}) => Promise> | Record\n```\n\n- Optional\n- Allows you to specify custom HTTP headers to be sent when this route is rendered during SSR. The function receives the current match context and should return a plain object of header name/value pairs.\n\n### `head` method\n\n- Type:\n\n```tsx\ntype head = (ctx: {\n matches: Array\n match: RouteMatch\n params: TAllParams\n loaderData?: TLoaderData\n}) =>\n | Promise<{\n links?: RouteMatch['links']\n scripts?: RouteMatch['headScripts']\n meta?: RouteMatch['meta']\n styles?: RouteMatch['styles']\n }>\n | {\n links?: RouteMatch['links']\n scripts?: RouteMatch['headScripts']\n meta?: RouteMatch['meta']\n styles?: RouteMatch['styles']\n }\n```\n\n- Optional\n- Returns additional elements to inject into the document `` for this route. Use it to add route-level SEO metadata, preload links, inline styles, or custom scripts.\n\n### `scripts` method\n\n- Type:\n\n```tsx\ntype scripts = (ctx: {\n matches: Array\n match: RouteMatch\n params: TAllParams\n loaderData?: TLoaderData\n}) => Promise | RouteMatch['scripts']\n```\n\n- Optional\n- A shorthand helper to return only `\n \n\n" }, { "path": "e2e/react-router/basepath-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basepath-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basepath-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basepath-file-based/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n basepath: '/app',\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basepath-file-based/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as ScrollErrorRouteImport } from './routes/scroll-error'\nimport { Route as RedirectReloadRouteImport } from './routes/redirectReload'\nimport { Route as RedirectRouteImport } from './routes/redirect'\nimport { Route as AboutRouteImport } from './routes/about'\nimport { Route as IndexRouteImport } from './routes/index'\n\nconst ScrollErrorRoute = ScrollErrorRouteImport.update({\n id: '/scroll-error',\n path: '/scroll-error',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst RedirectReloadRoute = RedirectReloadRouteImport.update({\n id: '/redirectReload',\n path: '/redirectReload',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst RedirectRoute = RedirectRouteImport.update({\n id: '/redirect',\n path: '/redirect',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst AboutRoute = AboutRouteImport.update({\n id: '/about',\n path: '/about',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/about': typeof AboutRoute\n '/redirect': typeof RedirectRoute\n '/redirectReload': typeof RedirectReloadRoute\n '/scroll-error': typeof ScrollErrorRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/about': typeof AboutRoute\n '/redirect': typeof RedirectRoute\n '/redirectReload': typeof RedirectReloadRoute\n '/scroll-error': typeof ScrollErrorRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/about': typeof AboutRoute\n '/redirect': typeof RedirectRoute\n '/redirectReload': typeof RedirectReloadRoute\n '/scroll-error': typeof ScrollErrorRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths: '/' | '/about' | '/redirect' | '/redirectReload' | '/scroll-error'\n fileRoutesByTo: FileRoutesByTo\n to: '/' | '/about' | '/redirect' | '/redirectReload' | '/scroll-error'\n id:\n | '__root__'\n | '/'\n | '/about'\n | '/redirect'\n | '/redirectReload'\n | '/scroll-error'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n AboutRoute: typeof AboutRoute\n RedirectRoute: typeof RedirectRoute\n RedirectReloadRoute: typeof RedirectReloadRoute\n ScrollErrorRoute: typeof ScrollErrorRoute\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/scroll-error': {\n id: '/scroll-error'\n path: '/scroll-error'\n fullPath: '/scroll-error'\n preLoaderRoute: typeof ScrollErrorRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/redirectReload': {\n id: '/redirectReload'\n path: '/redirectReload'\n fullPath: '/redirectReload'\n preLoaderRoute: typeof RedirectReloadRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/redirect': {\n id: '/redirect'\n path: '/redirect'\n fullPath: '/redirect'\n preLoaderRoute: typeof RedirectRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/about': {\n id: '/about'\n path: '/about'\n fullPath: '/about'\n preLoaderRoute: typeof AboutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n }\n}\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n AboutRoute: AboutRoute,\n RedirectRoute: RedirectRoute,\n RedirectReloadRoute: RedirectReloadRoute,\n ScrollErrorRoute: ScrollErrorRoute,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/basepath-file-based/src/routes/__root.tsx", "content": "import { createRootRoute } from '@tanstack/react-router'\n\nexport const Route = createRootRoute()\n" }, { "path": "e2e/react-router/basepath-file-based/src/routes/about.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/about')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const navigate = Route.useNavigate()\n\n return (\n
\n navigate({ to: '/', reloadDocument: true })}\n data-testid=\"to-home-btn\"\n >\n Navigate to / with document reload\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basepath-file-based/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n const navigate = Route.useNavigate()\n\n return (\n
\n \n navigate({\n to: '/about',\n reloadDocument: true,\n })\n }\n >\n Navigate to /about with document reload\n {' '}\n \n navigate({\n to: '/redirect',\n })\n }\n >\n Navigate to /redirect\n {' '}\n \n navigate({\n to: '/redirectReload',\n })\n }\n >\n Navigate to /redirectReload\n {' '}\n \n navigate({\n href: '/app/about',\n })\n }\n >\n Navigate to /about using href with basepath\n {' '}\n \n navigate({\n href: '/app/about',\n reloadDocument: true,\n })\n }\n >\n Navigate to /about using href with basepath (reloadDocument)\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basepath-file-based/src/routes/redirect.tsx", "content": "import { createFileRoute, redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect')({\n beforeLoad: () => {\n throw redirect({ to: '/about' })\n },\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return
Hello \"/redirect\"!
\n}\n" }, { "path": "e2e/react-router/basepath-file-based/src/routes/redirectReload.tsx", "content": "import { createFileRoute, redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirectReload')({\n beforeLoad: () => {\n throw redirect({ to: '/about', reloadDocument: true })\n },\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return
Hello \"/redirectReload\"!
\n}\n" }, { "path": "e2e/react-router/basepath-file-based/src/routes/scroll-error.tsx", "content": "import { Link, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/scroll-error')({\n component: ScrollErrorComponent,\n})\n\nfunction ScrollErrorComponent() {\n return (\n
\n About\n
\n

Scroll Error Test

\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basepath-file-based/tests/reload-document.test.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest('navigate() respects basepath for when reloadDocument=true', async ({\n page,\n}) => {\n await page.goto(`/app/`)\n await expect(page.getByTestId(`home-component`)).toBeInViewport()\n\n const aboutBtn = page.getByTestId(`to-about-btn`)\n await aboutBtn.click()\n await page.waitForURL('/app/about')\n await expect(page.getByTestId(`about-component`)).toBeInViewport()\n\n const homeBtn = page.getByTestId(`to-home-btn`)\n await homeBtn.click()\n await page.waitForURL('/app/')\n await expect(page.getByTestId(`home-component`)).toBeInViewport()\n})\n\ntest('redirect respects basepath', async ({ page }) => {\n await page.goto(`/app/`)\n await expect(page.getByTestId(`home-component`)).toBeInViewport()\n\n const redirectBtn = page.getByTestId(`to-redirect-btn`)\n await redirectBtn.click()\n await page.waitForURL('/app/about')\n await expect(page.getByTestId(`about-component`)).toBeInViewport()\n})\n\ntest('redirect respects basepath with reloadDocument = true on redirect', async ({\n page,\n}) => {\n await page.goto(`/app/`)\n await expect(page.getByTestId(`home-component`)).toBeInViewport()\n\n const redirectBtn = page.getByTestId(`to-redirect-reload-btn`)\n await redirectBtn.click()\n await page.waitForURL('/app/about')\n await expect(page.getByTestId(`about-component`)).toBeInViewport()\n})\n\ntest('navigate() with href containing basepath', async ({ page }) => {\n await page.goto(`/app/`)\n await expect(page.getByTestId(`home-component`)).toBeInViewport()\n\n const aboutBtn = page.getByTestId(`to-about-href-with-basepath-btn`)\n await aboutBtn.click()\n // Should navigate to /app/about, NOT /app/app/about\n await page.waitForURL('/app/about')\n await expect(page.getByTestId(`about-component`)).toBeInViewport()\n})\n\ntest('navigate() with href containing basepath and reloadDocument=true', async ({\n page,\n}) => {\n await page.goto(`/app/`)\n await expect(page.getByTestId(`home-component`)).toBeInViewport()\n\n const aboutBtn = page.getByTestId(`to-about-href-with-basepath-reload-btn`)\n await aboutBtn.click()\n // Should navigate to /app/about, NOT stay on current page\n await page.waitForURL('/app/about')\n await expect(page.getByTestId(`about-component`)).toBeInViewport()\n})\n" }, { "path": "e2e/react-router/basepath-file-based/tests/scroll-restoration-session-storage-error.test.ts", "content": "/* eslint-disable */\nimport { expect, test } from '@playwright/test'\nimport type { Page } from '@playwright/test'\n\nconst trackConsole = (page: Page) => {\n const consoleWarnings: Array = []\n\n page.on('console', (msg) => {\n if (msg.type() === 'warning') {\n consoleWarnings.push(msg.text())\n }\n })\n\n return consoleWarnings\n}\n\ntest.describe('Scroll Restoration with Session Storage Error', () => {\n test('should not crash when sessionStorage.setItem throws an error', async ({\n page,\n }) => {\n const consoleWarnings = trackConsole(page)\n\n await page.goto('/app/scroll-error')\n await page.waitForLoadState('networkidle')\n\n await page.evaluate(() => {\n sessionStorage.setItem = () => {\n throw new Error('Test Error')\n }\n })\n\n await page.evaluate(() => window.scrollTo(0, 200))\n await page.waitForTimeout(150)\n\n await page.click('a[href=\"/app/about\"]')\n await page.waitForLoadState('networkidle')\n\n await page.goBack()\n await page.waitForLoadState('networkidle')\n\n expect(\n consoleWarnings.some((warning) =>\n warning.includes(\n '[ts-router] Could not persist scroll restoration state to sessionStorage.',\n ),\n ),\n ).toBeTruthy()\n\n const heading = page.locator('h1:has-text(\"Scroll Error Test\")')\n await expect(heading).toBeVisible()\n\n const scrollPosition = await page.evaluate(() => window.scrollY)\n expect(scrollPosition).not.toBe(200)\n })\n\n test('should surface warning when sessionStorage quota is exceeded', async ({\n page,\n }) => {\n const consoleWarnings = trackConsole(page)\n\n await page.goto('/app/scroll-error')\n await page.waitForLoadState('networkidle')\n\n await page.evaluate(() => {\n let i = 0\n const chunk = 'x'.repeat(32)\n\n try {\n while (true) {\n sessionStorage.setItem(`key_${i}`, chunk)\n i += 1\n }\n } catch {\n console.log(`Stored ${i} keys in session storage`)\n }\n })\n\n await page.evaluate(() => window.scrollTo(0, 200))\n await page.waitForTimeout(150)\n\n await page.click('a[href=\"/app/about\"]')\n await page.waitForLoadState('networkidle')\n\n await page.goBack()\n await page.waitForLoadState('networkidle')\n\n expect(\n consoleWarnings.some((warning) =>\n warning.includes(\n '[ts-router] Could not persist scroll restoration state to sessionStorage.',\n ),\n ),\n ).toBeTruthy()\n\n const heading = page.locator('h1:has-text(\"Scroll Error Test\")')\n await expect(heading).toBeVisible()\n\n const scrollPosition = await page.evaluate(() => window.scrollY)\n expect(scrollPosition).not.toBe(200)\n })\n})\n" }, { "path": "e2e/react-router/basepath-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basepath-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basepath-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basepath-file-based/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n base: '/app/',\n plugins: [tanstackRouter({ target: 'react' }), react()],\n})\n" }, { "path": "e2e/react-router/basic/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/" }, { "path": "e2e/react-router/basic/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic/src/main.tsx", "content": "import ReactDOM from 'react-dom/client'\nimport {\n ErrorComponent,\n Link,\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n redirect,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport { NotFoundError, fetchPost, fetchPosts } from './posts'\nimport './styles.css'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nconst rootRoute = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n View Transition\n {' '}\n \n View Transition types\n {' '}\n \n Layout\n {' '}\n \n This Route Does Not Exist\n {' '}\n
\n \n Link in SVG\n \n \n \n \n
\n
\n \n \n \n )\n}\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n\nexport const postsRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: 'posts',\n loader: () => fetchPosts(),\n}).lazy(() => import('./posts.lazy').then((d) => d.Route))\n\nconst postsIndexRoute = createRoute({\n getParentRoute: () => postsRoute,\n path: '/',\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n\nconst postRoute = createRoute({\n getParentRoute: () => postsRoute,\n path: '$postId',\n errorComponent: PostErrorComponent,\n loader: ({ params }) => fetchPost(params.postId),\n component: PostComponent,\n})\n\nfunction PostErrorComponent({ error }: ErrorComponentProps) {\n if (error instanceof NotFoundError) {\n return
{error.message}
\n }\n\n return \n}\n\nfunction PostComponent() {\n const post = postRoute.useLoaderData()\n\n return (\n
\n

{post.title}

\n
\n
{post.body}
\n
\n )\n}\n\nconst layoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n id: '_layout',\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n\nconst layout2Route = createRoute({\n getParentRoute: () => layoutRoute,\n id: '_layout-2',\n component: Layout2Component,\n})\n\nfunction Layout2Component() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n\nconst layoutARoute = createRoute({\n getParentRoute: () => layout2Route,\n path: '/layout-a',\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n\nconst layoutBRoute = createRoute({\n getParentRoute: () => layout2Route,\n path: '/layout-b',\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n\nconst paramsPsRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/params-ps',\n})\n\nconst paramsPsIndexRoute = createRoute({\n getParentRoute: () => paramsPsRoute,\n path: '/',\n component: function ParamsIndex() {\n return (\n
\n

Named path params

\n
    \n
  • \n \n /params-ps/named/$foo\n \n
    • \n
  • \n \n /params-ps/named/{'prefix{$foo}'}\n \n
    • \n
  • \n \n /params-ps/named/{'{$foo}suffix'}\n \n
    • \n
\n
\n

Wildcard path params

\n
    \n
  • \n \n /params-ps/wildcard/$\n \n
    • \n
  • \n \n /params-ps/wildcard/{'prefix{$}'}\n \n
    • \n
  • \n \n /params-ps/wildcard/{'{$}suffix'}\n \n
    • \n
\n
\n )\n },\n})\n\nconst paramsPsNamedRoute = createRoute({\n getParentRoute: () => paramsPsRoute,\n path: '/named',\n})\n\nconst paramsPsNamedIndexRoute = createRoute({\n getParentRoute: () => paramsPsNamedRoute,\n path: '/',\n beforeLoad: () => {\n throw redirect({ to: '/params-ps' })\n },\n})\n\nconst paramsPsNamedFooRoute = createRoute({\n getParentRoute: () => paramsPsNamedRoute,\n path: '/$foo',\n component: function ParamsNamedFoo() {\n const p = paramsPsNamedFooRoute.useParams()\n return (\n
\n

ParamsNamedFoo

\n
{JSON.stringify(p)}
\n
\n )\n },\n})\n\nconst paramsPsNamedFooPrefixRoute = createRoute({\n getParentRoute: () => paramsPsNamedRoute,\n path: '/prefix{$foo}',\n component: function ParamsNamedFooMarkdown() {\n const p = paramsPsNamedFooPrefixRoute.useParams()\n return (\n
\n

ParamsNamedFooPrefix

\n
{JSON.stringify(p)}
\n
\n )\n },\n})\n\nconst paramsPsNamedFooSuffixRoute = createRoute({\n getParentRoute: () => paramsPsNamedRoute,\n path: '/{$foo}suffix',\n component: function ParamsNamedFooSuffix() {\n const p = paramsPsNamedFooSuffixRoute.useParams()\n return (\n
\n

ParamsNamedFooSuffix

\n
{JSON.stringify(p)}
\n
\n )\n },\n})\n\nconst paramsPsWildcardRoute = createRoute({\n getParentRoute: () => paramsPsRoute,\n path: '/wildcard',\n})\n\nconst paramsPsWildcardIndexRoute = createRoute({\n getParentRoute: () => paramsPsWildcardRoute,\n path: '/',\n beforeLoad: () => {\n throw redirect({ to: '/params-ps' })\n },\n})\n\nconst paramsPsWildcardSplatRoute = createRoute({\n getParentRoute: () => paramsPsWildcardRoute,\n path: '$',\n component: function ParamsWildcardSplat() {\n const p = paramsPsWildcardSplatRoute.useParams()\n return (\n
\n

ParamsWildcardSplat

\n
{JSON.stringify(p)}
\n
\n )\n },\n})\n\nconst paramsPsWildcardSplatPrefixRoute = createRoute({\n getParentRoute: () => paramsPsWildcardRoute,\n path: 'prefix{$}',\n component: function ParamsWildcardSplatPrefix() {\n const p = paramsPsWildcardSplatPrefixRoute.useParams()\n return (\n
\n

ParamsWildcardSplatPrefix

\n
{JSON.stringify(p)}
\n
\n )\n },\n})\n\nconst paramsPsWildcardSplatSuffixRoute = createRoute({\n getParentRoute: () => paramsPsWildcardRoute,\n path: '{$}suffix',\n component: function ParamsWildcardSplatSuffix() {\n const p = paramsPsWildcardSplatSuffixRoute.useParams()\n return (\n
\n

ParamsWildcardSplatSuffix

\n
{JSON.stringify(p)}
\n
\n )\n },\n})\n\nconst routeTree = rootRoute.addChildren([\n postsRoute.addChildren([postRoute, postsIndexRoute]),\n layoutRoute.addChildren([\n layout2Route.addChildren([layoutARoute, layoutBRoute]),\n ]),\n paramsPsRoute.addChildren([\n paramsPsNamedRoute.addChildren([\n paramsPsNamedFooPrefixRoute,\n paramsPsNamedFooSuffixRoute,\n paramsPsNamedFooRoute,\n paramsPsNamedIndexRoute,\n ]),\n paramsPsWildcardRoute.addChildren([\n paramsPsWildcardSplatRoute,\n paramsPsWildcardSplatPrefixRoute,\n paramsPsWildcardSplatSuffixRoute,\n paramsPsWildcardIndexRoute,\n ]),\n paramsPsIndexRoute,\n ]),\n indexRoute,\n])\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n\n root.render()\n}\n" }, { "path": "e2e/react-router/basic/src/posts.lazy.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createLazyRoute } from '@tanstack/react-router'\n\nexport const Route = createLazyRoute('/posts')({\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic/src/posts.ts", "content": "import axios from 'redaxios'\n\nexport class NotFoundError extends Error {}\n\ntype PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!post) {\n throw new NotFoundError(`Post with id \"${postId}\" not found!`)\n }\n\n return post\n}\n" }, { "path": "e2e/react-router/basic/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport { getTestServerPort } from '@tanstack/router-e2e-utils'\nimport packageJson from '../package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts', exact: true }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n\ntest('Navigating to a post page with viewTransition', async ({ page }) => {\n await page.getByRole('link', { name: 'View Transition', exact: true }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating to a post page with viewTransition types', async ({\n page,\n}) => {\n await page.getByRole('link', { name: 'View Transition types' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Link in SVG does not trigger a full page reload', async ({ page }) => {\n let fullPageLoad = false\n page.on('domcontentloaded', () => {\n fullPageLoad = true\n })\n\n await page.getByRole('link', { name: 'Open posts from SVG' }).click()\n const url = `http://localhost:${PORT}/posts`\n await page.waitForURL(url)\n\n expect(fullPageLoad).toBeFalsy()\n})\n" }, { "path": "e2e/react-router/basic/tests/params.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.describe('params operations + prefix/suffix', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto('/params-ps')\n })\n\n test.describe('named params', () => {\n const NAMED_PARAMS_PAIRS = [\n // Test ID | Expected href\n {\n id: 'l-to-named-foo',\n pathname: '/params-ps/named/foo',\n params: { foo: 'foo' },\n destHeadingId: 'ParamsNamedFoo',\n },\n {\n id: 'l-to-named-prefixfoo',\n pathname: '/params-ps/named/prefixfoo',\n params: { foo: 'foo' },\n destHeadingId: 'ParamsNamedFooPrefix',\n },\n {\n id: 'l-to-named-foosuffix',\n pathname: '/params-ps/named/foosuffix',\n params: { foo: 'foo' },\n destHeadingId: 'ParamsNamedFooSuffix',\n },\n ] satisfies Array<{\n id: string\n pathname: string\n params: Record\n destHeadingId: string\n }>\n\n test.describe('Link', () => {\n NAMED_PARAMS_PAIRS.forEach(({ id, pathname }) => {\n test(`interpolation for testid=\"${id}\" has href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await expect(link).toHaveAttribute('href', pathname)\n })\n })\n\n NAMED_PARAMS_PAIRS.forEach(({ id, pathname }) => {\n test(`navigation for testid=\"${id}\" succeeds to href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await link.click()\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n })\n })\n })\n\n NAMED_PARAMS_PAIRS.forEach(({ pathname, params, destHeadingId }) => {\n test(`on first-load to \"${pathname}\" has correct params`, async ({\n page,\n }) => {\n await page.goto(pathname)\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n\n const headingEl = page.getByRole('heading', { name: destHeadingId })\n await expect(headingEl).toBeVisible()\n\n const paramsEl = page.getByTestId('params-output')\n const paramsText = await paramsEl.innerText()\n const paramsObj = JSON.parse(paramsText)\n expect(paramsObj).toEqual(params)\n })\n })\n })\n\n test.describe('wildcard param', () => {\n const WILDCARD_PARAM_PAIRS = [\n // Test ID | Expected href\n {\n id: 'l-to-wildcard-foo',\n pathname: '/params-ps/wildcard/foo',\n params: { '*': 'foo', _splat: 'foo' },\n destHeadingId: 'ParamsWildcardSplat',\n },\n {\n id: 'l-to-wildcard-prefixfoo',\n pathname: '/params-ps/wildcard/prefixfoo',\n params: { '*': 'foo', _splat: 'foo' },\n destHeadingId: 'ParamsWildcardSplatPrefix',\n },\n {\n id: 'l-to-wildcard-foosuffix',\n pathname: '/params-ps/wildcard/foosuffix',\n params: { '*': 'foo', _splat: 'foo' },\n destHeadingId: 'ParamsWildcardSplatSuffix',\n },\n ] satisfies Array<{\n id: string\n pathname: string\n params: Record\n destHeadingId: string\n }>\n\n test.describe('Link', () => {\n WILDCARD_PARAM_PAIRS.forEach(({ id, pathname }) => {\n test(`interpolation for testid=\"${id}\" has href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await expect(link).toHaveAttribute('href', pathname)\n })\n })\n\n WILDCARD_PARAM_PAIRS.forEach(({ id, pathname }) => {\n test(`navigation for testid=\"${id}\" succeeds to href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await link.click()\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n })\n })\n })\n\n WILDCARD_PARAM_PAIRS.forEach(({ pathname, params, destHeadingId }) => {\n test(`on first-load to \"${pathname}\" has correct params`, async ({\n page,\n }) => {\n await page.goto(pathname)\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n\n const headingEl = page.getByRole('heading', { name: destHeadingId })\n await expect(headingEl).toBeVisible()\n\n const paramsEl = page.getByTestId('params-output')\n const paramsText = await paramsEl.innerText()\n const paramsObj = JSON.parse(paramsText)\n expect(paramsObj).toEqual(params)\n })\n })\n })\n})\n" }, { "path": "e2e/react-router/basic/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [tailwindcss(), react()],\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/index.html", "content": "\n\n \n \n \n Vite App\n \n \n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-esbuild-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"esbuild src/main.tsx --serve=5601 --bundle --outfile=dist/main.js --watch --servedir=.\",\n \"build\": \"esbuild src/main.tsx --bundle --outfile=dist/main.js && tsc --noEmit\",\n \"serve\": \"esbuild src/main.tsx --bundle --outfile=dist/main.js --servedir=.\",\n \"start\": \"dev\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@tanstack/zod-adapter\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"esbuild\": \"^0.27.4\"\n }\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `pnpm run build && pnpm run serve --serve=${PORT} --define:process.env.NODE_ENV=\\\\\"test\\\\\" --define:process.env.EXTERNAL_PORT=\"${EXTERNAL_PORT}\"`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/esbuild.config.js", "content": "import { tanstackRouter } from '@tanstack/router-plugin/esbuild'\n\nexport default {\n // ...\n plugins: [\n tanstackRouter({\n autoCodeSplitting: true,\n }),\n ],\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (process.env.NODE_ENV === 'test') {\n queryURL = `http://localhost:${process.env.EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routeTree.gen.ts", "content": "/* prettier-ignore-start */\n\n/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file is auto-generated by TanStack Router\n\nimport { createFileRoute } from '@tanstack/react-router'\n\n// Import Routes\n\nimport { Route as rootRoute } from './routes/__root'\nimport { Route as PostsImport } from './routes/posts'\nimport { Route as LayoutImport } from './routes/_layout'\nimport { Route as IndexImport } from './routes/index'\nimport { Route as PostsIndexImport } from './routes/posts.index'\nimport { Route as PostsPostIdImport } from './routes/posts.$postId'\nimport { Route as LayoutLayout2Import } from './routes/_layout/_layout-2'\nimport { Route as groupLazyinsideImport } from './routes/(group)/lazyinside'\nimport { Route as groupLayoutImport } from './routes/(group)/_layout'\nimport { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b'\nimport { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a'\nimport { Route as groupLayoutInsideImport } from './routes/(group)/_layout.inside'\n\n// Create Virtual Routes\n\nconst groupImport = createFileRoute('/(group)')()\n\n// Create/Update Routes\n\nconst groupRoute = groupImport.update({\n id: '/(group)',\n getParentRoute: () => rootRoute,\n} as any)\n\nconst PostsRoute = PostsImport.update({\n path: '/posts',\n getParentRoute: () => rootRoute,\n} as any)\n\nconst LayoutRoute = LayoutImport.update({\n id: '/_layout',\n getParentRoute: () => rootRoute,\n} as any)\n\nconst IndexRoute = IndexImport.update({\n path: '/',\n getParentRoute: () => rootRoute,\n} as any)\n\nconst PostsIndexRoute = PostsIndexImport.update({\n path: '/',\n getParentRoute: () => PostsRoute,\n} as any)\n\nconst PostsPostIdRoute = PostsPostIdImport.update({\n path: '/$postId',\n getParentRoute: () => PostsRoute,\n} as any)\n\nconst LayoutLayout2Route = LayoutLayout2Import.update({\n id: '/_layout-2',\n getParentRoute: () => LayoutRoute,\n} as any)\n\nconst groupLazyinsideRoute = groupLazyinsideImport\n .update({\n path: '/lazyinside',\n getParentRoute: () => groupRoute,\n } as any)\n .lazy(() => import('./routes/(group)/lazyinside.lazy').then((d) => d.Route))\n\nconst groupLayoutRoute = groupLayoutImport.update({\n id: '/_layout',\n getParentRoute: () => groupRoute,\n} as any)\n\nconst LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({\n path: '/layout-b',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\n\nconst LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({\n path: '/layout-a',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\n\nconst groupLayoutInsideRoute = groupLayoutInsideImport.update({\n path: '/inside',\n getParentRoute: () => groupLayoutRoute,\n} as any)\n\n// Populate the FileRoutesByPath interface\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexImport\n parentRoute: typeof rootRoute\n }\n '/_layout': {\n id: '/_layout'\n path: ''\n fullPath: ''\n preLoaderRoute: typeof LayoutImport\n parentRoute: typeof rootRoute\n }\n '/posts': {\n id: '/posts'\n path: '/posts'\n fullPath: '/posts'\n preLoaderRoute: typeof PostsImport\n parentRoute: typeof rootRoute\n }\n '/(group)': {\n id: '/(group)'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof groupImport\n parentRoute: typeof rootRoute\n }\n '/(group)/_layout': {\n id: '/(group)/_layout'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof groupLayoutImport\n parentRoute: typeof groupRoute\n }\n '/(group)/lazyinside': {\n id: '/(group)/lazyinside'\n path: '/lazyinside'\n fullPath: '/lazyinside'\n preLoaderRoute: typeof groupLazyinsideImport\n parentRoute: typeof groupImport\n }\n '/_layout/_layout-2': {\n id: '/_layout/_layout-2'\n path: ''\n fullPath: ''\n preLoaderRoute: typeof LayoutLayout2Import\n parentRoute: typeof LayoutImport\n }\n '/posts/$postId': {\n id: '/posts/$postId'\n path: '/$postId'\n fullPath: '/posts/$postId'\n preLoaderRoute: typeof PostsPostIdImport\n parentRoute: typeof PostsImport\n }\n '/posts/': {\n id: '/posts/'\n path: '/'\n fullPath: '/posts/'\n preLoaderRoute: typeof PostsIndexImport\n parentRoute: typeof PostsImport\n }\n '/(group)/_layout/inside': {\n id: '/(group)/_layout/inside'\n path: '/inside'\n fullPath: '/inside'\n preLoaderRoute: typeof groupLayoutInsideImport\n parentRoute: typeof groupLayoutImport\n }\n '/_layout/_layout-2/layout-a': {\n id: '/_layout/_layout-2/layout-a'\n path: '/layout-a'\n fullPath: '/layout-a'\n preLoaderRoute: typeof LayoutLayout2LayoutAImport\n parentRoute: typeof LayoutLayout2Import\n }\n '/_layout/_layout-2/layout-b': {\n id: '/_layout/_layout-2/layout-b'\n path: '/layout-b'\n fullPath: '/layout-b'\n preLoaderRoute: typeof LayoutLayout2LayoutBImport\n parentRoute: typeof LayoutLayout2Import\n }\n }\n}\n\n// Create and export the route tree\n\ninterface LayoutLayout2RouteChildren {\n LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute\n LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute\n}\n\nconst LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = {\n LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute,\n LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute,\n}\n\nconst LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren(\n LayoutLayout2RouteChildren,\n)\n\ninterface LayoutRouteChildren {\n LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n LayoutLayout2Route: LayoutLayout2RouteWithChildren,\n}\n\nconst LayoutRouteWithChildren =\n LayoutRoute._addFileChildren(LayoutRouteChildren)\n\ninterface PostsRouteChildren {\n PostsPostIdRoute: typeof PostsPostIdRoute\n PostsIndexRoute: typeof PostsIndexRoute\n}\n\nconst PostsRouteChildren: PostsRouteChildren = {\n PostsPostIdRoute: PostsPostIdRoute,\n PostsIndexRoute: PostsIndexRoute,\n}\n\nconst PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)\n\ninterface groupLayoutRouteChildren {\n groupLayoutInsideRoute: typeof groupLayoutInsideRoute\n}\n\nconst groupLayoutRouteChildren: groupLayoutRouteChildren = {\n groupLayoutInsideRoute: groupLayoutInsideRoute,\n}\n\nconst groupLayoutRouteWithChildren = groupLayoutRoute._addFileChildren(\n groupLayoutRouteChildren,\n)\n\ninterface groupRouteChildren {\n groupLayoutRoute: typeof groupLayoutRouteWithChildren\n groupLazyinsideRoute: typeof groupLazyinsideRoute\n}\n\nconst groupRouteChildren: groupRouteChildren = {\n groupLayoutRoute: groupLayoutRouteWithChildren,\n groupLazyinsideRoute: groupLazyinsideRoute,\n}\n\nconst groupRouteWithChildren = groupRoute._addFileChildren(groupRouteChildren)\n\nexport interface FileRoutesByFullPath {\n '/': typeof groupLayoutRouteWithChildren\n '': typeof LayoutLayout2RouteWithChildren\n '/posts': typeof PostsRouteWithChildren\n '/lazyinside': typeof groupLazyinsideRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/inside': typeof groupLayoutInsideRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n}\n\nexport interface FileRoutesByTo {\n '/': typeof groupLayoutRouteWithChildren\n '': typeof LayoutLayout2RouteWithChildren\n '/lazyinside': typeof groupLazyinsideRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts': typeof PostsIndexRoute\n '/inside': typeof groupLayoutInsideRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n}\n\nexport interface FileRoutesById {\n __root__: typeof rootRoute\n '/': typeof IndexRoute\n '/_layout': typeof LayoutRouteWithChildren\n '/posts': typeof PostsRouteWithChildren\n '/(group)': typeof groupRouteWithChildren\n '/(group)/_layout': typeof groupLayoutRouteWithChildren\n '/(group)/lazyinside': typeof groupLazyinsideRoute\n '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/(group)/_layout/inside': typeof groupLayoutInsideRoute\n '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute\n '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute\n}\n\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | ''\n | '/posts'\n | '/lazyinside'\n | '/posts/$postId'\n | '/posts/'\n | '/inside'\n | '/layout-a'\n | '/layout-b'\n fileRoutesByTo: FileRoutesByTo\n to:\n | '/'\n | ''\n | '/lazyinside'\n | '/posts/$postId'\n | '/posts'\n | '/inside'\n | '/layout-a'\n | '/layout-b'\n id:\n | '__root__'\n | '/'\n | '/_layout'\n | '/posts'\n | '/(group)'\n | '/(group)/_layout'\n | '/(group)/lazyinside'\n | '/_layout/_layout-2'\n | '/posts/$postId'\n | '/posts/'\n | '/(group)/_layout/inside'\n | '/_layout/_layout-2/layout-a'\n | '/_layout/_layout-2/layout-b'\n fileRoutesById: FileRoutesById\n}\n\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n LayoutRoute: typeof LayoutRouteWithChildren\n PostsRoute: typeof PostsRouteWithChildren\n groupRoute: typeof groupRouteWithChildren\n}\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n LayoutRoute: LayoutRouteWithChildren,\n PostsRoute: PostsRouteWithChildren,\n groupRoute: groupRouteWithChildren,\n}\n\nexport const routeTree = rootRoute\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n\n/* prettier-ignore-end */\n\n/* ROUTE_MANIFEST_START\n{\n \"routes\": {\n \"__root__\": {\n \"filePath\": \"__root.tsx\",\n \"children\": [\n \"/\",\n \"/_layout\",\n \"/posts\",\n \"/(group)\"\n ]\n },\n \"/\": {\n \"filePath\": \"index.tsx\"\n },\n \"/_layout\": {\n \"filePath\": \"_layout.tsx\",\n \"children\": [\n \"/_layout/_layout-2\"\n ]\n },\n \"/posts\": {\n \"filePath\": \"posts.tsx\",\n \"children\": [\n \"/posts/$postId\",\n \"/posts/\"\n ]\n },\n \"/(group)\": {\n \"filePath\": \"(group)\",\n \"children\": [\n \"/(group)/_layout\",\n \"/(group)/lazyinside\"\n ]\n },\n \"/(group)/_layout\": {\n \"filePath\": \"(group)/_layout.tsx\",\n \"parent\": \"/(group)\",\n \"children\": [\n \"/(group)/_layout/inside\"\n ]\n },\n \"/(group)/lazyinside\": {\n \"filePath\": \"(group)/lazyinside.tsx\",\n \"parent\": \"/(group)\"\n },\n \"/_layout/_layout-2\": {\n \"filePath\": \"_layout/_layout-2.tsx\",\n \"parent\": \"/_layout\",\n \"children\": [\n \"/_layout/_layout-2/layout-a\",\n \"/_layout/_layout-2/layout-b\"\n ]\n },\n \"/posts/$postId\": {\n \"filePath\": \"posts.$postId.tsx\",\n \"parent\": \"/posts\"\n },\n \"/posts/\": {\n \"filePath\": \"posts.index.tsx\",\n \"parent\": \"/posts\"\n },\n \"/(group)/_layout/inside\": {\n \"filePath\": \"(group)/_layout.inside.tsx\",\n \"parent\": \"/(group)/_layout\"\n },\n \"/_layout/_layout-2/layout-a\": {\n \"filePath\": \"_layout/_layout-2/layout-a.tsx\",\n \"parent\": \"/_layout/_layout-2\"\n },\n \"/_layout/_layout-2/layout-b\": {\n \"filePath\": \"_layout/_layout-2/layout-b.tsx\",\n \"parent\": \"/_layout/_layout-2\"\n }\n }\n}\nROUTE_MANIFEST_END */\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/(group)/_layout.inside.tsx", "content": "import { createFileRoute, getRouteApi, useSearch } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nconst routeApi = getRouteApi('/(group)/_layout/inside')\n\nexport const Route = createFileRoute('/(group)/_layout/inside')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n component: () => {\n const searchViaHook = useSearch({ from: '/(group)/_layout/inside' })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/(group)/_layout.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/(group)/_layout')({\n component: () => (\n <>\n
/(group)/_layout!
\n \n \n ),\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/(group)/lazyinside.lazy.tsx", "content": "import {\n createLazyFileRoute,\n getRouteApi,\n useSearch,\n} from '@tanstack/react-router'\n\nconst routeApi = getRouteApi('/(group)/lazyinside')\n\nexport const Route = createLazyFileRoute('/(group)/lazyinside')({\n component: () => {\n const searchViaHook = useSearch({ from: '/(group)/lazyinside' })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/(group)/lazyinside.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nexport const Route = createFileRoute('/(group)/lazyinside')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/__root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n Inside Group\n {' '}\n \n Lazy Inside Group\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/_layout/_layout-2/layout-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout/_layout-2/layout-a')({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/_layout/_layout-2/layout-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout/_layout-2/layout-b')({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/_layout/_layout-2.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout/_layout-2')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/_layout.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/index.tsx", "content": "import * as React from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/posts.$postId.tsx", "content": "import * as React from 'react'\nimport { ErrorComponent, createFileRoute } from '@tanstack/react-router'\nimport { fetchPost } from '../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/posts.index.tsx", "content": "import * as React from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/src/routes/posts.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createFileRoute } from '@tanstack/react-router'\nimport { fetchPosts } from '../posts'\n\nexport const Route = createFileRoute('/posts')({\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.goto('/')\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n\ntest('Navigating to a route inside a route group', async ({ page }) => {\n await page.getByTestId('link-to-route-inside-group').click()\n await expect(page.getByTestId('search-via-hook')).toContainText('world')\n await expect(page.getByTestId('search-via-route-hook')).toContainText('world')\n await expect(page.getByTestId('search-via-route-api')).toContainText('world')\n})\n\ntest('Navigating to a lazy route inside a route group', async ({ page }) => {\n await page.getByTestId('link-to-lazy-route-inside-group').click()\n await expect(page.getByTestId('search-via-hook')).toContainText('world')\n await expect(page.getByTestId('search-via-route-hook')).toContainText('world')\n await expect(page.getByTestId('search-via-route-api')).toContainText('world')\n})\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-esbuild-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-file-based/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/basic-file-based/index.html", "content": "\n\n \n \n \n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"pnpm run test:e2e:default\",\n \"test:e2e:default\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@tanstack/zod-adapter\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"combinate\": \"^1.1.11\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\nconst command = `pnpm build && pnpm preview --port ${PORT}`\n\nconsole.info('Running with mode: ', process.env.MODE || 'default')\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n env: {\n MODE: process.env.MODE || '',\n VITE_MODE: process.env.MODE || '',\n VITE_NODE_ENV: 'test',\n VITE_EXTERNAL_PORT: String(EXTERNAL_PORT),\n VITE_SERVER_PORT: String(PORT),\n PORT: String(PORT),\n },\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/components/RenderCounter.tsx", "content": "import { useRef } from 'react'\n\nexport const RenderCounter = () => {\n const renderCounter = useRef(0)\n renderCounter.current = renderCounter.current + 1\n return <>{renderCounter.current}\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n RouterProvider,\n createRouteMask,\n createRouter,\n} from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\nconst mask = createRouteMask({\n routeTree,\n from: '/masks/admin/$userId',\n to: '/masks/public/$username',\n params: (prev) => ({\n username: `user-${prev.userId}`,\n }),\n})\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n routeMasks: [mask],\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as RemountDepsRouteImport } from './routes/remountDeps'\nimport { Route as PostsRouteImport } from './routes/posts'\nimport { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps'\nimport { Route as MasksRouteImport } from './routes/masks'\nimport { Route as LazyErrorRouteImport } from './routes/lazy-error'\nimport { Route as HoverPreloadHashRouteImport } from './routes/hover-preload-hash'\nimport { Route as EditingBRouteImport } from './routes/editing-b'\nimport { Route as EditingARouteImport } from './routes/editing-a'\nimport { Route as ComponentTypesTestRouteImport } from './routes/component-types-test'\nimport { Route as AnchorRouteImport } from './routes/anchor'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as Char45824Char54620Char48124Char44397RouteRouteImport } from './routes/๋Œ€ํ•œ๋ฏผ๊ตญ/route'\nimport { Route as SearchParamsRouteRouteImport } from './routes/search-params/route'\nimport { Route as PathlessLayoutRouteRouteImport } from './routes/pathless-layout/route'\nimport { Route as NonNestedRouteRouteImport } from './routes/non-nested/route'\nimport { Route as FullpathTestRouteRouteImport } from './routes/fullpath-test/route'\nimport { Route as IndexRouteImport } from './routes/index'\nimport { Route as SearchParamsIndexRouteImport } from './routes/search-params/index'\nimport { Route as RelativeIndexRouteImport } from './routes/relative/index'\nimport { Route as RedirectIndexRouteImport } from './routes/redirect/index'\nimport { Route as PostsIndexRouteImport } from './routes/posts.index'\nimport { Route as ParamsPsIndexRouteImport } from './routes/params-ps/index'\nimport { Route as StructuralSharingEnabledRouteImport } from './routes/structural-sharing.$enabled'\nimport { Route as SearchParamsDefaultRouteImport } from './routes/search-params/default'\nimport { Route as RedirectTargetRouteImport } from './routes/redirect/$target'\nimport { Route as PostsPostIdRouteImport } from './routes/posts.$postId'\nimport { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'\nimport { Route as groupLazyinsideRouteImport } from './routes/(group)/lazyinside'\nimport { Route as groupInsideRouteImport } from './routes/(group)/inside'\nimport { Route as groupLayoutRouteImport } from './routes/(group)/_layout'\nimport { Route as anotherGroupOnlyrouteinsideRouteImport } from './routes/(another-group)/onlyrouteinside'\nimport { Route as RelativeUseNavigateRouteRouteImport } from './routes/relative/useNavigate/route'\nimport { Route as RelativeLinkRouteRouteImport } from './routes/relative/link/route'\nimport { Route as PathlessLayoutLayoutRouteRouteImport } from './routes/pathless-layout/_layout/route'\nimport { Route as ParamsPsStrictFalseRouteRouteImport } from './routes/params-ps/strict-false/route'\nimport { Route as ParamsPsNonNestedRouteRouteImport } from './routes/params-ps/non-nested/route'\nimport { Route as NonNestedSuffixRouteRouteImport } from './routes/non-nested/suffix/route'\nimport { Route as NonNestedPrefixRouteRouteImport } from './routes/non-nested/prefix/route'\nimport { Route as NonNestedPathRouteRouteImport } from './routes/non-nested/path/route'\nimport { Route as NonNestedNamedRouteRouteImport } from './routes/non-nested/named/route'\nimport { Route as NonNestedDeepRouteRouteImport } from './routes/non-nested/deep/route'\nimport { Route as FullpathTestLayoutRouteRouteImport } from './routes/fullpath-test/_layout/route'\nimport { Route as RedirectTargetIndexRouteImport } from './routes/redirect/$target/index'\nimport { Route as PathlessLayoutLayoutIndexRouteImport } from './routes/pathless-layout/_layout/index'\nimport { Route as ParamsPsWildcardIndexRouteImport } from './routes/params-ps/wildcard/index'\nimport { Route as ParamsPsNamedIndexRouteImport } from './routes/params-ps/named/index'\nimport { Route as FullpathTestLayoutIndexRouteImport } from './routes/fullpath-test/_layout/index'\nimport { Route as Char45824Char54620Char48124Char44397Char55357Char56960IdRouteImport } from './routes/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€.$id'\nimport { Route as Char45824Char54620Char48124Char44397WildcardSplatRouteImport } from './routes/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard.$'\nimport { Route as RelativeUseNavigateRelativeUseNavigateBRouteImport } from './routes/relative/useNavigate/relative-useNavigate-b'\nimport { Route as RelativeUseNavigateRelativeUseNavigateARouteImport } from './routes/relative/useNavigate/relative-useNavigate-a'\nimport { Route as RelativeLinkRelativeLinkBRouteImport } from './routes/relative/link/relative-link-b'\nimport { Route as RelativeLinkRelativeLinkARouteImport } from './routes/relative/link/relative-link-a'\nimport { Route as RedirectPreloadThirdRouteImport } from './routes/redirect/preload/third'\nimport { Route as RedirectPreloadSecondRouteImport } from './routes/redirect/preload/second'\nimport { Route as RedirectPreloadFirstRouteImport } from './routes/redirect/preload/first'\nimport { Route as RedirectTargetViaRouteApiRedirectLoaderRouteImport } from './routes/redirect/$target/via-routeApi-redirect-loader'\nimport { Route as RedirectTargetViaRouteApiRedirectBeforeLoadRouteImport } from './routes/redirect/$target/via-routeApi-redirect-beforeLoad'\nimport { Route as RedirectTargetViaRouteRedirectLoaderRouteImport } from './routes/redirect/$target/via-route-redirect-loader'\nimport { Route as RedirectTargetViaRouteRedirectBeforeLoadRouteImport } from './routes/redirect/$target/via-route-redirect-beforeLoad'\nimport { Route as RedirectTargetViaLoaderRouteImport } from './routes/redirect/$target/via-loader'\nimport { Route as RedirectTargetViaBeforeLoadRouteImport } from './routes/redirect/$target/via-beforeLoad'\nimport { Route as RedirectTargetDestinationRouteImport } from './routes/redirect/$target/destination'\nimport { Route as PostsPostIdEditRouteImport } from './routes/posts_.$postId.edit'\nimport { Route as PathlessLayoutLayoutChildRouteImport } from './routes/pathless-layout/_layout/child'\nimport { Route as ParamsSingleValueRouteImport } from './routes/params.single.$value'\nimport { Route as ParamsPsWildcardChar123Char125suffixAtChar45824RouteImport } from './routes/params-ps/wildcard/{$}suffix@๋Œ€'\nimport { Route as ParamsPsWildcardChar123Char125suffixRouteImport } from './routes/params-ps/wildcard/{$}suffix'\nimport { Route as ParamsPsWildcardPrefixChar123Char125RouteImport } from './routes/params-ps/wildcard/prefix{$}'\nimport { Route as ParamsPsWildcardPrefixAtChar45824Char123Char125RouteImport } from './routes/params-ps/wildcard/prefix@๋Œ€{$}'\nimport { Route as ParamsPsWildcardSplatRouteImport } from './routes/params-ps/wildcard/$'\nimport { Route as ParamsPsNamedChar123fooChar125suffixRouteImport } from './routes/params-ps/named/{$foo}suffix'\nimport { Route as ParamsPsNamedPrefixChar123fooChar125RouteImport } from './routes/params-ps/named/prefix{$foo}'\nimport { Route as MasksPublicUsernameRouteImport } from './routes/masks.public.$username'\nimport { Route as MasksAdminUserIdRouteImport } from './routes/masks.admin.$userId'\nimport { Route as FullpathTestLayoutIdRouteImport } from './routes/fullpath-test/_layout/$id'\nimport { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b'\nimport { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a'\nimport { Route as groupSubfolderInsideRouteImport } from './routes/(group)/subfolder/inside'\nimport { Route as groupLayoutInsidelayoutRouteImport } from './routes/(group)/_layout.insidelayout'\nimport { Route as ParamsPsStrictFalseVersionRouteRouteImport } from './routes/params-ps/strict-false/$version.route'\nimport { Route as ParamsPsNonNestedFooRouteRouteImport } from './routes/params-ps/non-nested/$foo_/route'\nimport { Route as ParamsPsNamedFooRouteRouteImport } from './routes/params-ps/named/$foo/route'\nimport { Route as NonNestedSuffixChar123bazChar125suffixRouteRouteImport } from './routes/non-nested/suffix/{$baz}suffix.route'\nimport { Route as NonNestedPrefixPrefixChar123bazChar125RouteRouteImport } from './routes/non-nested/prefix/prefix{$baz}.route'\nimport { Route as NonNestedPathBazRouteRouteImport } from './routes/non-nested/path/baz.route'\nimport { Route as NonNestedNamedBazRouteRouteImport } from './routes/non-nested/named/$baz.route'\nimport { Route as NonNestedDeepBazRouteRouteImport } from './routes/non-nested/deep/$baz.route'\nimport { Route as RelativeUseNavigateWithSearchIndexRouteImport } from './routes/relative/useNavigate/with-search/index'\nimport { Route as RelativeUseNavigatePathIndexRouteImport } from './routes/relative/useNavigate/path/index'\nimport { Route as RelativeUseNavigateNestedIndexRouteImport } from './routes/relative/useNavigate/nested/index'\nimport { Route as RelativeLinkWithSearchIndexRouteImport } from './routes/relative/link/with-search/index'\nimport { Route as RelativeLinkPathIndexRouteImport } from './routes/relative/link/path/index'\nimport { Route as RelativeLinkNestedIndexRouteImport } from './routes/relative/link/nested/index'\nimport { Route as NonNestedSuffixChar123bazChar125suffixIndexRouteImport } from './routes/non-nested/suffix/{$baz}suffix.index'\nimport { Route as NonNestedPrefixPrefixChar123bazChar125IndexRouteImport } from './routes/non-nested/prefix/prefix{$baz}.index'\nimport { Route as NonNestedPathBazIndexRouteImport } from './routes/non-nested/path/baz.index'\nimport { Route as NonNestedNamedBazIndexRouteImport } from './routes/non-nested/named/$baz.index'\nimport { Route as NonNestedDeepBazIndexRouteImport } from './routes/non-nested/deep/$baz.index'\nimport { Route as ParamsPsNonNestedFooBarRouteImport } from './routes/params-ps/non-nested/$foo_/$bar'\nimport { Route as NonNestedSuffixChar123bazChar125suffixBarRouteImport } from './routes/non-nested/suffix/{$baz}suffix_.bar'\nimport { Route as NonNestedSuffixChar123bazChar125suffixFooRouteImport } from './routes/non-nested/suffix/{$baz}suffix.foo'\nimport { Route as NonNestedPrefixPrefixChar123bazChar125BarRouteImport } from './routes/non-nested/prefix/prefix{$baz}_.bar'\nimport { Route as NonNestedPrefixPrefixChar123bazChar125FooRouteImport } from './routes/non-nested/prefix/prefix{$baz}.foo'\nimport { Route as NonNestedPathBazBarRouteImport } from './routes/non-nested/path/baz_.bar'\nimport { Route as NonNestedPathBazFooRouteImport } from './routes/non-nested/path/baz.foo'\nimport { Route as NonNestedNamedBazBarRouteImport } from './routes/non-nested/named/$baz_.bar'\nimport { Route as NonNestedNamedBazFooRouteImport } from './routes/non-nested/named/$baz.foo'\nimport { Route as ParamsPsNamedFooBarRouteRouteImport } from './routes/params-ps/named/$foo/$bar.route'\nimport { Route as NonNestedDeepBazBarRouteRouteImport } from './routes/non-nested/deep/$baz_.bar.route'\nimport { Route as RelativeUseNavigatePathPathIndexRouteImport } from './routes/relative/useNavigate/path/$path/index'\nimport { Route as RelativeUseNavigateNestedDeepIndexRouteImport } from './routes/relative/useNavigate/nested/deep/index'\nimport { Route as RelativeLinkPathPathIndexRouteImport } from './routes/relative/link/path/$path/index'\nimport { Route as RelativeLinkNestedDeepIndexRouteImport } from './routes/relative/link/nested/deep/index'\nimport { Route as NonNestedDeepBazBarIndexRouteImport } from './routes/non-nested/deep/$baz_.bar.index'\nimport { Route as ParamsPsNamedFooBarBazRouteImport } from './routes/params-ps/named/$foo/$bar.$baz'\nimport { Route as NonNestedDeepBazBarQuxRouteImport } from './routes/non-nested/deep/$baz_.bar_.qux'\nimport { Route as NonNestedDeepBazBarFooRouteRouteImport } from './routes/non-nested/deep/$baz_.bar.$foo.route'\nimport { Route as NonNestedDeepBazBarFooIndexRouteImport } from './routes/non-nested/deep/$baz_.bar.$foo.index'\nimport { Route as NonNestedDeepBazBarFooQuxRouteImport } from './routes/non-nested/deep/$baz_.bar.$foo_.qux'\n\nconst RemountDepsRoute = RemountDepsRouteImport.update({\n id: '/remountDeps',\n path: '/remountDeps',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsRoute = PostsRouteImport.update({\n id: '/posts',\n path: '/posts',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst NotRemountDepsRoute = NotRemountDepsRouteImport.update({\n id: '/notRemountDeps',\n path: '/notRemountDeps',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst MasksRoute = MasksRouteImport.update({\n id: '/masks',\n path: '/masks',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst LazyErrorRoute = LazyErrorRouteImport.update({\n id: '/lazy-error',\n path: '/lazy-error',\n getParentRoute: () => rootRouteImport,\n} as any).lazy(() => import('./routes/lazy-error.lazy').then((d) => d.Route))\nconst HoverPreloadHashRoute = HoverPreloadHashRouteImport.update({\n id: '/hover-preload-hash',\n path: '/hover-preload-hash',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst EditingBRoute = EditingBRouteImport.update({\n id: '/editing-b',\n path: '/editing-b',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst EditingARoute = EditingARouteImport.update({\n id: '/editing-a',\n path: '/editing-a',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ComponentTypesTestRoute = ComponentTypesTestRouteImport.update({\n id: '/component-types-test',\n path: '/component-types-test',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst AnchorRoute = AnchorRouteImport.update({\n id: '/anchor',\n path: '/anchor',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutRoute = LayoutRouteImport.update({\n id: '/_layout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst Char45824Char54620Char48124Char44397RouteRoute =\n Char45824Char54620Char48124Char44397RouteRouteImport.update({\n id: '/๋Œ€ํ•œ๋ฏผ๊ตญ',\n path: '/๋Œ€ํ•œ๋ฏผ๊ตญ',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst SearchParamsRouteRoute = SearchParamsRouteRouteImport.update({\n id: '/search-params',\n path: '/search-params',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PathlessLayoutRouteRoute = PathlessLayoutRouteRouteImport.update({\n id: '/pathless-layout',\n path: '/pathless-layout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst NonNestedRouteRoute = NonNestedRouteRouteImport.update({\n id: '/non-nested',\n path: '/non-nested',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst FullpathTestRouteRoute = FullpathTestRouteRouteImport.update({\n id: '/fullpath-test',\n path: '/fullpath-test',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst SearchParamsIndexRoute = SearchParamsIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => SearchParamsRouteRoute,\n} as any)\nconst RelativeIndexRoute = RelativeIndexRouteImport.update({\n id: '/relative/',\n path: '/relative/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst RedirectIndexRoute = RedirectIndexRouteImport.update({\n id: '/redirect/',\n path: '/redirect/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsIndexRoute = PostsIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => PostsRoute,\n} as any)\nconst ParamsPsIndexRoute = ParamsPsIndexRouteImport.update({\n id: '/params-ps/',\n path: '/params-ps/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst StructuralSharingEnabledRoute =\n StructuralSharingEnabledRouteImport.update({\n id: '/structural-sharing/$enabled',\n path: '/structural-sharing/$enabled',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst SearchParamsDefaultRoute = SearchParamsDefaultRouteImport.update({\n id: '/default',\n path: '/default',\n getParentRoute: () => SearchParamsRouteRoute,\n} as any)\nconst RedirectTargetRoute = RedirectTargetRouteImport.update({\n id: '/redirect/$target',\n path: '/redirect/$target',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsPostIdRoute = PostsPostIdRouteImport.update({\n id: '/$postId',\n path: '/$postId',\n getParentRoute: () => PostsRoute,\n} as any)\nconst LayoutLayout2Route = LayoutLayout2RouteImport.update({\n id: '/_layout-2',\n getParentRoute: () => LayoutRoute,\n} as any)\nconst groupLazyinsideRoute = groupLazyinsideRouteImport\n .update({\n id: '/(group)/lazyinside',\n path: '/lazyinside',\n getParentRoute: () => rootRouteImport,\n } as any)\n .lazy(() => import('./routes/(group)/lazyinside.lazy').then((d) => d.Route))\nconst groupInsideRoute = groupInsideRouteImport.update({\n id: '/(group)/inside',\n path: '/inside',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst groupLayoutRoute = groupLayoutRouteImport.update({\n id: '/(group)/_layout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst anotherGroupOnlyrouteinsideRoute =\n anotherGroupOnlyrouteinsideRouteImport.update({\n id: '/(another-group)/onlyrouteinside',\n path: '/onlyrouteinside',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst RelativeUseNavigateRouteRoute =\n RelativeUseNavigateRouteRouteImport.update({\n id: '/relative/useNavigate',\n path: '/relative/useNavigate',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst RelativeLinkRouteRoute = RelativeLinkRouteRouteImport.update({\n id: '/relative/link',\n path: '/relative/link',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PathlessLayoutLayoutRouteRoute =\n PathlessLayoutLayoutRouteRouteImport.update({\n id: '/_layout',\n getParentRoute: () => PathlessLayoutRouteRoute,\n } as any)\nconst ParamsPsStrictFalseRouteRoute =\n ParamsPsStrictFalseRouteRouteImport.update({\n id: '/params-ps/strict-false',\n path: '/params-ps/strict-false',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst ParamsPsNonNestedRouteRoute = ParamsPsNonNestedRouteRouteImport.update({\n id: '/params-ps/non-nested',\n path: '/params-ps/non-nested',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst NonNestedSuffixRouteRoute = NonNestedSuffixRouteRouteImport.update({\n id: '/suffix',\n path: '/suffix',\n getParentRoute: () => NonNestedRouteRoute,\n} as any)\nconst NonNestedPrefixRouteRoute = NonNestedPrefixRouteRouteImport.update({\n id: '/prefix',\n path: '/prefix',\n getParentRoute: () => NonNestedRouteRoute,\n} as any)\nconst NonNestedPathRouteRoute = NonNestedPathRouteRouteImport.update({\n id: '/path',\n path: '/path',\n getParentRoute: () => NonNestedRouteRoute,\n} as any)\nconst NonNestedNamedRouteRoute = NonNestedNamedRouteRouteImport.update({\n id: '/named',\n path: '/named',\n getParentRoute: () => NonNestedRouteRoute,\n} as any)\nconst NonNestedDeepRouteRoute = NonNestedDeepRouteRouteImport.update({\n id: '/deep',\n path: '/deep',\n getParentRoute: () => NonNestedRouteRoute,\n} as any)\nconst FullpathTestLayoutRouteRoute = FullpathTestLayoutRouteRouteImport.update({\n id: '/_layout',\n getParentRoute: () => FullpathTestRouteRoute,\n} as any)\nconst RedirectTargetIndexRoute = RedirectTargetIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => RedirectTargetRoute,\n} as any)\nconst PathlessLayoutLayoutIndexRoute =\n PathlessLayoutLayoutIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => PathlessLayoutLayoutRouteRoute,\n } as any)\nconst ParamsPsWildcardIndexRoute = ParamsPsWildcardIndexRouteImport.update({\n id: '/params-ps/wildcard/',\n path: '/params-ps/wildcard/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ParamsPsNamedIndexRoute = ParamsPsNamedIndexRouteImport.update({\n id: '/params-ps/named/',\n path: '/params-ps/named/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst FullpathTestLayoutIndexRoute = FullpathTestLayoutIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => FullpathTestLayoutRouteRoute,\n} as any)\nconst Char45824Char54620Char48124Char44397Char55357Char56960IdRoute =\n Char45824Char54620Char48124Char44397Char55357Char56960IdRouteImport.update({\n id: '/๐Ÿš€/$id',\n path: '/๐Ÿš€/$id',\n getParentRoute: () => Char45824Char54620Char48124Char44397RouteRoute,\n } as any)\nconst Char45824Char54620Char48124Char44397WildcardSplatRoute =\n Char45824Char54620Char48124Char44397WildcardSplatRouteImport.update({\n id: '/wildcard/$',\n path: '/wildcard/$',\n getParentRoute: () => Char45824Char54620Char48124Char44397RouteRoute,\n } as any)\nconst RelativeUseNavigateRelativeUseNavigateBRoute =\n RelativeUseNavigateRelativeUseNavigateBRouteImport.update({\n id: '/relative-useNavigate-b',\n path: '/relative-useNavigate-b',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeUseNavigateRelativeUseNavigateARoute =\n RelativeUseNavigateRelativeUseNavigateARouteImport.update({\n id: '/relative-useNavigate-a',\n path: '/relative-useNavigate-a',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeLinkRelativeLinkBRoute =\n RelativeLinkRelativeLinkBRouteImport.update({\n id: '/relative-link-b',\n path: '/relative-link-b',\n getParentRoute: () => RelativeLinkRouteRoute,\n } as any)\nconst RelativeLinkRelativeLinkARoute =\n RelativeLinkRelativeLinkARouteImport.update({\n id: '/relative-link-a',\n path: '/relative-link-a',\n getParentRoute: () => RelativeLinkRouteRoute,\n } as any)\nconst RedirectPreloadThirdRoute = RedirectPreloadThirdRouteImport.update({\n id: '/redirect/preload/third',\n path: '/redirect/preload/third',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst RedirectPreloadSecondRoute = RedirectPreloadSecondRouteImport.update({\n id: '/redirect/preload/second',\n path: '/redirect/preload/second',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst RedirectPreloadFirstRoute = RedirectPreloadFirstRouteImport.update({\n id: '/redirect/preload/first',\n path: '/redirect/preload/first',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst RedirectTargetViaRouteApiRedirectLoaderRoute =\n RedirectTargetViaRouteApiRedirectLoaderRouteImport.update({\n id: '/via-routeApi-redirect-loader',\n path: '/via-routeApi-redirect-loader',\n getParentRoute: () => RedirectTargetRoute,\n } as any)\nconst RedirectTargetViaRouteApiRedirectBeforeLoadRoute =\n RedirectTargetViaRouteApiRedirectBeforeLoadRouteImport.update({\n id: '/via-routeApi-redirect-beforeLoad',\n path: '/via-routeApi-redirect-beforeLoad',\n getParentRoute: () => RedirectTargetRoute,\n } as any)\nconst RedirectTargetViaRouteRedirectLoaderRoute =\n RedirectTargetViaRouteRedirectLoaderRouteImport.update({\n id: '/via-route-redirect-loader',\n path: '/via-route-redirect-loader',\n getParentRoute: () => RedirectTargetRoute,\n } as any)\nconst RedirectTargetViaRouteRedirectBeforeLoadRoute =\n RedirectTargetViaRouteRedirectBeforeLoadRouteImport.update({\n id: '/via-route-redirect-beforeLoad',\n path: '/via-route-redirect-beforeLoad',\n getParentRoute: () => RedirectTargetRoute,\n } as any)\nconst RedirectTargetViaLoaderRoute = RedirectTargetViaLoaderRouteImport.update({\n id: '/via-loader',\n path: '/via-loader',\n getParentRoute: () => RedirectTargetRoute,\n} as any)\nconst RedirectTargetViaBeforeLoadRoute =\n RedirectTargetViaBeforeLoadRouteImport.update({\n id: '/via-beforeLoad',\n path: '/via-beforeLoad',\n getParentRoute: () => RedirectTargetRoute,\n } as any)\nconst RedirectTargetDestinationRoute =\n RedirectTargetDestinationRouteImport.update({\n id: '/destination',\n path: '/destination',\n getParentRoute: () => RedirectTargetRoute,\n } as any)\nconst PostsPostIdEditRoute = PostsPostIdEditRouteImport.update({\n id: '/posts_/$postId/edit',\n path: '/posts/$postId/edit',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PathlessLayoutLayoutChildRoute =\n PathlessLayoutLayoutChildRouteImport.update({\n id: '/child',\n path: '/child',\n getParentRoute: () => PathlessLayoutLayoutRouteRoute,\n } as any)\nconst ParamsSingleValueRoute = ParamsSingleValueRouteImport.update({\n id: '/params/single/$value',\n path: '/params/single/$value',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ParamsPsWildcardChar123Char125suffixAtChar45824Route =\n ParamsPsWildcardChar123Char125suffixAtChar45824RouteImport.update({\n id: '/params-ps/wildcard/{$}suffix@๋Œ€',\n path: '/params-ps/wildcard/{$}suffix@๋Œ€',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst ParamsPsWildcardChar123Char125suffixRoute =\n ParamsPsWildcardChar123Char125suffixRouteImport.update({\n id: '/params-ps/wildcard/{$}suffix',\n path: '/params-ps/wildcard/{$}suffix',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst ParamsPsWildcardPrefixChar123Char125Route =\n ParamsPsWildcardPrefixChar123Char125RouteImport.update({\n id: '/params-ps/wildcard/prefix{$}',\n path: '/params-ps/wildcard/prefix{$}',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst ParamsPsWildcardPrefixAtChar45824Char123Char125Route =\n ParamsPsWildcardPrefixAtChar45824Char123Char125RouteImport.update({\n id: '/params-ps/wildcard/prefix@๋Œ€{$}',\n path: '/params-ps/wildcard/prefix@๋Œ€{$}',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst ParamsPsWildcardSplatRoute = ParamsPsWildcardSplatRouteImport.update({\n id: '/params-ps/wildcard/$',\n path: '/params-ps/wildcard/$',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ParamsPsNamedChar123fooChar125suffixRoute =\n ParamsPsNamedChar123fooChar125suffixRouteImport.update({\n id: '/params-ps/named/{$foo}suffix',\n path: '/params-ps/named/{$foo}suffix',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst ParamsPsNamedPrefixChar123fooChar125Route =\n ParamsPsNamedPrefixChar123fooChar125RouteImport.update({\n id: '/params-ps/named/prefix{$foo}',\n path: '/params-ps/named/prefix{$foo}',\n getParentRoute: () => rootRouteImport,\n } as any)\nconst MasksPublicUsernameRoute = MasksPublicUsernameRouteImport.update({\n id: '/public/$username',\n path: '/public/$username',\n getParentRoute: () => MasksRoute,\n} as any)\nconst MasksAdminUserIdRoute = MasksAdminUserIdRouteImport.update({\n id: '/admin/$userId',\n path: '/admin/$userId',\n getParentRoute: () => MasksRoute,\n} as any)\nconst FullpathTestLayoutIdRoute = FullpathTestLayoutIdRouteImport.update({\n id: '/$id',\n path: '/$id',\n getParentRoute: () => FullpathTestLayoutRouteRoute,\n} as any)\nconst LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBRouteImport.update({\n id: '/layout-b',\n path: '/layout-b',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\nconst LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({\n id: '/layout-a',\n path: '/layout-a',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\nconst groupSubfolderInsideRoute = groupSubfolderInsideRouteImport.update({\n id: '/(group)/subfolder/inside',\n path: '/subfolder/inside',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst groupLayoutInsidelayoutRoute = groupLayoutInsidelayoutRouteImport.update({\n id: '/insidelayout',\n path: '/insidelayout',\n getParentRoute: () => groupLayoutRoute,\n} as any)\nconst ParamsPsStrictFalseVersionRouteRoute =\n ParamsPsStrictFalseVersionRouteRouteImport.update({\n id: '/$version',\n path: '/$version',\n getParentRoute: () => ParamsPsStrictFalseRouteRoute,\n } as any)\nconst ParamsPsNonNestedFooRouteRoute =\n ParamsPsNonNestedFooRouteRouteImport.update({\n id: '/$foo_',\n path: '/$foo',\n getParentRoute: () => ParamsPsNonNestedRouteRoute,\n } as any)\nconst ParamsPsNamedFooRouteRoute = ParamsPsNamedFooRouteRouteImport.update({\n id: '/params-ps/named/$foo',\n path: '/params-ps/named/$foo',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst NonNestedSuffixChar123bazChar125suffixRouteRoute =\n NonNestedSuffixChar123bazChar125suffixRouteRouteImport.update({\n id: '/{$baz}suffix',\n path: '/{$baz}suffix',\n getParentRoute: () => NonNestedSuffixRouteRoute,\n } as any)\nconst NonNestedPrefixPrefixChar123bazChar125RouteRoute =\n NonNestedPrefixPrefixChar123bazChar125RouteRouteImport.update({\n id: '/prefix{$baz}',\n path: '/prefix{$baz}',\n getParentRoute: () => NonNestedPrefixRouteRoute,\n } as any)\nconst NonNestedPathBazRouteRoute = NonNestedPathBazRouteRouteImport.update({\n id: '/baz',\n path: '/baz',\n getParentRoute: () => NonNestedPathRouteRoute,\n} as any)\nconst NonNestedNamedBazRouteRoute = NonNestedNamedBazRouteRouteImport.update({\n id: '/$baz',\n path: '/$baz',\n getParentRoute: () => NonNestedNamedRouteRoute,\n} as any)\nconst NonNestedDeepBazRouteRoute = NonNestedDeepBazRouteRouteImport.update({\n id: '/$baz',\n path: '/$baz',\n getParentRoute: () => NonNestedDeepRouteRoute,\n} as any)\nconst RelativeUseNavigateWithSearchIndexRoute =\n RelativeUseNavigateWithSearchIndexRouteImport.update({\n id: '/with-search/',\n path: '/with-search/',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeUseNavigatePathIndexRoute =\n RelativeUseNavigatePathIndexRouteImport.update({\n id: '/path/',\n path: '/path/',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeUseNavigateNestedIndexRoute =\n RelativeUseNavigateNestedIndexRouteImport.update({\n id: '/nested/',\n path: '/nested/',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeLinkWithSearchIndexRoute =\n RelativeLinkWithSearchIndexRouteImport.update({\n id: '/with-search/',\n path: '/with-search/',\n getParentRoute: () => RelativeLinkRouteRoute,\n } as any)\nconst RelativeLinkPathIndexRoute = RelativeLinkPathIndexRouteImport.update({\n id: '/path/',\n path: '/path/',\n getParentRoute: () => RelativeLinkRouteRoute,\n} as any)\nconst RelativeLinkNestedIndexRoute = RelativeLinkNestedIndexRouteImport.update({\n id: '/nested/',\n path: '/nested/',\n getParentRoute: () => RelativeLinkRouteRoute,\n} as any)\nconst NonNestedSuffixChar123bazChar125suffixIndexRoute =\n NonNestedSuffixChar123bazChar125suffixIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedSuffixChar123bazChar125suffixRouteRoute,\n } as any)\nconst NonNestedPrefixPrefixChar123bazChar125IndexRoute =\n NonNestedPrefixPrefixChar123bazChar125IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedPrefixPrefixChar123bazChar125RouteRoute,\n } as any)\nconst NonNestedPathBazIndexRoute = NonNestedPathBazIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedPathBazRouteRoute,\n} as any)\nconst NonNestedNamedBazIndexRoute = NonNestedNamedBazIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedNamedBazRouteRoute,\n} as any)\nconst NonNestedDeepBazIndexRoute = NonNestedDeepBazIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedDeepBazRouteRoute,\n} as any)\nconst ParamsPsNonNestedFooBarRoute = ParamsPsNonNestedFooBarRouteImport.update({\n id: '/$bar',\n path: '/$bar',\n getParentRoute: () => ParamsPsNonNestedFooRouteRoute,\n} as any)\nconst NonNestedSuffixChar123bazChar125suffixBarRoute =\n NonNestedSuffixChar123bazChar125suffixBarRouteImport.update({\n id: '/{$baz}suffix_/bar',\n path: '/{$baz}suffix/bar',\n getParentRoute: () => NonNestedSuffixRouteRoute,\n } as any)\nconst NonNestedSuffixChar123bazChar125suffixFooRoute =\n NonNestedSuffixChar123bazChar125suffixFooRouteImport.update({\n id: '/foo',\n path: '/foo',\n getParentRoute: () => NonNestedSuffixChar123bazChar125suffixRouteRoute,\n } as any)\nconst NonNestedPrefixPrefixChar123bazChar125BarRoute =\n NonNestedPrefixPrefixChar123bazChar125BarRouteImport.update({\n id: '/prefix{$baz}_/bar',\n path: '/prefix{$baz}/bar',\n getParentRoute: () => NonNestedPrefixRouteRoute,\n } as any)\nconst NonNestedPrefixPrefixChar123bazChar125FooRoute =\n NonNestedPrefixPrefixChar123bazChar125FooRouteImport.update({\n id: '/foo',\n path: '/foo',\n getParentRoute: () => NonNestedPrefixPrefixChar123bazChar125RouteRoute,\n } as any)\nconst NonNestedPathBazBarRoute = NonNestedPathBazBarRouteImport.update({\n id: '/baz_/bar',\n path: '/baz/bar',\n getParentRoute: () => NonNestedPathRouteRoute,\n} as any)\nconst NonNestedPathBazFooRoute = NonNestedPathBazFooRouteImport.update({\n id: '/foo',\n path: '/foo',\n getParentRoute: () => NonNestedPathBazRouteRoute,\n} as any)\nconst NonNestedNamedBazBarRoute = NonNestedNamedBazBarRouteImport.update({\n id: '/$baz_/bar',\n path: '/$baz/bar',\n getParentRoute: () => NonNestedNamedRouteRoute,\n} as any)\nconst NonNestedNamedBazFooRoute = NonNestedNamedBazFooRouteImport.update({\n id: '/foo',\n path: '/foo',\n getParentRoute: () => NonNestedNamedBazRouteRoute,\n} as any)\nconst ParamsPsNamedFooBarRouteRoute =\n ParamsPsNamedFooBarRouteRouteImport.update({\n id: '/$bar',\n path: '/$bar',\n getParentRoute: () => ParamsPsNamedFooRouteRoute,\n } as any)\nconst NonNestedDeepBazBarRouteRoute =\n NonNestedDeepBazBarRouteRouteImport.update({\n id: '/$baz_/bar',\n path: '/$baz/bar',\n getParentRoute: () => NonNestedDeepRouteRoute,\n } as any)\nconst RelativeUseNavigatePathPathIndexRoute =\n RelativeUseNavigatePathPathIndexRouteImport.update({\n id: '/path/$path/',\n path: '/path/$path/',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeUseNavigateNestedDeepIndexRoute =\n RelativeUseNavigateNestedDeepIndexRouteImport.update({\n id: '/nested/deep/',\n path: '/nested/deep/',\n getParentRoute: () => RelativeUseNavigateRouteRoute,\n } as any)\nconst RelativeLinkPathPathIndexRoute =\n RelativeLinkPathPathIndexRouteImport.update({\n id: '/path/$path/',\n path: '/path/$path/',\n getParentRoute: () => RelativeLinkRouteRoute,\n } as any)\nconst RelativeLinkNestedDeepIndexRoute =\n RelativeLinkNestedDeepIndexRouteImport.update({\n id: '/nested/deep/',\n path: '/nested/deep/',\n getParentRoute: () => RelativeLinkRouteRoute,\n } as any)\nconst NonNestedDeepBazBarIndexRoute =\n NonNestedDeepBazBarIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedDeepBazBarRouteRoute,\n } as any)\nconst ParamsPsNamedFooBarBazRoute = ParamsPsNamedFooBarBazRouteImport.update({\n id: '/$baz',\n path: '/$baz',\n getParentRoute: () => ParamsPsNamedFooBarRouteRoute,\n} as any)\nconst NonNestedDeepBazBarQuxRoute = NonNestedDeepBazBarQuxRouteImport.update({\n id: '/$baz_/bar_/qux',\n path: '/$baz/bar/qux',\n getParentRoute: () => NonNestedDeepRouteRoute,\n} as any)\nconst NonNestedDeepBazBarFooRouteRoute =\n NonNestedDeepBazBarFooRouteRouteImport.update({\n id: '/$foo',\n path: '/$foo',\n getParentRoute: () => NonNestedDeepBazBarRouteRoute,\n } as any)\nconst NonNestedDeepBazBarFooIndexRoute =\n NonNestedDeepBazBarFooIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => NonNestedDeepBazBarFooRouteRoute,\n } as any)\nconst NonNestedDeepBazBarFooQuxRoute =\n NonNestedDeepBazBarFooQuxRouteImport.update({\n id: '/$foo_/qux',\n path: '/$foo/qux',\n getParentRoute: () => NonNestedDeepBazBarRouteRoute,\n } as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/fullpath-test': typeof FullpathTestLayoutRouteRouteWithChildren\n '/non-nested': typeof NonNestedRouteRouteWithChildren\n '/pathless-layout': typeof PathlessLayoutLayoutRouteRouteWithChildren\n '/search-params': typeof SearchParamsRouteRouteWithChildren\n '/๋Œ€ํ•œ๋ฏผ๊ตญ': typeof Char45824Char54620Char48124Char44397RouteRouteWithChildren\n '/anchor': typeof AnchorRoute\n '/component-types-test': typeof ComponentTypesTestRoute\n '/editing-a': typeof EditingARoute\n '/editing-b': typeof EditingBRoute\n '/hover-preload-hash': typeof HoverPreloadHashRoute\n '/lazy-error': typeof LazyErrorRoute\n '/masks': typeof MasksRouteWithChildren\n '/notRemountDeps': typeof NotRemountDepsRoute\n '/posts': typeof PostsRouteWithChildren\n '/remountDeps': typeof RemountDepsRoute\n '/non-nested/deep': typeof NonNestedDeepRouteRouteWithChildren\n '/non-nested/named': typeof NonNestedNamedRouteRouteWithChildren\n '/non-nested/path': typeof NonNestedPathRouteRouteWithChildren\n '/non-nested/prefix': typeof NonNestedPrefixRouteRouteWithChildren\n '/non-nested/suffix': typeof NonNestedSuffixRouteRouteWithChildren\n '/params-ps/non-nested': typeof ParamsPsNonNestedRouteRouteWithChildren\n '/params-ps/strict-false': typeof ParamsPsStrictFalseRouteRouteWithChildren\n '/relative/link': typeof RelativeLinkRouteRouteWithChildren\n '/relative/useNavigate': typeof RelativeUseNavigateRouteRouteWithChildren\n '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute\n '/inside': typeof groupInsideRoute\n '/lazyinside': typeof groupLazyinsideRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/redirect/$target': typeof RedirectTargetRouteWithChildren\n '/search-params/default': typeof SearchParamsDefaultRoute\n '/structural-sharing/$enabled': typeof StructuralSharingEnabledRoute\n '/params-ps/': typeof ParamsPsIndexRoute\n '/posts/': typeof PostsIndexRoute\n '/redirect/': typeof RedirectIndexRoute\n '/relative/': typeof RelativeIndexRoute\n '/search-params/': typeof SearchParamsIndexRoute\n '/non-nested/deep/$baz': typeof NonNestedDeepBazRouteRouteWithChildren\n '/non-nested/named/$baz': typeof NonNestedNamedBazRouteRouteWithChildren\n '/non-nested/path/baz': typeof NonNestedPathBazRouteRouteWithChildren\n '/non-nested/prefix/prefix{$baz}': typeof NonNestedPrefixPrefixChar123bazChar125RouteRouteWithChildren\n '/non-nested/suffix/{$baz}suffix': typeof NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren\n '/params-ps/named/$foo': typeof ParamsPsNamedFooRouteRouteWithChildren\n '/params-ps/non-nested/$foo': typeof ParamsPsNonNestedFooRouteRouteWithChildren\n '/params-ps/strict-false/$version': typeof ParamsPsStrictFalseVersionRouteRoute\n '/insidelayout': typeof groupLayoutInsidelayoutRoute\n '/subfolder/inside': typeof groupSubfolderInsideRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n '/fullpath-test/$id': typeof FullpathTestLayoutIdRoute\n '/masks/admin/$userId': typeof MasksAdminUserIdRoute\n '/masks/public/$username': typeof MasksPublicUsernameRoute\n '/params-ps/named/prefix{$foo}': typeof ParamsPsNamedPrefixChar123fooChar125Route\n '/params-ps/named/{$foo}suffix': typeof ParamsPsNamedChar123fooChar125suffixRoute\n '/params-ps/wildcard/$': typeof ParamsPsWildcardSplatRoute\n '/params-ps/wildcard/prefix@๋Œ€{$}': typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route\n '/params-ps/wildcard/prefix{$}': typeof ParamsPsWildcardPrefixChar123Char125Route\n '/params-ps/wildcard/{$}suffix': typeof ParamsPsWildcardChar123Char125suffixRoute\n '/params-ps/wildcard/{$}suffix@๋Œ€': typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route\n '/params/single/$value': typeof ParamsSingleValueRoute\n '/pathless-layout/child': typeof PathlessLayoutLayoutChildRoute\n '/posts/$postId/edit': typeof PostsPostIdEditRoute\n '/redirect/$target/destination': typeof RedirectTargetDestinationRoute\n '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute\n '/redirect/$target/via-loader': typeof RedirectTargetViaLoaderRoute\n '/redirect/$target/via-route-redirect-beforeLoad': typeof RedirectTargetViaRouteRedirectBeforeLoadRoute\n '/redirect/$target/via-route-redirect-loader': typeof RedirectTargetViaRouteRedirectLoaderRoute\n '/redirect/$target/via-routeApi-redirect-beforeLoad': typeof RedirectTargetViaRouteApiRedirectBeforeLoadRoute\n '/redirect/$target/via-routeApi-redirect-loader': typeof RedirectTargetViaRouteApiRedirectLoaderRoute\n '/redirect/preload/first': typeof RedirectPreloadFirstRoute\n '/redirect/preload/second': typeof RedirectPreloadSecondRoute\n '/redirect/preload/third': typeof RedirectPreloadThirdRoute\n '/relative/link/relative-link-a': typeof RelativeLinkRelativeLinkARoute\n '/relative/link/relative-link-b': typeof RelativeLinkRelativeLinkBRoute\n '/relative/useNavigate/relative-useNavigate-a': typeof RelativeUseNavigateRelativeUseNavigateARoute\n '/relative/useNavigate/relative-useNavigate-b': typeof RelativeUseNavigateRelativeUseNavigateBRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$': typeof Char45824Char54620Char48124Char44397WildcardSplatRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id': typeof Char45824Char54620Char48124Char44397Char55357Char56960IdRoute\n '/fullpath-test/': typeof FullpathTestLayoutIndexRoute\n '/params-ps/named/': typeof ParamsPsNamedIndexRoute\n '/params-ps/wildcard/': typeof ParamsPsWildcardIndexRoute\n '/pathless-layout/': typeof PathlessLayoutLayoutIndexRoute\n '/redirect/$target/': typeof RedirectTargetIndexRoute\n '/non-nested/deep/$baz/bar': typeof NonNestedDeepBazBarRouteRouteWithChildren\n '/params-ps/named/$foo/$bar': typeof ParamsPsNamedFooBarRouteRouteWithChildren\n '/non-nested/named/$baz/foo': typeof NonNestedNamedBazFooRoute\n '/non-nested/named/$baz/bar': typeof NonNestedNamedBazBarRoute\n '/non-nested/path/baz/foo': typeof NonNestedPathBazFooRoute\n '/non-nested/path/baz/bar': typeof NonNestedPathBazBarRoute\n '/non-nested/prefix/prefix{$baz}/foo': typeof NonNestedPrefixPrefixChar123bazChar125FooRoute\n '/non-nested/prefix/prefix{$baz}/bar': typeof NonNestedPrefixPrefixChar123bazChar125BarRoute\n '/non-nested/suffix/{$baz}suffix/foo': typeof NonNestedSuffixChar123bazChar125suffixFooRoute\n '/non-nested/suffix/{$baz}suffix/bar': typeof NonNestedSuffixChar123bazChar125suffixBarRoute\n '/params-ps/non-nested/$foo/$bar': typeof ParamsPsNonNestedFooBarRoute\n '/non-nested/deep/$baz/': typeof NonNestedDeepBazIndexRoute\n '/non-nested/named/$baz/': typeof NonNestedNamedBazIndexRoute\n '/non-nested/path/baz/': typeof NonNestedPathBazIndexRoute\n '/non-nested/prefix/prefix{$baz}/': typeof NonNestedPrefixPrefixChar123bazChar125IndexRoute\n '/non-nested/suffix/{$baz}suffix/': typeof NonNestedSuffixChar123bazChar125suffixIndexRoute\n '/relative/link/nested/': typeof RelativeLinkNestedIndexRoute\n '/relative/link/path/': typeof RelativeLinkPathIndexRoute\n '/relative/link/with-search/': typeof RelativeLinkWithSearchIndexRoute\n '/relative/useNavigate/nested/': typeof RelativeUseNavigateNestedIndexRoute\n '/relative/useNavigate/path/': typeof RelativeUseNavigatePathIndexRoute\n '/relative/useNavigate/with-search/': typeof RelativeUseNavigateWithSearchIndexRoute\n '/non-nested/deep/$baz/bar/$foo': typeof NonNestedDeepBazBarFooRouteRouteWithChildren\n '/non-nested/deep/$baz/bar/qux': typeof NonNestedDeepBazBarQuxRoute\n '/params-ps/named/$foo/$bar/$baz': typeof ParamsPsNamedFooBarBazRoute\n '/non-nested/deep/$baz/bar/': typeof NonNestedDeepBazBarIndexRoute\n '/relative/link/nested/deep/': typeof RelativeLinkNestedDeepIndexRoute\n '/relative/link/path/$path/': typeof RelativeLinkPathPathIndexRoute\n '/relative/useNavigate/nested/deep/': typeof RelativeUseNavigateNestedDeepIndexRoute\n '/relative/useNavigate/path/$path/': typeof RelativeUseNavigatePathPathIndexRoute\n '/non-nested/deep/$baz/bar/$foo/qux': typeof NonNestedDeepBazBarFooQuxRoute\n '/non-nested/deep/$baz/bar/$foo/': typeof NonNestedDeepBazBarFooIndexRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/fullpath-test': typeof FullpathTestLayoutIndexRoute\n '/non-nested': typeof NonNestedRouteRouteWithChildren\n '/pathless-layout': typeof PathlessLayoutLayoutIndexRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ': typeof Char45824Char54620Char48124Char44397RouteRouteWithChildren\n '/anchor': typeof AnchorRoute\n '/component-types-test': typeof ComponentTypesTestRoute\n '/editing-a': typeof EditingARoute\n '/editing-b': typeof EditingBRoute\n '/hover-preload-hash': typeof HoverPreloadHashRoute\n '/lazy-error': typeof LazyErrorRoute\n '/masks': typeof MasksRouteWithChildren\n '/notRemountDeps': typeof NotRemountDepsRoute\n '/remountDeps': typeof RemountDepsRoute\n '/non-nested/deep': typeof NonNestedDeepRouteRouteWithChildren\n '/non-nested/named': typeof NonNestedNamedRouteRouteWithChildren\n '/non-nested/path': typeof NonNestedPathRouteRouteWithChildren\n '/non-nested/prefix': typeof NonNestedPrefixRouteRouteWithChildren\n '/non-nested/suffix': typeof NonNestedSuffixRouteRouteWithChildren\n '/params-ps/non-nested': typeof ParamsPsNonNestedRouteRouteWithChildren\n '/params-ps/strict-false': typeof ParamsPsStrictFalseRouteRouteWithChildren\n '/relative/link': typeof RelativeLinkRouteRouteWithChildren\n '/relative/useNavigate': typeof RelativeUseNavigateRouteRouteWithChildren\n '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute\n '/inside': typeof groupInsideRoute\n '/lazyinside': typeof groupLazyinsideRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/search-params/default': typeof SearchParamsDefaultRoute\n '/structural-sharing/$enabled': typeof StructuralSharingEnabledRoute\n '/params-ps': typeof ParamsPsIndexRoute\n '/posts': typeof PostsIndexRoute\n '/redirect': typeof RedirectIndexRoute\n '/relative': typeof RelativeIndexRoute\n '/search-params': typeof SearchParamsIndexRoute\n '/params-ps/named/$foo': typeof ParamsPsNamedFooRouteRouteWithChildren\n '/params-ps/non-nested/$foo': typeof ParamsPsNonNestedFooRouteRouteWithChildren\n '/params-ps/strict-false/$version': typeof ParamsPsStrictFalseVersionRouteRoute\n '/insidelayout': typeof groupLayoutInsidelayoutRoute\n '/subfolder/inside': typeof groupSubfolderInsideRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n '/fullpath-test/$id': typeof FullpathTestLayoutIdRoute\n '/masks/admin/$userId': typeof MasksAdminUserIdRoute\n '/masks/public/$username': typeof MasksPublicUsernameRoute\n '/params-ps/named/prefix{$foo}': typeof ParamsPsNamedPrefixChar123fooChar125Route\n '/params-ps/named/{$foo}suffix': typeof ParamsPsNamedChar123fooChar125suffixRoute\n '/params-ps/wildcard/$': typeof ParamsPsWildcardSplatRoute\n '/params-ps/wildcard/prefix@๋Œ€{$}': typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route\n '/params-ps/wildcard/prefix{$}': typeof ParamsPsWildcardPrefixChar123Char125Route\n '/params-ps/wildcard/{$}suffix': typeof ParamsPsWildcardChar123Char125suffixRoute\n '/params-ps/wildcard/{$}suffix@๋Œ€': typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route\n '/params/single/$value': typeof ParamsSingleValueRoute\n '/pathless-layout/child': typeof PathlessLayoutLayoutChildRoute\n '/posts/$postId/edit': typeof PostsPostIdEditRoute\n '/redirect/$target/destination': typeof RedirectTargetDestinationRoute\n '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute\n '/redirect/$target/via-loader': typeof RedirectTargetViaLoaderRoute\n '/redirect/$target/via-route-redirect-beforeLoad': typeof RedirectTargetViaRouteRedirectBeforeLoadRoute\n '/redirect/$target/via-route-redirect-loader': typeof RedirectTargetViaRouteRedirectLoaderRoute\n '/redirect/$target/via-routeApi-redirect-beforeLoad': typeof RedirectTargetViaRouteApiRedirectBeforeLoadRoute\n '/redirect/$target/via-routeApi-redirect-loader': typeof RedirectTargetViaRouteApiRedirectLoaderRoute\n '/redirect/preload/first': typeof RedirectPreloadFirstRoute\n '/redirect/preload/second': typeof RedirectPreloadSecondRoute\n '/redirect/preload/third': typeof RedirectPreloadThirdRoute\n '/relative/link/relative-link-a': typeof RelativeLinkRelativeLinkARoute\n '/relative/link/relative-link-b': typeof RelativeLinkRelativeLinkBRoute\n '/relative/useNavigate/relative-useNavigate-a': typeof RelativeUseNavigateRelativeUseNavigateARoute\n '/relative/useNavigate/relative-useNavigate-b': typeof RelativeUseNavigateRelativeUseNavigateBRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$': typeof Char45824Char54620Char48124Char44397WildcardSplatRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id': typeof Char45824Char54620Char48124Char44397Char55357Char56960IdRoute\n '/params-ps/named': typeof ParamsPsNamedIndexRoute\n '/params-ps/wildcard': typeof ParamsPsWildcardIndexRoute\n '/redirect/$target': typeof RedirectTargetIndexRoute\n '/params-ps/named/$foo/$bar': typeof ParamsPsNamedFooBarRouteRouteWithChildren\n '/non-nested/named/$baz/foo': typeof NonNestedNamedBazFooRoute\n '/non-nested/named/$baz/bar': typeof NonNestedNamedBazBarRoute\n '/non-nested/path/baz/foo': typeof NonNestedPathBazFooRoute\n '/non-nested/path/baz/bar': typeof NonNestedPathBazBarRoute\n '/non-nested/prefix/prefix{$baz}/foo': typeof NonNestedPrefixPrefixChar123bazChar125FooRoute\n '/non-nested/prefix/prefix{$baz}/bar': typeof NonNestedPrefixPrefixChar123bazChar125BarRoute\n '/non-nested/suffix/{$baz}suffix/foo': typeof NonNestedSuffixChar123bazChar125suffixFooRoute\n '/non-nested/suffix/{$baz}suffix/bar': typeof NonNestedSuffixChar123bazChar125suffixBarRoute\n '/params-ps/non-nested/$foo/$bar': typeof ParamsPsNonNestedFooBarRoute\n '/non-nested/deep/$baz': typeof NonNestedDeepBazIndexRoute\n '/non-nested/named/$baz': typeof NonNestedNamedBazIndexRoute\n '/non-nested/path/baz': typeof NonNestedPathBazIndexRoute\n '/non-nested/prefix/prefix{$baz}': typeof NonNestedPrefixPrefixChar123bazChar125IndexRoute\n '/non-nested/suffix/{$baz}suffix': typeof NonNestedSuffixChar123bazChar125suffixIndexRoute\n '/relative/link/nested': typeof RelativeLinkNestedIndexRoute\n '/relative/link/path': typeof RelativeLinkPathIndexRoute\n '/relative/link/with-search': typeof RelativeLinkWithSearchIndexRoute\n '/relative/useNavigate/nested': typeof RelativeUseNavigateNestedIndexRoute\n '/relative/useNavigate/path': typeof RelativeUseNavigatePathIndexRoute\n '/relative/useNavigate/with-search': typeof RelativeUseNavigateWithSearchIndexRoute\n '/non-nested/deep/$baz/bar/qux': typeof NonNestedDeepBazBarQuxRoute\n '/params-ps/named/$foo/$bar/$baz': typeof ParamsPsNamedFooBarBazRoute\n '/non-nested/deep/$baz/bar': typeof NonNestedDeepBazBarIndexRoute\n '/relative/link/nested/deep': typeof RelativeLinkNestedDeepIndexRoute\n '/relative/link/path/$path': typeof RelativeLinkPathPathIndexRoute\n '/relative/useNavigate/nested/deep': typeof RelativeUseNavigateNestedDeepIndexRoute\n '/relative/useNavigate/path/$path': typeof RelativeUseNavigatePathPathIndexRoute\n '/non-nested/deep/$baz/bar/$foo/qux': typeof NonNestedDeepBazBarFooQuxRoute\n '/non-nested/deep/$baz/bar/$foo': typeof NonNestedDeepBazBarFooIndexRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/fullpath-test': typeof FullpathTestRouteRouteWithChildren\n '/non-nested': typeof NonNestedRouteRouteWithChildren\n '/pathless-layout': typeof PathlessLayoutRouteRouteWithChildren\n '/search-params': typeof SearchParamsRouteRouteWithChildren\n '/๋Œ€ํ•œ๋ฏผ๊ตญ': typeof Char45824Char54620Char48124Char44397RouteRouteWithChildren\n '/_layout': typeof LayoutRouteWithChildren\n '/anchor': typeof AnchorRoute\n '/component-types-test': typeof ComponentTypesTestRoute\n '/editing-a': typeof EditingARoute\n '/editing-b': typeof EditingBRoute\n '/hover-preload-hash': typeof HoverPreloadHashRoute\n '/lazy-error': typeof LazyErrorRoute\n '/masks': typeof MasksRouteWithChildren\n '/notRemountDeps': typeof NotRemountDepsRoute\n '/posts': typeof PostsRouteWithChildren\n '/remountDeps': typeof RemountDepsRoute\n '/fullpath-test/_layout': typeof FullpathTestLayoutRouteRouteWithChildren\n '/non-nested/deep': typeof NonNestedDeepRouteRouteWithChildren\n '/non-nested/named': typeof NonNestedNamedRouteRouteWithChildren\n '/non-nested/path': typeof NonNestedPathRouteRouteWithChildren\n '/non-nested/prefix': typeof NonNestedPrefixRouteRouteWithChildren\n '/non-nested/suffix': typeof NonNestedSuffixRouteRouteWithChildren\n '/params-ps/non-nested': typeof ParamsPsNonNestedRouteRouteWithChildren\n '/params-ps/strict-false': typeof ParamsPsStrictFalseRouteRouteWithChildren\n '/pathless-layout/_layout': typeof PathlessLayoutLayoutRouteRouteWithChildren\n '/relative/link': typeof RelativeLinkRouteRouteWithChildren\n '/relative/useNavigate': typeof RelativeUseNavigateRouteRouteWithChildren\n '/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute\n '/(group)/_layout': typeof groupLayoutRouteWithChildren\n '/(group)/inside': typeof groupInsideRoute\n '/(group)/lazyinside': typeof groupLazyinsideRoute\n '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/redirect/$target': typeof RedirectTargetRouteWithChildren\n '/search-params/default': typeof SearchParamsDefaultRoute\n '/structural-sharing/$enabled': typeof StructuralSharingEnabledRoute\n '/params-ps/': typeof ParamsPsIndexRoute\n '/posts/': typeof PostsIndexRoute\n '/redirect/': typeof RedirectIndexRoute\n '/relative/': typeof RelativeIndexRoute\n '/search-params/': typeof SearchParamsIndexRoute\n '/non-nested/deep/$baz': typeof NonNestedDeepBazRouteRouteWithChildren\n '/non-nested/named/$baz': typeof NonNestedNamedBazRouteRouteWithChildren\n '/non-nested/path/baz': typeof NonNestedPathBazRouteRouteWithChildren\n '/non-nested/prefix/prefix{$baz}': typeof NonNestedPrefixPrefixChar123bazChar125RouteRouteWithChildren\n '/non-nested/suffix/{$baz}suffix': typeof NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren\n '/params-ps/named/$foo': typeof ParamsPsNamedFooRouteRouteWithChildren\n '/params-ps/non-nested/$foo_': typeof ParamsPsNonNestedFooRouteRouteWithChildren\n '/params-ps/strict-false/$version': typeof ParamsPsStrictFalseVersionRouteRoute\n '/(group)/_layout/insidelayout': typeof groupLayoutInsidelayoutRoute\n '/(group)/subfolder/inside': typeof groupSubfolderInsideRoute\n '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute\n '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute\n '/fullpath-test/_layout/$id': typeof FullpathTestLayoutIdRoute\n '/masks/admin/$userId': typeof MasksAdminUserIdRoute\n '/masks/public/$username': typeof MasksPublicUsernameRoute\n '/params-ps/named/prefix{$foo}': typeof ParamsPsNamedPrefixChar123fooChar125Route\n '/params-ps/named/{$foo}suffix': typeof ParamsPsNamedChar123fooChar125suffixRoute\n '/params-ps/wildcard/$': typeof ParamsPsWildcardSplatRoute\n '/params-ps/wildcard/prefix@๋Œ€{$}': typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route\n '/params-ps/wildcard/prefix{$}': typeof ParamsPsWildcardPrefixChar123Char125Route\n '/params-ps/wildcard/{$}suffix': typeof ParamsPsWildcardChar123Char125suffixRoute\n '/params-ps/wildcard/{$}suffix@๋Œ€': typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route\n '/params/single/$value': typeof ParamsSingleValueRoute\n '/pathless-layout/_layout/child': typeof PathlessLayoutLayoutChildRoute\n '/posts_/$postId/edit': typeof PostsPostIdEditRoute\n '/redirect/$target/destination': typeof RedirectTargetDestinationRoute\n '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute\n '/redirect/$target/via-loader': typeof RedirectTargetViaLoaderRoute\n '/redirect/$target/via-route-redirect-beforeLoad': typeof RedirectTargetViaRouteRedirectBeforeLoadRoute\n '/redirect/$target/via-route-redirect-loader': typeof RedirectTargetViaRouteRedirectLoaderRoute\n '/redirect/$target/via-routeApi-redirect-beforeLoad': typeof RedirectTargetViaRouteApiRedirectBeforeLoadRoute\n '/redirect/$target/via-routeApi-redirect-loader': typeof RedirectTargetViaRouteApiRedirectLoaderRoute\n '/redirect/preload/first': typeof RedirectPreloadFirstRoute\n '/redirect/preload/second': typeof RedirectPreloadSecondRoute\n '/redirect/preload/third': typeof RedirectPreloadThirdRoute\n '/relative/link/relative-link-a': typeof RelativeLinkRelativeLinkARoute\n '/relative/link/relative-link-b': typeof RelativeLinkRelativeLinkBRoute\n '/relative/useNavigate/relative-useNavigate-a': typeof RelativeUseNavigateRelativeUseNavigateARoute\n '/relative/useNavigate/relative-useNavigate-b': typeof RelativeUseNavigateRelativeUseNavigateBRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$': typeof Char45824Char54620Char48124Char44397WildcardSplatRoute\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id': typeof Char45824Char54620Char48124Char44397Char55357Char56960IdRoute\n '/fullpath-test/_layout/': typeof FullpathTestLayoutIndexRoute\n '/params-ps/named/': typeof ParamsPsNamedIndexRoute\n '/params-ps/wildcard/': typeof ParamsPsWildcardIndexRoute\n '/pathless-layout/_layout/': typeof PathlessLayoutLayoutIndexRoute\n '/redirect/$target/': typeof RedirectTargetIndexRoute\n '/non-nested/deep/$baz_/bar': typeof NonNestedDeepBazBarRouteRouteWithChildren\n '/params-ps/named/$foo/$bar': typeof ParamsPsNamedFooBarRouteRouteWithChildren\n '/non-nested/named/$baz/foo': typeof NonNestedNamedBazFooRoute\n '/non-nested/named/$baz_/bar': typeof NonNestedNamedBazBarRoute\n '/non-nested/path/baz/foo': typeof NonNestedPathBazFooRoute\n '/non-nested/path/baz_/bar': typeof NonNestedPathBazBarRoute\n '/non-nested/prefix/prefix{$baz}/foo': typeof NonNestedPrefixPrefixChar123bazChar125FooRoute\n '/non-nested/prefix/prefix{$baz}_/bar': typeof NonNestedPrefixPrefixChar123bazChar125BarRoute\n '/non-nested/suffix/{$baz}suffix/foo': typeof NonNestedSuffixChar123bazChar125suffixFooRoute\n '/non-nested/suffix/{$baz}suffix_/bar': typeof NonNestedSuffixChar123bazChar125suffixBarRoute\n '/params-ps/non-nested/$foo_/$bar': typeof ParamsPsNonNestedFooBarRoute\n '/non-nested/deep/$baz/': typeof NonNestedDeepBazIndexRoute\n '/non-nested/named/$baz/': typeof NonNestedNamedBazIndexRoute\n '/non-nested/path/baz/': typeof NonNestedPathBazIndexRoute\n '/non-nested/prefix/prefix{$baz}/': typeof NonNestedPrefixPrefixChar123bazChar125IndexRoute\n '/non-nested/suffix/{$baz}suffix/': typeof NonNestedSuffixChar123bazChar125suffixIndexRoute\n '/relative/link/nested/': typeof RelativeLinkNestedIndexRoute\n '/relative/link/path/': typeof RelativeLinkPathIndexRoute\n '/relative/link/with-search/': typeof RelativeLinkWithSearchIndexRoute\n '/relative/useNavigate/nested/': typeof RelativeUseNavigateNestedIndexRoute\n '/relative/useNavigate/path/': typeof RelativeUseNavigatePathIndexRoute\n '/relative/useNavigate/with-search/': typeof RelativeUseNavigateWithSearchIndexRoute\n '/non-nested/deep/$baz_/bar/$foo': typeof NonNestedDeepBazBarFooRouteRouteWithChildren\n '/non-nested/deep/$baz_/bar_/qux': typeof NonNestedDeepBazBarQuxRoute\n '/params-ps/named/$foo/$bar/$baz': typeof ParamsPsNamedFooBarBazRoute\n '/non-nested/deep/$baz_/bar/': typeof NonNestedDeepBazBarIndexRoute\n '/relative/link/nested/deep/': typeof RelativeLinkNestedDeepIndexRoute\n '/relative/link/path/$path/': typeof RelativeLinkPathPathIndexRoute\n '/relative/useNavigate/nested/deep/': typeof RelativeUseNavigateNestedDeepIndexRoute\n '/relative/useNavigate/path/$path/': typeof RelativeUseNavigatePathPathIndexRoute\n '/non-nested/deep/$baz_/bar/$foo_/qux': typeof NonNestedDeepBazBarFooQuxRoute\n '/non-nested/deep/$baz_/bar/$foo/': typeof NonNestedDeepBazBarFooIndexRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | '/fullpath-test'\n | '/non-nested'\n | '/pathless-layout'\n | '/search-params'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n | '/anchor'\n | '/component-types-test'\n | '/editing-a'\n | '/editing-b'\n | '/hover-preload-hash'\n | '/lazy-error'\n | '/masks'\n | '/notRemountDeps'\n | '/posts'\n | '/remountDeps'\n | '/non-nested/deep'\n | '/non-nested/named'\n | '/non-nested/path'\n | '/non-nested/prefix'\n | '/non-nested/suffix'\n | '/params-ps/non-nested'\n | '/params-ps/strict-false'\n | '/relative/link'\n | '/relative/useNavigate'\n | '/onlyrouteinside'\n | '/inside'\n | '/lazyinside'\n | '/posts/$postId'\n | '/redirect/$target'\n | '/search-params/default'\n | '/structural-sharing/$enabled'\n | '/params-ps/'\n | '/posts/'\n | '/redirect/'\n | '/relative/'\n | '/search-params/'\n | '/non-nested/deep/$baz'\n | '/non-nested/named/$baz'\n | '/non-nested/path/baz'\n | '/non-nested/prefix/prefix{$baz}'\n | '/non-nested/suffix/{$baz}suffix'\n | '/params-ps/named/$foo'\n | '/params-ps/non-nested/$foo'\n | '/params-ps/strict-false/$version'\n | '/insidelayout'\n | '/subfolder/inside'\n | '/layout-a'\n | '/layout-b'\n | '/fullpath-test/$id'\n | '/masks/admin/$userId'\n | '/masks/public/$username'\n | '/params-ps/named/prefix{$foo}'\n | '/params-ps/named/{$foo}suffix'\n | '/params-ps/wildcard/$'\n | '/params-ps/wildcard/prefix@๋Œ€{$}'\n | '/params-ps/wildcard/prefix{$}'\n | '/params-ps/wildcard/{$}suffix'\n | '/params-ps/wildcard/{$}suffix@๋Œ€'\n | '/params/single/$value'\n | '/pathless-layout/child'\n | '/posts/$postId/edit'\n | '/redirect/$target/destination'\n | '/redirect/$target/via-beforeLoad'\n | '/redirect/$target/via-loader'\n | '/redirect/$target/via-route-redirect-beforeLoad'\n | '/redirect/$target/via-route-redirect-loader'\n | '/redirect/$target/via-routeApi-redirect-beforeLoad'\n | '/redirect/$target/via-routeApi-redirect-loader'\n | '/redirect/preload/first'\n | '/redirect/preload/second'\n | '/redirect/preload/third'\n | '/relative/link/relative-link-a'\n | '/relative/link/relative-link-b'\n | '/relative/useNavigate/relative-useNavigate-a'\n | '/relative/useNavigate/relative-useNavigate-b'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id'\n | '/fullpath-test/'\n | '/params-ps/named/'\n | '/params-ps/wildcard/'\n | '/pathless-layout/'\n | '/redirect/$target/'\n | '/non-nested/deep/$baz/bar'\n | '/params-ps/named/$foo/$bar'\n | '/non-nested/named/$baz/foo'\n | '/non-nested/named/$baz/bar'\n | '/non-nested/path/baz/foo'\n | '/non-nested/path/baz/bar'\n | '/non-nested/prefix/prefix{$baz}/foo'\n | '/non-nested/prefix/prefix{$baz}/bar'\n | '/non-nested/suffix/{$baz}suffix/foo'\n | '/non-nested/suffix/{$baz}suffix/bar'\n | '/params-ps/non-nested/$foo/$bar'\n | '/non-nested/deep/$baz/'\n | '/non-nested/named/$baz/'\n | '/non-nested/path/baz/'\n | '/non-nested/prefix/prefix{$baz}/'\n | '/non-nested/suffix/{$baz}suffix/'\n | '/relative/link/nested/'\n | '/relative/link/path/'\n | '/relative/link/with-search/'\n | '/relative/useNavigate/nested/'\n | '/relative/useNavigate/path/'\n | '/relative/useNavigate/with-search/'\n | '/non-nested/deep/$baz/bar/$foo'\n | '/non-nested/deep/$baz/bar/qux'\n | '/params-ps/named/$foo/$bar/$baz'\n | '/non-nested/deep/$baz/bar/'\n | '/relative/link/nested/deep/'\n | '/relative/link/path/$path/'\n | '/relative/useNavigate/nested/deep/'\n | '/relative/useNavigate/path/$path/'\n | '/non-nested/deep/$baz/bar/$foo/qux'\n | '/non-nested/deep/$baz/bar/$foo/'\n fileRoutesByTo: FileRoutesByTo\n to:\n | '/'\n | '/fullpath-test'\n | '/non-nested'\n | '/pathless-layout'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n | '/anchor'\n | '/component-types-test'\n | '/editing-a'\n | '/editing-b'\n | '/hover-preload-hash'\n | '/lazy-error'\n | '/masks'\n | '/notRemountDeps'\n | '/remountDeps'\n | '/non-nested/deep'\n | '/non-nested/named'\n | '/non-nested/path'\n | '/non-nested/prefix'\n | '/non-nested/suffix'\n | '/params-ps/non-nested'\n | '/params-ps/strict-false'\n | '/relative/link'\n | '/relative/useNavigate'\n | '/onlyrouteinside'\n | '/inside'\n | '/lazyinside'\n | '/posts/$postId'\n | '/search-params/default'\n | '/structural-sharing/$enabled'\n | '/params-ps'\n | '/posts'\n | '/redirect'\n | '/relative'\n | '/search-params'\n | '/params-ps/named/$foo'\n | '/params-ps/non-nested/$foo'\n | '/params-ps/strict-false/$version'\n | '/insidelayout'\n | '/subfolder/inside'\n | '/layout-a'\n | '/layout-b'\n | '/fullpath-test/$id'\n | '/masks/admin/$userId'\n | '/masks/public/$username'\n | '/params-ps/named/prefix{$foo}'\n | '/params-ps/named/{$foo}suffix'\n | '/params-ps/wildcard/$'\n | '/params-ps/wildcard/prefix@๋Œ€{$}'\n | '/params-ps/wildcard/prefix{$}'\n | '/params-ps/wildcard/{$}suffix'\n | '/params-ps/wildcard/{$}suffix@๋Œ€'\n | '/params/single/$value'\n | '/pathless-layout/child'\n | '/posts/$postId/edit'\n | '/redirect/$target/destination'\n | '/redirect/$target/via-beforeLoad'\n | '/redirect/$target/via-loader'\n | '/redirect/$target/via-route-redirect-beforeLoad'\n | '/redirect/$target/via-route-redirect-loader'\n | '/redirect/$target/via-routeApi-redirect-beforeLoad'\n | '/redirect/$target/via-routeApi-redirect-loader'\n | '/redirect/preload/first'\n | '/redirect/preload/second'\n | '/redirect/preload/third'\n | '/relative/link/relative-link-a'\n | '/relative/link/relative-link-b'\n | '/relative/useNavigate/relative-useNavigate-a'\n | '/relative/useNavigate/relative-useNavigate-b'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id'\n | '/params-ps/named'\n | '/params-ps/wildcard'\n | '/redirect/$target'\n | '/params-ps/named/$foo/$bar'\n | '/non-nested/named/$baz/foo'\n | '/non-nested/named/$baz/bar'\n | '/non-nested/path/baz/foo'\n | '/non-nested/path/baz/bar'\n | '/non-nested/prefix/prefix{$baz}/foo'\n | '/non-nested/prefix/prefix{$baz}/bar'\n | '/non-nested/suffix/{$baz}suffix/foo'\n | '/non-nested/suffix/{$baz}suffix/bar'\n | '/params-ps/non-nested/$foo/$bar'\n | '/non-nested/deep/$baz'\n | '/non-nested/named/$baz'\n | '/non-nested/path/baz'\n | '/non-nested/prefix/prefix{$baz}'\n | '/non-nested/suffix/{$baz}suffix'\n | '/relative/link/nested'\n | '/relative/link/path'\n | '/relative/link/with-search'\n | '/relative/useNavigate/nested'\n | '/relative/useNavigate/path'\n | '/relative/useNavigate/with-search'\n | '/non-nested/deep/$baz/bar/qux'\n | '/params-ps/named/$foo/$bar/$baz'\n | '/non-nested/deep/$baz/bar'\n | '/relative/link/nested/deep'\n | '/relative/link/path/$path'\n | '/relative/useNavigate/nested/deep'\n | '/relative/useNavigate/path/$path'\n | '/non-nested/deep/$baz/bar/$foo/qux'\n | '/non-nested/deep/$baz/bar/$foo'\n id:\n | '__root__'\n | '/'\n | '/fullpath-test'\n | '/non-nested'\n | '/pathless-layout'\n | '/search-params'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n | '/_layout'\n | '/anchor'\n | '/component-types-test'\n | '/editing-a'\n | '/editing-b'\n | '/hover-preload-hash'\n | '/lazy-error'\n | '/masks'\n | '/notRemountDeps'\n | '/posts'\n | '/remountDeps'\n | '/fullpath-test/_layout'\n | '/non-nested/deep'\n | '/non-nested/named'\n | '/non-nested/path'\n | '/non-nested/prefix'\n | '/non-nested/suffix'\n | '/params-ps/non-nested'\n | '/params-ps/strict-false'\n | '/pathless-layout/_layout'\n | '/relative/link'\n | '/relative/useNavigate'\n | '/(another-group)/onlyrouteinside'\n | '/(group)/_layout'\n | '/(group)/inside'\n | '/(group)/lazyinside'\n | '/_layout/_layout-2'\n | '/posts/$postId'\n | '/redirect/$target'\n | '/search-params/default'\n | '/structural-sharing/$enabled'\n | '/params-ps/'\n | '/posts/'\n | '/redirect/'\n | '/relative/'\n | '/search-params/'\n | '/non-nested/deep/$baz'\n | '/non-nested/named/$baz'\n | '/non-nested/path/baz'\n | '/non-nested/prefix/prefix{$baz}'\n | '/non-nested/suffix/{$baz}suffix'\n | '/params-ps/named/$foo'\n | '/params-ps/non-nested/$foo_'\n | '/params-ps/strict-false/$version'\n | '/(group)/_layout/insidelayout'\n | '/(group)/subfolder/inside'\n | '/_layout/_layout-2/layout-a'\n | '/_layout/_layout-2/layout-b'\n | '/fullpath-test/_layout/$id'\n | '/masks/admin/$userId'\n | '/masks/public/$username'\n | '/params-ps/named/prefix{$foo}'\n | '/params-ps/named/{$foo}suffix'\n | '/params-ps/wildcard/$'\n | '/params-ps/wildcard/prefix@๋Œ€{$}'\n | '/params-ps/wildcard/prefix{$}'\n | '/params-ps/wildcard/{$}suffix'\n | '/params-ps/wildcard/{$}suffix@๋Œ€'\n | '/params/single/$value'\n | '/pathless-layout/_layout/child'\n | '/posts_/$postId/edit'\n | '/redirect/$target/destination'\n | '/redirect/$target/via-beforeLoad'\n | '/redirect/$target/via-loader'\n | '/redirect/$target/via-route-redirect-beforeLoad'\n | '/redirect/$target/via-route-redirect-loader'\n | '/redirect/$target/via-routeApi-redirect-beforeLoad'\n | '/redirect/$target/via-routeApi-redirect-loader'\n | '/redirect/preload/first'\n | '/redirect/preload/second'\n | '/redirect/preload/third'\n | '/relative/link/relative-link-a'\n | '/relative/link/relative-link-b'\n | '/relative/useNavigate/relative-useNavigate-a'\n | '/relative/useNavigate/relative-useNavigate-b'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$'\n | '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id'\n | '/fullpath-test/_layout/'\n | '/params-ps/named/'\n | '/params-ps/wildcard/'\n | '/pathless-layout/_layout/'\n | '/redirect/$target/'\n | '/non-nested/deep/$baz_/bar'\n | '/params-ps/named/$foo/$bar'\n | '/non-nested/named/$baz/foo'\n | '/non-nested/named/$baz_/bar'\n | '/non-nested/path/baz/foo'\n | '/non-nested/path/baz_/bar'\n | '/non-nested/prefix/prefix{$baz}/foo'\n | '/non-nested/prefix/prefix{$baz}_/bar'\n | '/non-nested/suffix/{$baz}suffix/foo'\n | '/non-nested/suffix/{$baz}suffix_/bar'\n | '/params-ps/non-nested/$foo_/$bar'\n | '/non-nested/deep/$baz/'\n | '/non-nested/named/$baz/'\n | '/non-nested/path/baz/'\n | '/non-nested/prefix/prefix{$baz}/'\n | '/non-nested/suffix/{$baz}suffix/'\n | '/relative/link/nested/'\n | '/relative/link/path/'\n | '/relative/link/with-search/'\n | '/relative/useNavigate/nested/'\n | '/relative/useNavigate/path/'\n | '/relative/useNavigate/with-search/'\n | '/non-nested/deep/$baz_/bar/$foo'\n | '/non-nested/deep/$baz_/bar_/qux'\n | '/params-ps/named/$foo/$bar/$baz'\n | '/non-nested/deep/$baz_/bar/'\n | '/relative/link/nested/deep/'\n | '/relative/link/path/$path/'\n | '/relative/useNavigate/nested/deep/'\n | '/relative/useNavigate/path/$path/'\n | '/non-nested/deep/$baz_/bar/$foo_/qux'\n | '/non-nested/deep/$baz_/bar/$foo/'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n FullpathTestRouteRoute: typeof FullpathTestRouteRouteWithChildren\n NonNestedRouteRoute: typeof NonNestedRouteRouteWithChildren\n PathlessLayoutRouteRoute: typeof PathlessLayoutRouteRouteWithChildren\n SearchParamsRouteRoute: typeof SearchParamsRouteRouteWithChildren\n Char45824Char54620Char48124Char44397RouteRoute: typeof Char45824Char54620Char48124Char44397RouteRouteWithChildren\n LayoutRoute: typeof LayoutRouteWithChildren\n AnchorRoute: typeof AnchorRoute\n ComponentTypesTestRoute: typeof ComponentTypesTestRoute\n EditingARoute: typeof EditingARoute\n EditingBRoute: typeof EditingBRoute\n HoverPreloadHashRoute: typeof HoverPreloadHashRoute\n LazyErrorRoute: typeof LazyErrorRoute\n MasksRoute: typeof MasksRouteWithChildren\n NotRemountDepsRoute: typeof NotRemountDepsRoute\n PostsRoute: typeof PostsRouteWithChildren\n RemountDepsRoute: typeof RemountDepsRoute\n ParamsPsNonNestedRouteRoute: typeof ParamsPsNonNestedRouteRouteWithChildren\n ParamsPsStrictFalseRouteRoute: typeof ParamsPsStrictFalseRouteRouteWithChildren\n RelativeLinkRouteRoute: typeof RelativeLinkRouteRouteWithChildren\n RelativeUseNavigateRouteRoute: typeof RelativeUseNavigateRouteRouteWithChildren\n anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute\n groupLayoutRoute: typeof groupLayoutRouteWithChildren\n groupInsideRoute: typeof groupInsideRoute\n groupLazyinsideRoute: typeof groupLazyinsideRoute\n RedirectTargetRoute: typeof RedirectTargetRouteWithChildren\n StructuralSharingEnabledRoute: typeof StructuralSharingEnabledRoute\n ParamsPsIndexRoute: typeof ParamsPsIndexRoute\n RedirectIndexRoute: typeof RedirectIndexRoute\n RelativeIndexRoute: typeof RelativeIndexRoute\n ParamsPsNamedFooRouteRoute: typeof ParamsPsNamedFooRouteRouteWithChildren\n groupSubfolderInsideRoute: typeof groupSubfolderInsideRoute\n ParamsPsNamedPrefixChar123fooChar125Route: typeof ParamsPsNamedPrefixChar123fooChar125Route\n ParamsPsNamedChar123fooChar125suffixRoute: typeof ParamsPsNamedChar123fooChar125suffixRoute\n ParamsPsWildcardSplatRoute: typeof ParamsPsWildcardSplatRoute\n ParamsPsWildcardPrefixAtChar45824Char123Char125Route: typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route\n ParamsPsWildcardPrefixChar123Char125Route: typeof ParamsPsWildcardPrefixChar123Char125Route\n ParamsPsWildcardChar123Char125suffixRoute: typeof ParamsPsWildcardChar123Char125suffixRoute\n ParamsPsWildcardChar123Char125suffixAtChar45824Route: typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route\n ParamsSingleValueRoute: typeof ParamsSingleValueRoute\n PostsPostIdEditRoute: typeof PostsPostIdEditRoute\n RedirectPreloadFirstRoute: typeof RedirectPreloadFirstRoute\n RedirectPreloadSecondRoute: typeof RedirectPreloadSecondRoute\n RedirectPreloadThirdRoute: typeof RedirectPreloadThirdRoute\n ParamsPsNamedIndexRoute: typeof ParamsPsNamedIndexRoute\n ParamsPsWildcardIndexRoute: typeof ParamsPsWildcardIndexRoute\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/remountDeps': {\n id: '/remountDeps'\n path: '/remountDeps'\n fullPath: '/remountDeps'\n preLoaderRoute: typeof RemountDepsRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts': {\n id: '/posts'\n path: '/posts'\n fullPath: '/posts'\n preLoaderRoute: typeof PostsRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/notRemountDeps': {\n id: '/notRemountDeps'\n path: '/notRemountDeps'\n fullPath: '/notRemountDeps'\n preLoaderRoute: typeof NotRemountDepsRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/masks': {\n id: '/masks'\n path: '/masks'\n fullPath: '/masks'\n preLoaderRoute: typeof MasksRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/lazy-error': {\n id: '/lazy-error'\n path: '/lazy-error'\n fullPath: '/lazy-error'\n preLoaderRoute: typeof LazyErrorRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/hover-preload-hash': {\n id: '/hover-preload-hash'\n path: '/hover-preload-hash'\n fullPath: '/hover-preload-hash'\n preLoaderRoute: typeof HoverPreloadHashRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/editing-b': {\n id: '/editing-b'\n path: '/editing-b'\n fullPath: '/editing-b'\n preLoaderRoute: typeof EditingBRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/editing-a': {\n id: '/editing-a'\n path: '/editing-a'\n fullPath: '/editing-a'\n preLoaderRoute: typeof EditingARouteImport\n parentRoute: typeof rootRouteImport\n }\n '/component-types-test': {\n id: '/component-types-test'\n path: '/component-types-test'\n fullPath: '/component-types-test'\n preLoaderRoute: typeof ComponentTypesTestRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/anchor': {\n id: '/anchor'\n path: '/anchor'\n fullPath: '/anchor'\n preLoaderRoute: typeof AnchorRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/_layout': {\n id: '/_layout'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof LayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/๋Œ€ํ•œ๋ฏผ๊ตญ': {\n id: '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n path: '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n fullPath: '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/search-params': {\n id: '/search-params'\n path: '/search-params'\n fullPath: '/search-params'\n preLoaderRoute: typeof SearchParamsRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/pathless-layout': {\n id: '/pathless-layout'\n path: '/pathless-layout'\n fullPath: '/pathless-layout'\n preLoaderRoute: typeof PathlessLayoutRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/non-nested': {\n id: '/non-nested'\n path: '/non-nested'\n fullPath: '/non-nested'\n preLoaderRoute: typeof NonNestedRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/fullpath-test': {\n id: '/fullpath-test'\n path: '/fullpath-test'\n fullPath: '/fullpath-test'\n preLoaderRoute: typeof FullpathTestRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/search-params/': {\n id: '/search-params/'\n path: '/'\n fullPath: '/search-params/'\n preLoaderRoute: typeof SearchParamsIndexRouteImport\n parentRoute: typeof SearchParamsRouteRoute\n }\n '/relative/': {\n id: '/relative/'\n path: '/relative'\n fullPath: '/relative/'\n preLoaderRoute: typeof RelativeIndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/redirect/': {\n id: '/redirect/'\n path: '/redirect'\n fullPath: '/redirect/'\n preLoaderRoute: typeof RedirectIndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts/': {\n id: '/posts/'\n path: '/'\n fullPath: '/posts/'\n preLoaderRoute: typeof PostsIndexRouteImport\n parentRoute: typeof PostsRoute\n }\n '/params-ps/': {\n id: '/params-ps/'\n path: '/params-ps'\n fullPath: '/params-ps/'\n preLoaderRoute: typeof ParamsPsIndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/structural-sharing/$enabled': {\n id: '/structural-sharing/$enabled'\n path: '/structural-sharing/$enabled'\n fullPath: '/structural-sharing/$enabled'\n preLoaderRoute: typeof StructuralSharingEnabledRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/search-params/default': {\n id: '/search-params/default'\n path: '/default'\n fullPath: '/search-params/default'\n preLoaderRoute: typeof SearchParamsDefaultRouteImport\n parentRoute: typeof SearchParamsRouteRoute\n }\n '/redirect/$target': {\n id: '/redirect/$target'\n path: '/redirect/$target'\n fullPath: '/redirect/$target'\n preLoaderRoute: typeof RedirectTargetRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts/$postId': {\n id: '/posts/$postId'\n path: '/$postId'\n fullPath: '/posts/$postId'\n preLoaderRoute: typeof PostsPostIdRouteImport\n parentRoute: typeof PostsRoute\n }\n '/_layout/_layout-2': {\n id: '/_layout/_layout-2'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof LayoutLayout2RouteImport\n parentRoute: typeof LayoutRoute\n }\n '/(group)/lazyinside': {\n id: '/(group)/lazyinside'\n path: '/lazyinside'\n fullPath: '/lazyinside'\n preLoaderRoute: typeof groupLazyinsideRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(group)/inside': {\n id: '/(group)/inside'\n path: '/inside'\n fullPath: '/inside'\n preLoaderRoute: typeof groupInsideRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(group)/_layout': {\n id: '/(group)/_layout'\n path: ''\n fullPath: ''\n preLoaderRoute: typeof groupLayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(another-group)/onlyrouteinside': {\n id: '/(another-group)/onlyrouteinside'\n path: '/onlyrouteinside'\n fullPath: '/onlyrouteinside'\n preLoaderRoute: typeof anotherGroupOnlyrouteinsideRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/relative/useNavigate': {\n id: '/relative/useNavigate'\n path: '/relative/useNavigate'\n fullPath: '/relative/useNavigate'\n preLoaderRoute: typeof RelativeUseNavigateRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/relative/link': {\n id: '/relative/link'\n path: '/relative/link'\n fullPath: '/relative/link'\n preLoaderRoute: typeof RelativeLinkRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/pathless-layout/_layout': {\n id: '/pathless-layout/_layout'\n path: ''\n fullPath: '/pathless-layout'\n preLoaderRoute: typeof PathlessLayoutLayoutRouteRouteImport\n parentRoute: typeof PathlessLayoutRouteRoute\n }\n '/params-ps/strict-false': {\n id: '/params-ps/strict-false'\n path: '/params-ps/strict-false'\n fullPath: '/params-ps/strict-false'\n preLoaderRoute: typeof ParamsPsStrictFalseRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/non-nested': {\n id: '/params-ps/non-nested'\n path: '/params-ps/non-nested'\n fullPath: '/params-ps/non-nested'\n preLoaderRoute: typeof ParamsPsNonNestedRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/non-nested/suffix': {\n id: '/non-nested/suffix'\n path: '/suffix'\n fullPath: '/non-nested/suffix'\n preLoaderRoute: typeof NonNestedSuffixRouteRouteImport\n parentRoute: typeof NonNestedRouteRoute\n }\n '/non-nested/prefix': {\n id: '/non-nested/prefix'\n path: '/prefix'\n fullPath: '/non-nested/prefix'\n preLoaderRoute: typeof NonNestedPrefixRouteRouteImport\n parentRoute: typeof NonNestedRouteRoute\n }\n '/non-nested/path': {\n id: '/non-nested/path'\n path: '/path'\n fullPath: '/non-nested/path'\n preLoaderRoute: typeof NonNestedPathRouteRouteImport\n parentRoute: typeof NonNestedRouteRoute\n }\n '/non-nested/named': {\n id: '/non-nested/named'\n path: '/named'\n fullPath: '/non-nested/named'\n preLoaderRoute: typeof NonNestedNamedRouteRouteImport\n parentRoute: typeof NonNestedRouteRoute\n }\n '/non-nested/deep': {\n id: '/non-nested/deep'\n path: '/deep'\n fullPath: '/non-nested/deep'\n preLoaderRoute: typeof NonNestedDeepRouteRouteImport\n parentRoute: typeof NonNestedRouteRoute\n }\n '/fullpath-test/_layout': {\n id: '/fullpath-test/_layout'\n path: ''\n fullPath: '/fullpath-test'\n preLoaderRoute: typeof FullpathTestLayoutRouteRouteImport\n parentRoute: typeof FullpathTestRouteRoute\n }\n '/redirect/$target/': {\n id: '/redirect/$target/'\n path: '/'\n fullPath: '/redirect/$target/'\n preLoaderRoute: typeof RedirectTargetIndexRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/pathless-layout/_layout/': {\n id: '/pathless-layout/_layout/'\n path: '/'\n fullPath: '/pathless-layout/'\n preLoaderRoute: typeof PathlessLayoutLayoutIndexRouteImport\n parentRoute: typeof PathlessLayoutLayoutRouteRoute\n }\n '/params-ps/wildcard/': {\n id: '/params-ps/wildcard/'\n path: '/params-ps/wildcard'\n fullPath: '/params-ps/wildcard/'\n preLoaderRoute: typeof ParamsPsWildcardIndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/named/': {\n id: '/params-ps/named/'\n path: '/params-ps/named'\n fullPath: '/params-ps/named/'\n preLoaderRoute: typeof ParamsPsNamedIndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/fullpath-test/_layout/': {\n id: '/fullpath-test/_layout/'\n path: '/'\n fullPath: '/fullpath-test/'\n preLoaderRoute: typeof FullpathTestLayoutIndexRouteImport\n parentRoute: typeof FullpathTestLayoutRouteRoute\n }\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id': {\n id: '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id'\n path: '/๐Ÿš€/$id'\n fullPath: '/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id'\n preLoaderRoute: typeof Char45824Char54620Char48124Char44397Char55357Char56960IdRouteImport\n parentRoute: typeof Char45824Char54620Char48124Char44397RouteRoute\n }\n '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$': {\n id: '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$'\n path: '/wildcard/$'\n fullPath: '/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$'\n preLoaderRoute: typeof Char45824Char54620Char48124Char44397WildcardSplatRouteImport\n parentRoute: typeof Char45824Char54620Char48124Char44397RouteRoute\n }\n '/relative/useNavigate/relative-useNavigate-b': {\n id: '/relative/useNavigate/relative-useNavigate-b'\n path: '/relative-useNavigate-b'\n fullPath: '/relative/useNavigate/relative-useNavigate-b'\n preLoaderRoute: typeof RelativeUseNavigateRelativeUseNavigateBRouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/useNavigate/relative-useNavigate-a': {\n id: '/relative/useNavigate/relative-useNavigate-a'\n path: '/relative-useNavigate-a'\n fullPath: '/relative/useNavigate/relative-useNavigate-a'\n preLoaderRoute: typeof RelativeUseNavigateRelativeUseNavigateARouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/link/relative-link-b': {\n id: '/relative/link/relative-link-b'\n path: '/relative-link-b'\n fullPath: '/relative/link/relative-link-b'\n preLoaderRoute: typeof RelativeLinkRelativeLinkBRouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/relative/link/relative-link-a': {\n id: '/relative/link/relative-link-a'\n path: '/relative-link-a'\n fullPath: '/relative/link/relative-link-a'\n preLoaderRoute: typeof RelativeLinkRelativeLinkARouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/redirect/preload/third': {\n id: '/redirect/preload/third'\n path: '/redirect/preload/third'\n fullPath: '/redirect/preload/third'\n preLoaderRoute: typeof RedirectPreloadThirdRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/redirect/preload/second': {\n id: '/redirect/preload/second'\n path: '/redirect/preload/second'\n fullPath: '/redirect/preload/second'\n preLoaderRoute: typeof RedirectPreloadSecondRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/redirect/preload/first': {\n id: '/redirect/preload/first'\n path: '/redirect/preload/first'\n fullPath: '/redirect/preload/first'\n preLoaderRoute: typeof RedirectPreloadFirstRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/redirect/$target/via-routeApi-redirect-loader': {\n id: '/redirect/$target/via-routeApi-redirect-loader'\n path: '/via-routeApi-redirect-loader'\n fullPath: '/redirect/$target/via-routeApi-redirect-loader'\n preLoaderRoute: typeof RedirectTargetViaRouteApiRedirectLoaderRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/redirect/$target/via-routeApi-redirect-beforeLoad': {\n id: '/redirect/$target/via-routeApi-redirect-beforeLoad'\n path: '/via-routeApi-redirect-beforeLoad'\n fullPath: '/redirect/$target/via-routeApi-redirect-beforeLoad'\n preLoaderRoute: typeof RedirectTargetViaRouteApiRedirectBeforeLoadRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/redirect/$target/via-route-redirect-loader': {\n id: '/redirect/$target/via-route-redirect-loader'\n path: '/via-route-redirect-loader'\n fullPath: '/redirect/$target/via-route-redirect-loader'\n preLoaderRoute: typeof RedirectTargetViaRouteRedirectLoaderRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/redirect/$target/via-route-redirect-beforeLoad': {\n id: '/redirect/$target/via-route-redirect-beforeLoad'\n path: '/via-route-redirect-beforeLoad'\n fullPath: '/redirect/$target/via-route-redirect-beforeLoad'\n preLoaderRoute: typeof RedirectTargetViaRouteRedirectBeforeLoadRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/redirect/$target/via-loader': {\n id: '/redirect/$target/via-loader'\n path: '/via-loader'\n fullPath: '/redirect/$target/via-loader'\n preLoaderRoute: typeof RedirectTargetViaLoaderRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/redirect/$target/via-beforeLoad': {\n id: '/redirect/$target/via-beforeLoad'\n path: '/via-beforeLoad'\n fullPath: '/redirect/$target/via-beforeLoad'\n preLoaderRoute: typeof RedirectTargetViaBeforeLoadRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/redirect/$target/destination': {\n id: '/redirect/$target/destination'\n path: '/destination'\n fullPath: '/redirect/$target/destination'\n preLoaderRoute: typeof RedirectTargetDestinationRouteImport\n parentRoute: typeof RedirectTargetRoute\n }\n '/posts_/$postId/edit': {\n id: '/posts_/$postId/edit'\n path: '/posts/$postId/edit'\n fullPath: '/posts/$postId/edit'\n preLoaderRoute: typeof PostsPostIdEditRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/pathless-layout/_layout/child': {\n id: '/pathless-layout/_layout/child'\n path: '/child'\n fullPath: '/pathless-layout/child'\n preLoaderRoute: typeof PathlessLayoutLayoutChildRouteImport\n parentRoute: typeof PathlessLayoutLayoutRouteRoute\n }\n '/params/single/$value': {\n id: '/params/single/$value'\n path: '/params/single/$value'\n fullPath: '/params/single/$value'\n preLoaderRoute: typeof ParamsSingleValueRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/wildcard/{$}suffix@๋Œ€': {\n id: '/params-ps/wildcard/{$}suffix@๋Œ€'\n path: '/params-ps/wildcard/{$}suffix@๋Œ€'\n fullPath: '/params-ps/wildcard/{$}suffix@๋Œ€'\n preLoaderRoute: typeof ParamsPsWildcardChar123Char125suffixAtChar45824RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/wildcard/{$}suffix': {\n id: '/params-ps/wildcard/{$}suffix'\n path: '/params-ps/wildcard/{$}suffix'\n fullPath: '/params-ps/wildcard/{$}suffix'\n preLoaderRoute: typeof ParamsPsWildcardChar123Char125suffixRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/wildcard/prefix{$}': {\n id: '/params-ps/wildcard/prefix{$}'\n path: '/params-ps/wildcard/prefix{$}'\n fullPath: '/params-ps/wildcard/prefix{$}'\n preLoaderRoute: typeof ParamsPsWildcardPrefixChar123Char125RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/wildcard/prefix@๋Œ€{$}': {\n id: '/params-ps/wildcard/prefix@๋Œ€{$}'\n path: '/params-ps/wildcard/prefix@๋Œ€{$}'\n fullPath: '/params-ps/wildcard/prefix@๋Œ€{$}'\n preLoaderRoute: typeof ParamsPsWildcardPrefixAtChar45824Char123Char125RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/wildcard/$': {\n id: '/params-ps/wildcard/$'\n path: '/params-ps/wildcard/$'\n fullPath: '/params-ps/wildcard/$'\n preLoaderRoute: typeof ParamsPsWildcardSplatRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/named/{$foo}suffix': {\n id: '/params-ps/named/{$foo}suffix'\n path: '/params-ps/named/{$foo}suffix'\n fullPath: '/params-ps/named/{$foo}suffix'\n preLoaderRoute: typeof ParamsPsNamedChar123fooChar125suffixRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/params-ps/named/prefix{$foo}': {\n id: '/params-ps/named/prefix{$foo}'\n path: '/params-ps/named/prefix{$foo}'\n fullPath: '/params-ps/named/prefix{$foo}'\n preLoaderRoute: typeof ParamsPsNamedPrefixChar123fooChar125RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/masks/public/$username': {\n id: '/masks/public/$username'\n path: '/public/$username'\n fullPath: '/masks/public/$username'\n preLoaderRoute: typeof MasksPublicUsernameRouteImport\n parentRoute: typeof MasksRoute\n }\n '/masks/admin/$userId': {\n id: '/masks/admin/$userId'\n path: '/admin/$userId'\n fullPath: '/masks/admin/$userId'\n preLoaderRoute: typeof MasksAdminUserIdRouteImport\n parentRoute: typeof MasksRoute\n }\n '/fullpath-test/_layout/$id': {\n id: '/fullpath-test/_layout/$id'\n path: '/$id'\n fullPath: '/fullpath-test/$id'\n preLoaderRoute: typeof FullpathTestLayoutIdRouteImport\n parentRoute: typeof FullpathTestLayoutRouteRoute\n }\n '/_layout/_layout-2/layout-b': {\n id: '/_layout/_layout-2/layout-b'\n path: '/layout-b'\n fullPath: '/layout-b'\n preLoaderRoute: typeof LayoutLayout2LayoutBRouteImport\n parentRoute: typeof LayoutLayout2Route\n }\n '/_layout/_layout-2/layout-a': {\n id: '/_layout/_layout-2/layout-a'\n path: '/layout-a'\n fullPath: '/layout-a'\n preLoaderRoute: typeof LayoutLayout2LayoutARouteImport\n parentRoute: typeof LayoutLayout2Route\n }\n '/(group)/subfolder/inside': {\n id: '/(group)/subfolder/inside'\n path: '/subfolder/inside'\n fullPath: '/subfolder/inside'\n preLoaderRoute: typeof groupSubfolderInsideRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(group)/_layout/insidelayout': {\n id: '/(group)/_layout/insidelayout'\n path: '/insidelayout'\n fullPath: '/insidelayout'\n preLoaderRoute: typeof groupLayoutInsidelayoutRouteImport\n parentRoute: typeof groupLayoutRoute\n }\n '/params-ps/strict-false/$version': {\n id: '/params-ps/strict-false/$version'\n path: '/$version'\n fullPath: '/params-ps/strict-false/$version'\n preLoaderRoute: typeof ParamsPsStrictFalseVersionRouteRouteImport\n parentRoute: typeof ParamsPsStrictFalseRouteRoute\n }\n '/params-ps/non-nested/$foo_': {\n id: '/params-ps/non-nested/$foo_'\n path: '/$foo'\n fullPath: '/params-ps/non-nested/$foo'\n preLoaderRoute: typeof ParamsPsNonNestedFooRouteRouteImport\n parentRoute: typeof ParamsPsNonNestedRouteRoute\n }\n '/params-ps/named/$foo': {\n id: '/params-ps/named/$foo'\n path: '/params-ps/named/$foo'\n fullPath: '/params-ps/named/$foo'\n preLoaderRoute: typeof ParamsPsNamedFooRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/non-nested/suffix/{$baz}suffix': {\n id: '/non-nested/suffix/{$baz}suffix'\n path: '/{$baz}suffix'\n fullPath: '/non-nested/suffix/{$baz}suffix'\n preLoaderRoute: typeof NonNestedSuffixChar123bazChar125suffixRouteRouteImport\n parentRoute: typeof NonNestedSuffixRouteRoute\n }\n '/non-nested/prefix/prefix{$baz}': {\n id: '/non-nested/prefix/prefix{$baz}'\n path: '/prefix{$baz}'\n fullPath: '/non-nested/prefix/prefix{$baz}'\n preLoaderRoute: typeof NonNestedPrefixPrefixChar123bazChar125RouteRouteImport\n parentRoute: typeof NonNestedPrefixRouteRoute\n }\n '/non-nested/path/baz': {\n id: '/non-nested/path/baz'\n path: '/baz'\n fullPath: '/non-nested/path/baz'\n preLoaderRoute: typeof NonNestedPathBazRouteRouteImport\n parentRoute: typeof NonNestedPathRouteRoute\n }\n '/non-nested/named/$baz': {\n id: '/non-nested/named/$baz'\n path: '/$baz'\n fullPath: '/non-nested/named/$baz'\n preLoaderRoute: typeof NonNestedNamedBazRouteRouteImport\n parentRoute: typeof NonNestedNamedRouteRoute\n }\n '/non-nested/deep/$baz': {\n id: '/non-nested/deep/$baz'\n path: '/$baz'\n fullPath: '/non-nested/deep/$baz'\n preLoaderRoute: typeof NonNestedDeepBazRouteRouteImport\n parentRoute: typeof NonNestedDeepRouteRoute\n }\n '/relative/useNavigate/with-search/': {\n id: '/relative/useNavigate/with-search/'\n path: '/with-search'\n fullPath: '/relative/useNavigate/with-search/'\n preLoaderRoute: typeof RelativeUseNavigateWithSearchIndexRouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/useNavigate/path/': {\n id: '/relative/useNavigate/path/'\n path: '/path'\n fullPath: '/relative/useNavigate/path/'\n preLoaderRoute: typeof RelativeUseNavigatePathIndexRouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/useNavigate/nested/': {\n id: '/relative/useNavigate/nested/'\n path: '/nested'\n fullPath: '/relative/useNavigate/nested/'\n preLoaderRoute: typeof RelativeUseNavigateNestedIndexRouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/link/with-search/': {\n id: '/relative/link/with-search/'\n path: '/with-search'\n fullPath: '/relative/link/with-search/'\n preLoaderRoute: typeof RelativeLinkWithSearchIndexRouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/relative/link/path/': {\n id: '/relative/link/path/'\n path: '/path'\n fullPath: '/relative/link/path/'\n preLoaderRoute: typeof RelativeLinkPathIndexRouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/relative/link/nested/': {\n id: '/relative/link/nested/'\n path: '/nested'\n fullPath: '/relative/link/nested/'\n preLoaderRoute: typeof RelativeLinkNestedIndexRouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/non-nested/suffix/{$baz}suffix/': {\n id: '/non-nested/suffix/{$baz}suffix/'\n path: '/'\n fullPath: '/non-nested/suffix/{$baz}suffix/'\n preLoaderRoute: typeof NonNestedSuffixChar123bazChar125suffixIndexRouteImport\n parentRoute: typeof NonNestedSuffixChar123bazChar125suffixRouteRoute\n }\n '/non-nested/prefix/prefix{$baz}/': {\n id: '/non-nested/prefix/prefix{$baz}/'\n path: '/'\n fullPath: '/non-nested/prefix/prefix{$baz}/'\n preLoaderRoute: typeof NonNestedPrefixPrefixChar123bazChar125IndexRouteImport\n parentRoute: typeof NonNestedPrefixPrefixChar123bazChar125RouteRoute\n }\n '/non-nested/path/baz/': {\n id: '/non-nested/path/baz/'\n path: '/'\n fullPath: '/non-nested/path/baz/'\n preLoaderRoute: typeof NonNestedPathBazIndexRouteImport\n parentRoute: typeof NonNestedPathBazRouteRoute\n }\n '/non-nested/named/$baz/': {\n id: '/non-nested/named/$baz/'\n path: '/'\n fullPath: '/non-nested/named/$baz/'\n preLoaderRoute: typeof NonNestedNamedBazIndexRouteImport\n parentRoute: typeof NonNestedNamedBazRouteRoute\n }\n '/non-nested/deep/$baz/': {\n id: '/non-nested/deep/$baz/'\n path: '/'\n fullPath: '/non-nested/deep/$baz/'\n preLoaderRoute: typeof NonNestedDeepBazIndexRouteImport\n parentRoute: typeof NonNestedDeepBazRouteRoute\n }\n '/params-ps/non-nested/$foo_/$bar': {\n id: '/params-ps/non-nested/$foo_/$bar'\n path: '/$bar'\n fullPath: '/params-ps/non-nested/$foo/$bar'\n preLoaderRoute: typeof ParamsPsNonNestedFooBarRouteImport\n parentRoute: typeof ParamsPsNonNestedFooRouteRoute\n }\n '/non-nested/suffix/{$baz}suffix_/bar': {\n id: '/non-nested/suffix/{$baz}suffix_/bar'\n path: '/{$baz}suffix/bar'\n fullPath: '/non-nested/suffix/{$baz}suffix/bar'\n preLoaderRoute: typeof NonNestedSuffixChar123bazChar125suffixBarRouteImport\n parentRoute: typeof NonNestedSuffixRouteRoute\n }\n '/non-nested/suffix/{$baz}suffix/foo': {\n id: '/non-nested/suffix/{$baz}suffix/foo'\n path: '/foo'\n fullPath: '/non-nested/suffix/{$baz}suffix/foo'\n preLoaderRoute: typeof NonNestedSuffixChar123bazChar125suffixFooRouteImport\n parentRoute: typeof NonNestedSuffixChar123bazChar125suffixRouteRoute\n }\n '/non-nested/prefix/prefix{$baz}_/bar': {\n id: '/non-nested/prefix/prefix{$baz}_/bar'\n path: '/prefix{$baz}/bar'\n fullPath: '/non-nested/prefix/prefix{$baz}/bar'\n preLoaderRoute: typeof NonNestedPrefixPrefixChar123bazChar125BarRouteImport\n parentRoute: typeof NonNestedPrefixRouteRoute\n }\n '/non-nested/prefix/prefix{$baz}/foo': {\n id: '/non-nested/prefix/prefix{$baz}/foo'\n path: '/foo'\n fullPath: '/non-nested/prefix/prefix{$baz}/foo'\n preLoaderRoute: typeof NonNestedPrefixPrefixChar123bazChar125FooRouteImport\n parentRoute: typeof NonNestedPrefixPrefixChar123bazChar125RouteRoute\n }\n '/non-nested/path/baz_/bar': {\n id: '/non-nested/path/baz_/bar'\n path: '/baz/bar'\n fullPath: '/non-nested/path/baz/bar'\n preLoaderRoute: typeof NonNestedPathBazBarRouteImport\n parentRoute: typeof NonNestedPathRouteRoute\n }\n '/non-nested/path/baz/foo': {\n id: '/non-nested/path/baz/foo'\n path: '/foo'\n fullPath: '/non-nested/path/baz/foo'\n preLoaderRoute: typeof NonNestedPathBazFooRouteImport\n parentRoute: typeof NonNestedPathBazRouteRoute\n }\n '/non-nested/named/$baz_/bar': {\n id: '/non-nested/named/$baz_/bar'\n path: '/$baz/bar'\n fullPath: '/non-nested/named/$baz/bar'\n preLoaderRoute: typeof NonNestedNamedBazBarRouteImport\n parentRoute: typeof NonNestedNamedRouteRoute\n }\n '/non-nested/named/$baz/foo': {\n id: '/non-nested/named/$baz/foo'\n path: '/foo'\n fullPath: '/non-nested/named/$baz/foo'\n preLoaderRoute: typeof NonNestedNamedBazFooRouteImport\n parentRoute: typeof NonNestedNamedBazRouteRoute\n }\n '/params-ps/named/$foo/$bar': {\n id: '/params-ps/named/$foo/$bar'\n path: '/$bar'\n fullPath: '/params-ps/named/$foo/$bar'\n preLoaderRoute: typeof ParamsPsNamedFooBarRouteRouteImport\n parentRoute: typeof ParamsPsNamedFooRouteRoute\n }\n '/non-nested/deep/$baz_/bar': {\n id: '/non-nested/deep/$baz_/bar'\n path: '/$baz/bar'\n fullPath: '/non-nested/deep/$baz/bar'\n preLoaderRoute: typeof NonNestedDeepBazBarRouteRouteImport\n parentRoute: typeof NonNestedDeepRouteRoute\n }\n '/relative/useNavigate/path/$path/': {\n id: '/relative/useNavigate/path/$path/'\n path: '/path/$path'\n fullPath: '/relative/useNavigate/path/$path/'\n preLoaderRoute: typeof RelativeUseNavigatePathPathIndexRouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/useNavigate/nested/deep/': {\n id: '/relative/useNavigate/nested/deep/'\n path: '/nested/deep'\n fullPath: '/relative/useNavigate/nested/deep/'\n preLoaderRoute: typeof RelativeUseNavigateNestedDeepIndexRouteImport\n parentRoute: typeof RelativeUseNavigateRouteRoute\n }\n '/relative/link/path/$path/': {\n id: '/relative/link/path/$path/'\n path: '/path/$path'\n fullPath: '/relative/link/path/$path/'\n preLoaderRoute: typeof RelativeLinkPathPathIndexRouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/relative/link/nested/deep/': {\n id: '/relative/link/nested/deep/'\n path: '/nested/deep'\n fullPath: '/relative/link/nested/deep/'\n preLoaderRoute: typeof RelativeLinkNestedDeepIndexRouteImport\n parentRoute: typeof RelativeLinkRouteRoute\n }\n '/non-nested/deep/$baz_/bar/': {\n id: '/non-nested/deep/$baz_/bar/'\n path: '/'\n fullPath: '/non-nested/deep/$baz/bar/'\n preLoaderRoute: typeof NonNestedDeepBazBarIndexRouteImport\n parentRoute: typeof NonNestedDeepBazBarRouteRoute\n }\n '/params-ps/named/$foo/$bar/$baz': {\n id: '/params-ps/named/$foo/$bar/$baz'\n path: '/$baz'\n fullPath: '/params-ps/named/$foo/$bar/$baz'\n preLoaderRoute: typeof ParamsPsNamedFooBarBazRouteImport\n parentRoute: typeof ParamsPsNamedFooBarRouteRoute\n }\n '/non-nested/deep/$baz_/bar_/qux': {\n id: '/non-nested/deep/$baz_/bar_/qux'\n path: '/$baz/bar/qux'\n fullPath: '/non-nested/deep/$baz/bar/qux'\n preLoaderRoute: typeof NonNestedDeepBazBarQuxRouteImport\n parentRoute: typeof NonNestedDeepRouteRoute\n }\n '/non-nested/deep/$baz_/bar/$foo': {\n id: '/non-nested/deep/$baz_/bar/$foo'\n path: '/$foo'\n fullPath: '/non-nested/deep/$baz/bar/$foo'\n preLoaderRoute: typeof NonNestedDeepBazBarFooRouteRouteImport\n parentRoute: typeof NonNestedDeepBazBarRouteRoute\n }\n '/non-nested/deep/$baz_/bar/$foo/': {\n id: '/non-nested/deep/$baz_/bar/$foo/'\n path: '/'\n fullPath: '/non-nested/deep/$baz/bar/$foo/'\n preLoaderRoute: typeof NonNestedDeepBazBarFooIndexRouteImport\n parentRoute: typeof NonNestedDeepBazBarFooRouteRoute\n }\n '/non-nested/deep/$baz_/bar/$foo_/qux': {\n id: '/non-nested/deep/$baz_/bar/$foo_/qux'\n path: '/$foo/qux'\n fullPath: '/non-nested/deep/$baz/bar/$foo/qux'\n preLoaderRoute: typeof NonNestedDeepBazBarFooQuxRouteImport\n parentRoute: typeof NonNestedDeepBazBarRouteRoute\n }\n }\n}\n\ninterface FullpathTestLayoutRouteRouteChildren {\n FullpathTestLayoutIdRoute: typeof FullpathTestLayoutIdRoute\n FullpathTestLayoutIndexRoute: typeof FullpathTestLayoutIndexRoute\n}\n\nconst FullpathTestLayoutRouteRouteChildren: FullpathTestLayoutRouteRouteChildren =\n {\n FullpathTestLayoutIdRoute: FullpathTestLayoutIdRoute,\n FullpathTestLayoutIndexRoute: FullpathTestLayoutIndexRoute,\n }\n\nconst FullpathTestLayoutRouteRouteWithChildren =\n FullpathTestLayoutRouteRoute._addFileChildren(\n FullpathTestLayoutRouteRouteChildren,\n )\n\ninterface FullpathTestRouteRouteChildren {\n FullpathTestLayoutRouteRoute: typeof FullpathTestLayoutRouteRouteWithChildren\n}\n\nconst FullpathTestRouteRouteChildren: FullpathTestRouteRouteChildren = {\n FullpathTestLayoutRouteRoute: FullpathTestLayoutRouteRouteWithChildren,\n}\n\nconst FullpathTestRouteRouteWithChildren =\n FullpathTestRouteRoute._addFileChildren(FullpathTestRouteRouteChildren)\n\ninterface NonNestedDeepBazRouteRouteChildren {\n NonNestedDeepBazIndexRoute: typeof NonNestedDeepBazIndexRoute\n}\n\nconst NonNestedDeepBazRouteRouteChildren: NonNestedDeepBazRouteRouteChildren = {\n NonNestedDeepBazIndexRoute: NonNestedDeepBazIndexRoute,\n}\n\nconst NonNestedDeepBazRouteRouteWithChildren =\n NonNestedDeepBazRouteRoute._addFileChildren(\n NonNestedDeepBazRouteRouteChildren,\n )\n\ninterface NonNestedDeepBazBarFooRouteRouteChildren {\n NonNestedDeepBazBarFooIndexRoute: typeof NonNestedDeepBazBarFooIndexRoute\n}\n\nconst NonNestedDeepBazBarFooRouteRouteChildren: NonNestedDeepBazBarFooRouteRouteChildren =\n {\n NonNestedDeepBazBarFooIndexRoute: NonNestedDeepBazBarFooIndexRoute,\n }\n\nconst NonNestedDeepBazBarFooRouteRouteWithChildren =\n NonNestedDeepBazBarFooRouteRoute._addFileChildren(\n NonNestedDeepBazBarFooRouteRouteChildren,\n )\n\ninterface NonNestedDeepBazBarRouteRouteChildren {\n NonNestedDeepBazBarFooRouteRoute: typeof NonNestedDeepBazBarFooRouteRouteWithChildren\n NonNestedDeepBazBarIndexRoute: typeof NonNestedDeepBazBarIndexRoute\n NonNestedDeepBazBarFooQuxRoute: typeof NonNestedDeepBazBarFooQuxRoute\n}\n\nconst NonNestedDeepBazBarRouteRouteChildren: NonNestedDeepBazBarRouteRouteChildren =\n {\n NonNestedDeepBazBarFooRouteRoute:\n NonNestedDeepBazBarFooRouteRouteWithChildren,\n NonNestedDeepBazBarIndexRoute: NonNestedDeepBazBarIndexRoute,\n NonNestedDeepBazBarFooQuxRoute: NonNestedDeepBazBarFooQuxRoute,\n }\n\nconst NonNestedDeepBazBarRouteRouteWithChildren =\n NonNestedDeepBazBarRouteRoute._addFileChildren(\n NonNestedDeepBazBarRouteRouteChildren,\n )\n\ninterface NonNestedDeepRouteRouteChildren {\n NonNestedDeepBazRouteRoute: typeof NonNestedDeepBazRouteRouteWithChildren\n NonNestedDeepBazBarRouteRoute: typeof NonNestedDeepBazBarRouteRouteWithChildren\n NonNestedDeepBazBarQuxRoute: typeof NonNestedDeepBazBarQuxRoute\n}\n\nconst NonNestedDeepRouteRouteChildren: NonNestedDeepRouteRouteChildren = {\n NonNestedDeepBazRouteRoute: NonNestedDeepBazRouteRouteWithChildren,\n NonNestedDeepBazBarRouteRoute: NonNestedDeepBazBarRouteRouteWithChildren,\n NonNestedDeepBazBarQuxRoute: NonNestedDeepBazBarQuxRoute,\n}\n\nconst NonNestedDeepRouteRouteWithChildren =\n NonNestedDeepRouteRoute._addFileChildren(NonNestedDeepRouteRouteChildren)\n\ninterface NonNestedNamedBazRouteRouteChildren {\n NonNestedNamedBazFooRoute: typeof NonNestedNamedBazFooRoute\n NonNestedNamedBazIndexRoute: typeof NonNestedNamedBazIndexRoute\n}\n\nconst NonNestedNamedBazRouteRouteChildren: NonNestedNamedBazRouteRouteChildren =\n {\n NonNestedNamedBazFooRoute: NonNestedNamedBazFooRoute,\n NonNestedNamedBazIndexRoute: NonNestedNamedBazIndexRoute,\n }\n\nconst NonNestedNamedBazRouteRouteWithChildren =\n NonNestedNamedBazRouteRoute._addFileChildren(\n NonNestedNamedBazRouteRouteChildren,\n )\n\ninterface NonNestedNamedRouteRouteChildren {\n NonNestedNamedBazRouteRoute: typeof NonNestedNamedBazRouteRouteWithChildren\n NonNestedNamedBazBarRoute: typeof NonNestedNamedBazBarRoute\n}\n\nconst NonNestedNamedRouteRouteChildren: NonNestedNamedRouteRouteChildren = {\n NonNestedNamedBazRouteRoute: NonNestedNamedBazRouteRouteWithChildren,\n NonNestedNamedBazBarRoute: NonNestedNamedBazBarRoute,\n}\n\nconst NonNestedNamedRouteRouteWithChildren =\n NonNestedNamedRouteRoute._addFileChildren(NonNestedNamedRouteRouteChildren)\n\ninterface NonNestedPathBazRouteRouteChildren {\n NonNestedPathBazFooRoute: typeof NonNestedPathBazFooRoute\n NonNestedPathBazIndexRoute: typeof NonNestedPathBazIndexRoute\n}\n\nconst NonNestedPathBazRouteRouteChildren: NonNestedPathBazRouteRouteChildren = {\n NonNestedPathBazFooRoute: NonNestedPathBazFooRoute,\n NonNestedPathBazIndexRoute: NonNestedPathBazIndexRoute,\n}\n\nconst NonNestedPathBazRouteRouteWithChildren =\n NonNestedPathBazRouteRoute._addFileChildren(\n NonNestedPathBazRouteRouteChildren,\n )\n\ninterface NonNestedPathRouteRouteChildren {\n NonNestedPathBazRouteRoute: typeof NonNestedPathBazRouteRouteWithChildren\n NonNestedPathBazBarRoute: typeof NonNestedPathBazBarRoute\n}\n\nconst NonNestedPathRouteRouteChildren: NonNestedPathRouteRouteChildren = {\n NonNestedPathBazRouteRoute: NonNestedPathBazRouteRouteWithChildren,\n NonNestedPathBazBarRoute: NonNestedPathBazBarRoute,\n}\n\nconst NonNestedPathRouteRouteWithChildren =\n NonNestedPathRouteRoute._addFileChildren(NonNestedPathRouteRouteChildren)\n\ninterface NonNestedPrefixPrefixChar123bazChar125RouteRouteChildren {\n NonNestedPrefixPrefixChar123bazChar125FooRoute: typeof NonNestedPrefixPrefixChar123bazChar125FooRoute\n NonNestedPrefixPrefixChar123bazChar125IndexRoute: typeof NonNestedPrefixPrefixChar123bazChar125IndexRoute\n}\n\nconst NonNestedPrefixPrefixChar123bazChar125RouteRouteChildren: NonNestedPrefixPrefixChar123bazChar125RouteRouteChildren =\n {\n NonNestedPrefixPrefixChar123bazChar125FooRoute:\n NonNestedPrefixPrefixChar123bazChar125FooRoute,\n NonNestedPrefixPrefixChar123bazChar125IndexRoute:\n NonNestedPrefixPrefixChar123bazChar125IndexRoute,\n }\n\nconst NonNestedPrefixPrefixChar123bazChar125RouteRouteWithChildren =\n NonNestedPrefixPrefixChar123bazChar125RouteRoute._addFileChildren(\n NonNestedPrefixPrefixChar123bazChar125RouteRouteChildren,\n )\n\ninterface NonNestedPrefixRouteRouteChildren {\n NonNestedPrefixPrefixChar123bazChar125RouteRoute: typeof NonNestedPrefixPrefixChar123bazChar125RouteRouteWithChildren\n NonNestedPrefixPrefixChar123bazChar125BarRoute: typeof NonNestedPrefixPrefixChar123bazChar125BarRoute\n}\n\nconst NonNestedPrefixRouteRouteChildren: NonNestedPrefixRouteRouteChildren = {\n NonNestedPrefixPrefixChar123bazChar125RouteRoute:\n NonNestedPrefixPrefixChar123bazChar125RouteRouteWithChildren,\n NonNestedPrefixPrefixChar123bazChar125BarRoute:\n NonNestedPrefixPrefixChar123bazChar125BarRoute,\n}\n\nconst NonNestedPrefixRouteRouteWithChildren =\n NonNestedPrefixRouteRoute._addFileChildren(NonNestedPrefixRouteRouteChildren)\n\ninterface NonNestedSuffixChar123bazChar125suffixRouteRouteChildren {\n NonNestedSuffixChar123bazChar125suffixFooRoute: typeof NonNestedSuffixChar123bazChar125suffixFooRoute\n NonNestedSuffixChar123bazChar125suffixIndexRoute: typeof NonNestedSuffixChar123bazChar125suffixIndexRoute\n}\n\nconst NonNestedSuffixChar123bazChar125suffixRouteRouteChildren: NonNestedSuffixChar123bazChar125suffixRouteRouteChildren =\n {\n NonNestedSuffixChar123bazChar125suffixFooRoute:\n NonNestedSuffixChar123bazChar125suffixFooRoute,\n NonNestedSuffixChar123bazChar125suffixIndexRoute:\n NonNestedSuffixChar123bazChar125suffixIndexRoute,\n }\n\nconst NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren =\n NonNestedSuffixChar123bazChar125suffixRouteRoute._addFileChildren(\n NonNestedSuffixChar123bazChar125suffixRouteRouteChildren,\n )\n\ninterface NonNestedSuffixRouteRouteChildren {\n NonNestedSuffixChar123bazChar125suffixRouteRoute: typeof NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren\n NonNestedSuffixChar123bazChar125suffixBarRoute: typeof NonNestedSuffixChar123bazChar125suffixBarRoute\n}\n\nconst NonNestedSuffixRouteRouteChildren: NonNestedSuffixRouteRouteChildren = {\n NonNestedSuffixChar123bazChar125suffixRouteRoute:\n NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren,\n NonNestedSuffixChar123bazChar125suffixBarRoute:\n NonNestedSuffixChar123bazChar125suffixBarRoute,\n}\n\nconst NonNestedSuffixRouteRouteWithChildren =\n NonNestedSuffixRouteRoute._addFileChildren(NonNestedSuffixRouteRouteChildren)\n\ninterface NonNestedRouteRouteChildren {\n NonNestedDeepRouteRoute: typeof NonNestedDeepRouteRouteWithChildren\n NonNestedNamedRouteRoute: typeof NonNestedNamedRouteRouteWithChildren\n NonNestedPathRouteRoute: typeof NonNestedPathRouteRouteWithChildren\n NonNestedPrefixRouteRoute: typeof NonNestedPrefixRouteRouteWithChildren\n NonNestedSuffixRouteRoute: typeof NonNestedSuffixRouteRouteWithChildren\n}\n\nconst NonNestedRouteRouteChildren: NonNestedRouteRouteChildren = {\n NonNestedDeepRouteRoute: NonNestedDeepRouteRouteWithChildren,\n NonNestedNamedRouteRoute: NonNestedNamedRouteRouteWithChildren,\n NonNestedPathRouteRoute: NonNestedPathRouteRouteWithChildren,\n NonNestedPrefixRouteRoute: NonNestedPrefixRouteRouteWithChildren,\n NonNestedSuffixRouteRoute: NonNestedSuffixRouteRouteWithChildren,\n}\n\nconst NonNestedRouteRouteWithChildren = NonNestedRouteRoute._addFileChildren(\n NonNestedRouteRouteChildren,\n)\n\ninterface PathlessLayoutLayoutRouteRouteChildren {\n PathlessLayoutLayoutChildRoute: typeof PathlessLayoutLayoutChildRoute\n PathlessLayoutLayoutIndexRoute: typeof PathlessLayoutLayoutIndexRoute\n}\n\nconst PathlessLayoutLayoutRouteRouteChildren: PathlessLayoutLayoutRouteRouteChildren =\n {\n PathlessLayoutLayoutChildRoute: PathlessLayoutLayoutChildRoute,\n PathlessLayoutLayoutIndexRoute: PathlessLayoutLayoutIndexRoute,\n }\n\nconst PathlessLayoutLayoutRouteRouteWithChildren =\n PathlessLayoutLayoutRouteRoute._addFileChildren(\n PathlessLayoutLayoutRouteRouteChildren,\n )\n\ninterface PathlessLayoutRouteRouteChildren {\n PathlessLayoutLayoutRouteRoute: typeof PathlessLayoutLayoutRouteRouteWithChildren\n}\n\nconst PathlessLayoutRouteRouteChildren: PathlessLayoutRouteRouteChildren = {\n PathlessLayoutLayoutRouteRoute: PathlessLayoutLayoutRouteRouteWithChildren,\n}\n\nconst PathlessLayoutRouteRouteWithChildren =\n PathlessLayoutRouteRoute._addFileChildren(PathlessLayoutRouteRouteChildren)\n\ninterface SearchParamsRouteRouteChildren {\n SearchParamsDefaultRoute: typeof SearchParamsDefaultRoute\n SearchParamsIndexRoute: typeof SearchParamsIndexRoute\n}\n\nconst SearchParamsRouteRouteChildren: SearchParamsRouteRouteChildren = {\n SearchParamsDefaultRoute: SearchParamsDefaultRoute,\n SearchParamsIndexRoute: SearchParamsIndexRoute,\n}\n\nconst SearchParamsRouteRouteWithChildren =\n SearchParamsRouteRoute._addFileChildren(SearchParamsRouteRouteChildren)\n\ninterface Char45824Char54620Char48124Char44397RouteRouteChildren {\n Char45824Char54620Char48124Char44397WildcardSplatRoute: typeof Char45824Char54620Char48124Char44397WildcardSplatRoute\n Char45824Char54620Char48124Char44397Char55357Char56960IdRoute: typeof Char45824Char54620Char48124Char44397Char55357Char56960IdRoute\n}\n\nconst Char45824Char54620Char48124Char44397RouteRouteChildren: Char45824Char54620Char48124Char44397RouteRouteChildren =\n {\n Char45824Char54620Char48124Char44397WildcardSplatRoute:\n Char45824Char54620Char48124Char44397WildcardSplatRoute,\n Char45824Char54620Char48124Char44397Char55357Char56960IdRoute:\n Char45824Char54620Char48124Char44397Char55357Char56960IdRoute,\n }\n\nconst Char45824Char54620Char48124Char44397RouteRouteWithChildren =\n Char45824Char54620Char48124Char44397RouteRoute._addFileChildren(\n Char45824Char54620Char48124Char44397RouteRouteChildren,\n )\n\ninterface LayoutLayout2RouteChildren {\n LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute\n LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute\n}\n\nconst LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = {\n LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute,\n LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute,\n}\n\nconst LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren(\n LayoutLayout2RouteChildren,\n)\n\ninterface LayoutRouteChildren {\n LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n LayoutLayout2Route: LayoutLayout2RouteWithChildren,\n}\n\nconst LayoutRouteWithChildren =\n LayoutRoute._addFileChildren(LayoutRouteChildren)\n\ninterface MasksRouteChildren {\n MasksAdminUserIdRoute: typeof MasksAdminUserIdRoute\n MasksPublicUsernameRoute: typeof MasksPublicUsernameRoute\n}\n\nconst MasksRouteChildren: MasksRouteChildren = {\n MasksAdminUserIdRoute: MasksAdminUserIdRoute,\n MasksPublicUsernameRoute: MasksPublicUsernameRoute,\n}\n\nconst MasksRouteWithChildren = MasksRoute._addFileChildren(MasksRouteChildren)\n\ninterface PostsRouteChildren {\n PostsPostIdRoute: typeof PostsPostIdRoute\n PostsIndexRoute: typeof PostsIndexRoute\n}\n\nconst PostsRouteChildren: PostsRouteChildren = {\n PostsPostIdRoute: PostsPostIdRoute,\n PostsIndexRoute: PostsIndexRoute,\n}\n\nconst PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)\n\ninterface ParamsPsNonNestedFooRouteRouteChildren {\n ParamsPsNonNestedFooBarRoute: typeof ParamsPsNonNestedFooBarRoute\n}\n\nconst ParamsPsNonNestedFooRouteRouteChildren: ParamsPsNonNestedFooRouteRouteChildren =\n {\n ParamsPsNonNestedFooBarRoute: ParamsPsNonNestedFooBarRoute,\n }\n\nconst ParamsPsNonNestedFooRouteRouteWithChildren =\n ParamsPsNonNestedFooRouteRoute._addFileChildren(\n ParamsPsNonNestedFooRouteRouteChildren,\n )\n\ninterface ParamsPsNonNestedRouteRouteChildren {\n ParamsPsNonNestedFooRouteRoute: typeof ParamsPsNonNestedFooRouteRouteWithChildren\n}\n\nconst ParamsPsNonNestedRouteRouteChildren: ParamsPsNonNestedRouteRouteChildren =\n {\n ParamsPsNonNestedFooRouteRoute: ParamsPsNonNestedFooRouteRouteWithChildren,\n }\n\nconst ParamsPsNonNestedRouteRouteWithChildren =\n ParamsPsNonNestedRouteRoute._addFileChildren(\n ParamsPsNonNestedRouteRouteChildren,\n )\n\ninterface ParamsPsStrictFalseRouteRouteChildren {\n ParamsPsStrictFalseVersionRouteRoute: typeof ParamsPsStrictFalseVersionRouteRoute\n}\n\nconst ParamsPsStrictFalseRouteRouteChildren: ParamsPsStrictFalseRouteRouteChildren =\n {\n ParamsPsStrictFalseVersionRouteRoute: ParamsPsStrictFalseVersionRouteRoute,\n }\n\nconst ParamsPsStrictFalseRouteRouteWithChildren =\n ParamsPsStrictFalseRouteRoute._addFileChildren(\n ParamsPsStrictFalseRouteRouteChildren,\n )\n\ninterface RelativeLinkRouteRouteChildren {\n RelativeLinkRelativeLinkARoute: typeof RelativeLinkRelativeLinkARoute\n RelativeLinkRelativeLinkBRoute: typeof RelativeLinkRelativeLinkBRoute\n RelativeLinkNestedIndexRoute: typeof RelativeLinkNestedIndexRoute\n RelativeLinkPathIndexRoute: typeof RelativeLinkPathIndexRoute\n RelativeLinkWithSearchIndexRoute: typeof RelativeLinkWithSearchIndexRoute\n RelativeLinkNestedDeepIndexRoute: typeof RelativeLinkNestedDeepIndexRoute\n RelativeLinkPathPathIndexRoute: typeof RelativeLinkPathPathIndexRoute\n}\n\nconst RelativeLinkRouteRouteChildren: RelativeLinkRouteRouteChildren = {\n RelativeLinkRelativeLinkARoute: RelativeLinkRelativeLinkARoute,\n RelativeLinkRelativeLinkBRoute: RelativeLinkRelativeLinkBRoute,\n RelativeLinkNestedIndexRoute: RelativeLinkNestedIndexRoute,\n RelativeLinkPathIndexRoute: RelativeLinkPathIndexRoute,\n RelativeLinkWithSearchIndexRoute: RelativeLinkWithSearchIndexRoute,\n RelativeLinkNestedDeepIndexRoute: RelativeLinkNestedDeepIndexRoute,\n RelativeLinkPathPathIndexRoute: RelativeLinkPathPathIndexRoute,\n}\n\nconst RelativeLinkRouteRouteWithChildren =\n RelativeLinkRouteRoute._addFileChildren(RelativeLinkRouteRouteChildren)\n\ninterface RelativeUseNavigateRouteRouteChildren {\n RelativeUseNavigateRelativeUseNavigateARoute: typeof RelativeUseNavigateRelativeUseNavigateARoute\n RelativeUseNavigateRelativeUseNavigateBRoute: typeof RelativeUseNavigateRelativeUseNavigateBRoute\n RelativeUseNavigateNestedIndexRoute: typeof RelativeUseNavigateNestedIndexRoute\n RelativeUseNavigatePathIndexRoute: typeof RelativeUseNavigatePathIndexRoute\n RelativeUseNavigateWithSearchIndexRoute: typeof RelativeUseNavigateWithSearchIndexRoute\n RelativeUseNavigateNestedDeepIndexRoute: typeof RelativeUseNavigateNestedDeepIndexRoute\n RelativeUseNavigatePathPathIndexRoute: typeof RelativeUseNavigatePathPathIndexRoute\n}\n\nconst RelativeUseNavigateRouteRouteChildren: RelativeUseNavigateRouteRouteChildren =\n {\n RelativeUseNavigateRelativeUseNavigateARoute:\n RelativeUseNavigateRelativeUseNavigateARoute,\n RelativeUseNavigateRelativeUseNavigateBRoute:\n RelativeUseNavigateRelativeUseNavigateBRoute,\n RelativeUseNavigateNestedIndexRoute: RelativeUseNavigateNestedIndexRoute,\n RelativeUseNavigatePathIndexRoute: RelativeUseNavigatePathIndexRoute,\n RelativeUseNavigateWithSearchIndexRoute:\n RelativeUseNavigateWithSearchIndexRoute,\n RelativeUseNavigateNestedDeepIndexRoute:\n RelativeUseNavigateNestedDeepIndexRoute,\n RelativeUseNavigatePathPathIndexRoute:\n RelativeUseNavigatePathPathIndexRoute,\n }\n\nconst RelativeUseNavigateRouteRouteWithChildren =\n RelativeUseNavigateRouteRoute._addFileChildren(\n RelativeUseNavigateRouteRouteChildren,\n )\n\ninterface groupLayoutRouteChildren {\n groupLayoutInsidelayoutRoute: typeof groupLayoutInsidelayoutRoute\n}\n\nconst groupLayoutRouteChildren: groupLayoutRouteChildren = {\n groupLayoutInsidelayoutRoute: groupLayoutInsidelayoutRoute,\n}\n\nconst groupLayoutRouteWithChildren = groupLayoutRoute._addFileChildren(\n groupLayoutRouteChildren,\n)\n\ninterface RedirectTargetRouteChildren {\n RedirectTargetDestinationRoute: typeof RedirectTargetDestinationRoute\n RedirectTargetViaBeforeLoadRoute: typeof RedirectTargetViaBeforeLoadRoute\n RedirectTargetViaLoaderRoute: typeof RedirectTargetViaLoaderRoute\n RedirectTargetViaRouteRedirectBeforeLoadRoute: typeof RedirectTargetViaRouteRedirectBeforeLoadRoute\n RedirectTargetViaRouteRedirectLoaderRoute: typeof RedirectTargetViaRouteRedirectLoaderRoute\n RedirectTargetViaRouteApiRedirectBeforeLoadRoute: typeof RedirectTargetViaRouteApiRedirectBeforeLoadRoute\n RedirectTargetViaRouteApiRedirectLoaderRoute: typeof RedirectTargetViaRouteApiRedirectLoaderRoute\n RedirectTargetIndexRoute: typeof RedirectTargetIndexRoute\n}\n\nconst RedirectTargetRouteChildren: RedirectTargetRouteChildren = {\n RedirectTargetDestinationRoute: RedirectTargetDestinationRoute,\n RedirectTargetViaBeforeLoadRoute: RedirectTargetViaBeforeLoadRoute,\n RedirectTargetViaLoaderRoute: RedirectTargetViaLoaderRoute,\n RedirectTargetViaRouteRedirectBeforeLoadRoute:\n RedirectTargetViaRouteRedirectBeforeLoadRoute,\n RedirectTargetViaRouteRedirectLoaderRoute:\n RedirectTargetViaRouteRedirectLoaderRoute,\n RedirectTargetViaRouteApiRedirectBeforeLoadRoute:\n RedirectTargetViaRouteApiRedirectBeforeLoadRoute,\n RedirectTargetViaRouteApiRedirectLoaderRoute:\n RedirectTargetViaRouteApiRedirectLoaderRoute,\n RedirectTargetIndexRoute: RedirectTargetIndexRoute,\n}\n\nconst RedirectTargetRouteWithChildren = RedirectTargetRoute._addFileChildren(\n RedirectTargetRouteChildren,\n)\n\ninterface ParamsPsNamedFooBarRouteRouteChildren {\n ParamsPsNamedFooBarBazRoute: typeof ParamsPsNamedFooBarBazRoute\n}\n\nconst ParamsPsNamedFooBarRouteRouteChildren: ParamsPsNamedFooBarRouteRouteChildren =\n {\n ParamsPsNamedFooBarBazRoute: ParamsPsNamedFooBarBazRoute,\n }\n\nconst ParamsPsNamedFooBarRouteRouteWithChildren =\n ParamsPsNamedFooBarRouteRoute._addFileChildren(\n ParamsPsNamedFooBarRouteRouteChildren,\n )\n\ninterface ParamsPsNamedFooRouteRouteChildren {\n ParamsPsNamedFooBarRouteRoute: typeof ParamsPsNamedFooBarRouteRouteWithChildren\n}\n\nconst ParamsPsNamedFooRouteRouteChildren: ParamsPsNamedFooRouteRouteChildren = {\n ParamsPsNamedFooBarRouteRoute: ParamsPsNamedFooBarRouteRouteWithChildren,\n}\n\nconst ParamsPsNamedFooRouteRouteWithChildren =\n ParamsPsNamedFooRouteRoute._addFileChildren(\n ParamsPsNamedFooRouteRouteChildren,\n )\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n FullpathTestRouteRoute: FullpathTestRouteRouteWithChildren,\n NonNestedRouteRoute: NonNestedRouteRouteWithChildren,\n PathlessLayoutRouteRoute: PathlessLayoutRouteRouteWithChildren,\n SearchParamsRouteRoute: SearchParamsRouteRouteWithChildren,\n Char45824Char54620Char48124Char44397RouteRoute:\n Char45824Char54620Char48124Char44397RouteRouteWithChildren,\n LayoutRoute: LayoutRouteWithChildren,\n AnchorRoute: AnchorRoute,\n ComponentTypesTestRoute: ComponentTypesTestRoute,\n EditingARoute: EditingARoute,\n EditingBRoute: EditingBRoute,\n HoverPreloadHashRoute: HoverPreloadHashRoute,\n LazyErrorRoute: LazyErrorRoute,\n MasksRoute: MasksRouteWithChildren,\n NotRemountDepsRoute: NotRemountDepsRoute,\n PostsRoute: PostsRouteWithChildren,\n RemountDepsRoute: RemountDepsRoute,\n ParamsPsNonNestedRouteRoute: ParamsPsNonNestedRouteRouteWithChildren,\n ParamsPsStrictFalseRouteRoute: ParamsPsStrictFalseRouteRouteWithChildren,\n RelativeLinkRouteRoute: RelativeLinkRouteRouteWithChildren,\n RelativeUseNavigateRouteRoute: RelativeUseNavigateRouteRouteWithChildren,\n anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute,\n groupLayoutRoute: groupLayoutRouteWithChildren,\n groupInsideRoute: groupInsideRoute,\n groupLazyinsideRoute: groupLazyinsideRoute,\n RedirectTargetRoute: RedirectTargetRouteWithChildren,\n StructuralSharingEnabledRoute: StructuralSharingEnabledRoute,\n ParamsPsIndexRoute: ParamsPsIndexRoute,\n RedirectIndexRoute: RedirectIndexRoute,\n RelativeIndexRoute: RelativeIndexRoute,\n ParamsPsNamedFooRouteRoute: ParamsPsNamedFooRouteRouteWithChildren,\n groupSubfolderInsideRoute: groupSubfolderInsideRoute,\n ParamsPsNamedPrefixChar123fooChar125Route:\n ParamsPsNamedPrefixChar123fooChar125Route,\n ParamsPsNamedChar123fooChar125suffixRoute:\n ParamsPsNamedChar123fooChar125suffixRoute,\n ParamsPsWildcardSplatRoute: ParamsPsWildcardSplatRoute,\n ParamsPsWildcardPrefixAtChar45824Char123Char125Route:\n ParamsPsWildcardPrefixAtChar45824Char123Char125Route,\n ParamsPsWildcardPrefixChar123Char125Route:\n ParamsPsWildcardPrefixChar123Char125Route,\n ParamsPsWildcardChar123Char125suffixRoute:\n ParamsPsWildcardChar123Char125suffixRoute,\n ParamsPsWildcardChar123Char125suffixAtChar45824Route:\n ParamsPsWildcardChar123Char125suffixAtChar45824Route,\n ParamsSingleValueRoute: ParamsSingleValueRoute,\n PostsPostIdEditRoute: PostsPostIdEditRoute,\n RedirectPreloadFirstRoute: RedirectPreloadFirstRoute,\n RedirectPreloadSecondRoute: RedirectPreloadSecondRoute,\n RedirectPreloadThirdRoute: RedirectPreloadThirdRoute,\n ParamsPsNamedIndexRoute: ParamsPsNamedIndexRoute,\n ParamsPsWildcardIndexRoute: ParamsPsWildcardIndexRoute,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(another-group)/onlyrouteinside.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { getRouteApi, useSearch } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nconst routeApi = getRouteApi('/(another-group)/onlyrouteinside')\n\nexport const Route = createFileRoute('/(another-group)/onlyrouteinside')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n component: () => {\n const searchViaHook = useSearch({\n from: '/(another-group)/onlyrouteinside',\n })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(group)/_layout.insidelayout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { getRouteApi, useSearch } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nconst routeApi = getRouteApi('/(group)/_layout/insidelayout')\n\nexport const Route = createFileRoute('/(group)/_layout/insidelayout')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n component: () => {\n const searchViaHook = useSearch({ from: '/(group)/_layout/insidelayout' })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(group)/_layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/(group)/_layout')({\n component: () => (\n <>\n
/(group)/_layout!
\n \n \n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(group)/inside.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { getRouteApi, useSearch } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nconst routeApi = getRouteApi('/(group)/inside')\n\nexport const Route = createFileRoute('/(group)/inside')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n component: () => {\n const searchViaHook = useSearch({ from: '/(group)/inside' })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(group)/lazyinside.lazy.tsx", "content": "import { createLazyFileRoute } from '@tanstack/react-router'\nimport { getRouteApi, useSearch } from '@tanstack/react-router'\n\nconst routeApi = getRouteApi('/(group)/lazyinside')\n\nexport const Route = createLazyFileRoute('/(group)/lazyinside')({\n component: () => {\n const searchViaHook = useSearch({ from: '/(group)/lazyinside' })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(group)/lazyinside.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nexport const Route = createFileRoute('/(group)/lazyinside')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/(group)/subfolder/inside.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { getRouteApi, useSearch } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\n\nconst routeApi = getRouteApi('/(group)/subfolder/inside')\n\nexport const Route = createFileRoute('/(group)/subfolder/inside')({\n validateSearch: zodValidator(z.object({ hello: z.string().optional() })),\n component: () => {\n const searchViaHook = useSearch({ from: '/(group)/subfolder/inside' })\n const searchViaRouteHook = Route.useSearch()\n const searchViaRouteApi = routeApi.useSearch()\n return (\n <>\n
{searchViaHook.hello}
\n
\n {searchViaRouteHook.hello}\n
\n
{searchViaRouteApi.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/__root.tsx", "content": "import {\n HeadContent,\n Link,\n Outlet,\n createRootRoute,\n useCanGoBack,\n useRouter,\n useRouterState,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n const router = useRouter()\n const canGoBack = useCanGoBack()\n // test useRouterState doesn't crash client side navigation\n const _state = useRouterState()\n\n return (\n <>\n \n
\n router.history.back()}\n className={!canGoBack ? 'line-through' : undefined}\n >\n Back\n {' '}\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n Only Route Inside Group\n {' '}\n \n Inside Group\n {' '}\n \n Inside Subfolder Inside Group\n {' '}\n \n Inside Group Inside Layout\n {' '}\n \n Lazy Inside Group\n {' '}\n \n redirect\n {' '}\n \n relative routing\n {' '}\n \n unicode path\n {' '}\n \n This Route Does Not Exist\n {' '}\n \n Masks\n {' '}\n \n Pathless Layout\n {' '}\n \n FullPath Test\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_layout/_layout-2/layout-a')({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_layout/_layout-2/layout-b')({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/_layout/_layout-2.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout/_layout-2')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/_layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/anchor.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { Link, useLocation, useNavigate } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/anchor')({\n component: AnchorComponent,\n})\n\nconst anchors: Array<{\n id: string\n title: string\n hashScrollIntoView?: boolean | ScrollIntoViewOptions\n}> = [\n {\n id: 'default-anchor',\n title: 'Default Anchor',\n },\n {\n id: 'false-anchor',\n title: 'No Scroll Into View',\n hashScrollIntoView: false,\n },\n {\n id: 'smooth-scroll',\n title: 'Smooth Scroll',\n hashScrollIntoView: { behavior: 'smooth' },\n },\n] as const\n\nfunction AnchorSection({ id, title }: { id: string; title: string }) {\n const [hasShown, setHasShown] = useState(false)\n const elementRef = useRef(null)\n\n useLayoutEffect(() => {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (!hasShown && entry.isIntersecting) {\n setHasShown(true)\n }\n },\n { threshold: 0.01 },\n )\n\n const currentRef = elementRef.current\n if (currentRef) {\n observer.observe(currentRef)\n }\n\n return () => {\n if (currentRef) {\n observer.unobserve(currentRef)\n }\n }\n }, [hasShown])\n\n return (\n
\n \n {title}\n {hasShown ? ' (shown)' : ''}\n \n
\n )\n}\n\nfunction AnchorComponent() {\n const navigate = useNavigate()\n const location = useLocation()\n const [withScroll, setWithScroll] = useState(true)\n\n return (\n
\n \n
\n {\n event.preventDefault()\n event.stopPropagation()\n const formData = new FormData(event.target as HTMLFormElement)\n\n const toHash = formData.get('hash') as string\n\n if (!toHash) {\n return\n }\n\n const hashScrollIntoView = withScroll\n ? ({\n behavior: formData.get('scrollBehavior') as ScrollBehavior,\n block: formData.get('scrollBlock') as ScrollLogicalPosition,\n inline: formData.get('scrollInline') as ScrollLogicalPosition,\n } satisfies ScrollIntoViewOptions)\n : false\n\n navigate({ hash: toHash, hashScrollIntoView })\n }}\n >\n

Scroll with navigate

\n
\n \n
\n \n
\n
\n {withScroll ? (\n <>\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n \n ) : null}\n
\n \n Navigate\n \n
\n \n\n {anchors.map((anchor) => (\n \n ))}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/component-types-test.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// Test route for type safety of different component types\n// This test should\n// - check that `false` can be set on the `errorComponent`\n// ...without causing build-time TypeScript errors\nexport const Route = createFileRoute('/component-types-test')({\n component: () =>
Testing test types
,\n errorComponent: false, // Should not cause TypeScript error\n pendingComponent: undefined, // Should not cause TypeScript error\n notFoundComponent: undefined, // Should not cause TypeScript error\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/editing-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { useBlocker } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/editing-a')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const navigate = Route.useNavigate()\n const [input, setInput] = React.useState('')\n\n const { proceed, status } = useBlocker({\n shouldBlockFn: ({ next }) => {\n if (next.fullPath === '/editing-b' && input.length > 0) {\n return true\n }\n return false\n },\n withResolver: true,\n })\n\n return (\n
\n

Editing A

\n \n {\n navigate({ to: '/editing-b' })\n }}\n >\n Go to next step\n \n {status === 'blocked' && (\n \n )}\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/editing-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { useBlocker } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/editing-b')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const navigate = Route.useNavigate()\n const [input, setInput] = React.useState('')\n\n const { proceed, status } = useBlocker({\n condition: input,\n })\n\n return (\n
\n

Editing B

\n \n {\n navigate({ to: '/editing-a' })\n }}\n >\n Go back\n \n {status === 'blocked' && (\n \n )}\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/fullpath-test/_layout/$id.tsx", "content": "import { createFileRoute, useMatches } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/fullpath-test/_layout/$id')({\n component: IdComponent,\n})\n\nfunction IdComponent() {\n const matches = useMatches()\n const { id } = Route.useParams()\n // Find this route's match by routeId\n const idMatch = matches.find(\n (m) => m.routeId === '/fullpath-test/_layout/$id',\n )\n\n return (\n
\n
\n {idMatch?.fullPath ?? 'undefined'}\n
\n
Param: {id}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/fullpath-test/_layout/index.tsx", "content": "import { createFileRoute, useMatches } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/fullpath-test/_layout/')({\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n const matches = useMatches()\n // Find this index route's match by routeId\n const indexMatch = matches.find(\n (m) => m.routeId === '/fullpath-test/_layout/',\n )\n\n return (\n
\n
\n {indexMatch?.fullPath ?? 'undefined'}\n
\n
{Route.to}
\n
FullPath Test Index
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/fullpath-test/_layout/route.tsx", "content": "import { Outlet, createFileRoute, useMatches } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/fullpath-test/_layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n const matches = useMatches()\n // Find this layout's match by routeId\n const layoutMatch = matches.find(\n (m) => m.routeId === '/fullpath-test/_layout',\n )\n\n return (\n
\n
\n {layoutMatch?.fullPath ?? 'undefined'}\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/fullpath-test/route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/fullpath-test')({\n component: () => (\n
\n

FullPath Test Section

\n \n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/hover-preload-hash.tsx", "content": "import { Link, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/hover-preload-hash')({\n component: Page,\n})\n\nfunction Page() {\n return (\n <>\n
Hello from About!
\n \n To hash\n \n\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

Hash is here

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n

\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et justo duo dolores et ea\n rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n ipsum dolor sit amet.\n

\n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/lazy-error.lazy.tsx", "content": "import { createLazyFileRoute } from '@tanstack/react-router'\n\nexport const Route = createLazyFileRoute('/lazy-error')({\n component: LazyErrorComponent,\n errorComponent: () => (\n
\n Lazy route error component\n
\n ),\n})\n\nfunction LazyErrorComponent() {\n return
Lazy route component
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/lazy-error.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/lazy-error')({\n loader: () => {\n throw new Error('Lazy route loader error')\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/masks.admin.$userId.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/masks/admin/$userId')({\n component: AdminUserRoute,\n})\n\nfunction AdminUserRoute() {\n const params = Route.useParams()\n\n return (\n
\n
{params.userId}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/masks.public.$username.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/masks/public/$username')({\n component: PublicUserRoute,\n})\n\nfunction PublicUserRoute() {\n const params = Route.useParams()\n\n return (\n
\n
{params.username}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/masks.tsx", "content": "import {\n Link,\n Outlet,\n createFileRoute,\n useRouterState,\n} from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/masks')({\n component: MasksLayout,\n})\n\nfunction MasksLayout() {\n const location = useRouterState({\n select: (state) => state.location,\n })\n\n return (\n
\n

Route Masks

\n \n
\n
{location.pathname}
\n
\n {location.maskedLocation?.pathname ?? ''}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello deeply nested baz index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested named baz route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz_/bar/$foo/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello deeply nested baz/bar/foo index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz_/bar/$foo')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello deeply nested named baz/bar/foo route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.$foo_.qux.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz_/bar/$foo_/qux')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello deeply nested baz/bar/foo/qux\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz_/bar/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello deeply nested baz/bar index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz_/bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello deeply nested baz/bar route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/$baz_.bar_.qux.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep/$baz_/bar_/qux')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello deeply nested baz/bar/qux\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/deep/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/deep')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested deep layout\n
\n
\n \n To Baz\n \n \n To named baz/bar\n \n \n To named baz/bar/foo\n \n \n To named baz/bar/foo/qux\n \n \n To named baz/bar/qux\n \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/named/$baz.foo.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/named/$baz/foo')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n\n return (\n
\n
\n Hello nested named baz foo page\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/named/$baz.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/named/$baz/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello nested named baz index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/named/$baz.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/named/$baz')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested named baz route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/named/$baz_.bar.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/named/$baz_/bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello non-nested named bar\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/named/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/named')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested named layout\n
\n
\n \n To named index\n \n \n To named foo\n \n \n To named foo 2\n \n \n To named bar\n \n \n To named bar 2\n \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/path/baz.foo.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/path/baz/foo')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n\n return (\n
\n
\n Hello nested path baz foo page\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/path/baz.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/path/baz/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello nested path baz index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/path/baz.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/path/baz')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested path baz route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/path/baz_.bar.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/path/baz_/bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello non-nested path bar\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/path/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/path')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested path layout\n
\n
\n \n To path index\n \n \n To path foo\n \n \n To path foo 2\n \n \n To path bar\n \n \n To path bar 2\n \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/prefix/prefix{$baz}.foo.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/prefix/prefix{$baz}/foo')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n\n return (\n
\n
\n Hello nested prefix foo page\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/prefix/prefix{$baz}.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/prefix/prefix{$baz}/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello nested prefix index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/prefix/prefix{$baz}.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/prefix/prefix{$baz}')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested prefix route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/prefix/prefix{$baz}_.bar.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/prefix/prefix{$baz}_/bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello non-nested prefix bar\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/prefix/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/prefix')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested prefix layout\n
\n
\n \n To prefix index\n \n \n To prefix foo\n \n \n To prefix foo 2\n \n \n To prefix bar\n \n \n To prefix bar 2\n \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n

\n Non-nested paths\n

\n
    \n
  • \n \n To named param tests\n \n \n To prefix param tests\n \n \n To suffix param tests\n \n \n To path tests\n \n
    • \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/suffix/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/suffix')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested suffix layout\n
\n
\n \n To suffix index\n \n \n To suffix foo\n \n \n To suffix foo 2\n \n \n To suffix bar\n \n \n To suffix bar 2\n \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/suffix/{$baz}suffix.foo.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/suffix/{$baz}suffix/foo')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n\n return (\n
\n
\n Hello nested suffix foo page\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/suffix/{$baz}suffix.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/suffix/{$baz}suffix/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello nested suffix index\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/suffix/{$baz}suffix.route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/suffix/{$baz}suffix')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Hello non-nested suffix route layout\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/non-nested/suffix/{$baz}suffix_.bar.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/non-nested/suffix/{$baz}suffix_/bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n return (\n
\n
\n Hello non-nested suffix bar\n
\n
\n {JSON.stringify(params)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/notRemountDeps.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/notRemountDeps')({\n validateSearch(search: { searchParam: string }) {\n return { searchParam: search.searchParam }\n },\n loaderDeps(opts) {\n return opts.search\n },\n component: Home,\n remountDeps(opts) {\n return opts.params\n },\n})\n\nlet counter = 0\n\nfunction Home() {\n const search = Route.useSearch()\n const navigate = Route.useNavigate()\n\n const [mounts, setMounts] = React.useState(counter)\n React.useEffect(() => {\n setMounts(++counter)\n }, [])\n\n return (\n
\n {\n navigate({\n search: { searchParam: Math.random().toString(36).substring(2, 8) },\n })\n }}\n >\n Regenerate search param\n \n\n
Search: {search.searchParam}
\n
Page component mounts: {mounts}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx", "content": "import { Link, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n

Named path params

\n
    \n
  • \n \n /params-ps/named/$foo\n \n
    • \n
  • \n \n /params-ps/named/$foo - with special characters\n \n
    • \n
  • \n \n /params-ps/named/{'prefix{$foo}'}\n \n
    • \n
  • \n \n /params-ps/named/{'{$foo}suffix'}\n \n
    • \n
\n
\n

Wildcard path params

\n
    \n
  • \n \n /params-ps/wildcard/$\n \n
    • \n
  • \n \n /params-ps/wildcard/$ with escaped params\n \n
    • \n
  • \n \n /params-ps/wildcard/$ with encoded params\n \n
    • \n
  • \n \n /params-ps/wildcard/{'prefix{$}'}\n \n
    • \n
  • \n \n /params-ps/wildcard/{'prefix@๋Œ€{$}'}\n \n
    • \n
  • \n \n /params-ps/wildcard/{'{$}suffix'}\n \n
    • \n
  • \n \n /params-ps/wildcard/{'{$}suffix@๋Œ€'}\n \n
    • \n
\n
\n

Non-nested path params

\n
    \n
  • \n \n Non-nested\n \n
    • \n
\n
\n

Parsed params with strict false

\n
    \n
  • \n \n /params-ps/strict-false/$version (1)\n \n
    • \n
  • \n \n /params-ps/strict-false/$version (2)\n \n
    • \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/$bar.$baz.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/named/$foo/$bar/$baz')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const { foo, bar, baz } = Route.useParams()\n return (\n
\n Hello \"/params-ps/named/{foo}/{bar}/{baz}\"!\n
\n baz: {baz}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/$bar.route.tsx", "content": "import {\n Link,\n Outlet,\n createFileRoute,\n useParams,\n} from '@tanstack/react-router'\nimport { RenderCounter } from '../../../../components/RenderCounter'\n\nexport const Route = createFileRoute('/params-ps/named/$foo/$bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const { foo, bar, baz } = useParams({\n strict: false,\n })\n\n return (\n
\n Hello \"/params-ps/named/{foo}/{bar}\"!\n
\n Bar Render Count:{' '}\n \n \n \n
\n
\n Bar: {bar}\n
\n
\n Baz in Bar:{' '}\n {baz ?? 'no param'}\n
\n \n To Baz\n \n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\nimport { RenderCounter } from '../../../../components/RenderCounter'\n\nexport const Route = createFileRoute('/params-ps/named/$foo')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const foo = Route.useParams()\n return (\n
\n

ParamsNamedFoo

\n
\n RenderCount:{' '}\n \n \n \n
\n
{JSON.stringify(foo)}
\n \n Index\n \n \n Bar1\n \n \n Bar2\n \n \n Bar with special characters\n \n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/named/index.tsx", "content": "import { createFileRoute, redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/named/')({\n beforeLoad: () => {\n throw redirect({ to: '/params-ps' })\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/named/prefix{$foo}.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/params-ps/named/prefix{$foo}')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsNamedFooPrefix

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/named/{$foo}suffix.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/params-ps/named/{$foo}suffix')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsNamedFooSuffix

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/non-nested/$foo_/$bar.tsx", "content": "import { createFileRoute, useParams } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/non-nested/$foo_/$bar')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const fooParams = useParams({ from: `/params-ps/non-nested/$foo_` })\n const routeParams = Route.useParams()\n\n return (\n
\n
{JSON.stringify(fooParams)}
\n
\n {JSON.stringify(routeParams)}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/non-nested/$foo_/route.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/non-nested/$foo_')()\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/non-nested/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/non-nested')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n

Non-nested path params

\n
    \n
  • \n \n /params-ps/non-nested/foo/bar\n \n \n /params-ps/non-nested/foo2/bar2\n \n
    • \n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/$version.route.tsx", "content": "import { createFileRoute, useParams } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/strict-false/$version')({\n params: {\n parse: (params) => ({\n ...params,\n version: parseInt(params.version),\n }),\n stringify: (params) => ({\n ...params,\n version: `${params.version}`,\n }),\n },\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const { version } = useParams({ strict: false })\n\n return
{String(version)}
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/route.tsx", "content": "import {\n Link,\n Outlet,\n createFileRoute,\n useParams,\n} from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/strict-false')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const { version } = useParams({ strict: false })\n return (\n
\n

ParamsStrictFalseParse

\n
\n Type:{' '}\n {typeof version}\n
\n
\n Value:{' '}\n {String(version)}\n
\n \n Version 1\n \n \n Version 2\n \n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/$.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/params-ps/wildcard/$')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsWildcardSplat

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/wildcard/')({\n beforeLoad: () => {\n throw redirect({ to: '/params-ps' })\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/prefix@๋Œ€{$}.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/wildcard/prefix@๋Œ€{$}')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsWildcardSplatPrefix

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/prefix{$}.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/params-ps/wildcard/prefix{$}')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsWildcardSplatPrefix

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/{$}suffix.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/params-ps/wildcard/{$}suffix')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsWildcardSplatSuffix

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/{$}suffix@๋Œ€.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params-ps/wildcard/{$}suffix@๋Œ€')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const p = Route.useParams()\n return (\n
\n

ParamsWildcardSplatSuffix

\n
{JSON.stringify(p)}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/params.single.$value.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/params/single/$value')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const value = Route.useParams({ select: (s) => s.value })\n\n return (\n
\n
\n

What's the value???

\n

Check path param value is printed correctly for a single param.

\n
\n

\n Value: {value}\n

\n
\n \n Self link to same\n \n \n Self link to amended value {`e2e${value}`}\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/pathless-layout/_layout/child.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/pathless-layout/_layout/child')({\n component: () => (\n
Pathless Layout Child Route
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/pathless-layout/_layout/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/pathless-layout/_layout/')({\n component: () => (\n
Pathless Layout Index
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/pathless-layout/_layout/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/pathless-layout/_layout')({\n component: () => (\n
\n
Pathless Layout Wrapper
\n \n \n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/pathless-layout/route.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/pathless-layout')({\n component: () => (\n
\n

Pathless Layout Section

\n \n
\n ),\n notFoundComponent: () => (\n
\n Not Found in Pathless Layout\n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/posts.$postId.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

\n {post.title}\n

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/posts.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/posts.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../posts'\n\nexport const Route = createFileRoute('/posts')({\n head: () => ({\n meta: [\n {\n title: 'Posts page',\n },\n ],\n }),\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/posts_.$postId.edit.tsx", "content": "import { createFileRoute, getRouteApi, useParams } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts_/$postId/edit')({\n component: PostEditPage,\n})\n\nconst api = getRouteApi(`/posts_/$postId/edit`)\n\nfunction PostEditPage() {\n const paramsViaApi = api.useParams()\n const paramsViaHook = useParams({ from: `/posts_/$postId/edit` })\n\n const paramsViaRouteHook = Route.useParams()\n\n return (\n <>\n
{paramsViaHook.postId}
\n
{paramsViaRouteHook.postId}
\n
{paramsViaApi.postId}
\n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/destination.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/$target/destination')({\n component: () => (\n
\n Redirect destination for {Route.fullPath}\n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/$target/')({\n component: () => {\n const preload = Route.useSearch({ select: (s) => s.preload })\n return (\n
\n
\n \n via-beforeLoad\n \n
\n
\n \n via-beforeLoad (reloadDocument=true)\n \n
\n
\n \n via-loader\n \n
\n
\n \n via-loader (reloadDocument=true)\n \n
\n {/* Route.redirect() tests - uses relative redirect to ./destination */}\n
\n \n via-route-redirect-beforeLoad\n \n
\n
\n \n via-route-redirect-loader\n \n
\n {/* getRouteApi().redirect() tests - uses relative redirect to ./destination */}\n
\n \n via-routeApi-redirect-beforeLoad\n \n
\n
\n \n via-routeApi-redirect-loader\n \n
\n
\n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/via-beforeLoad.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/$target/via-beforeLoad')({\n beforeLoad: ({\n params: { target },\n search: { reloadDocument, externalHost },\n }) => {\n switch (target) {\n case 'internal':\n throw redirect({ to: '/posts', reloadDocument })\n case 'external':\n throw redirect({ href: externalHost ?? 'http://example.com' })\n }\n },\n component: () =>
{Route.fullPath}
,\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/via-loader.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/$target/via-loader')({\n loaderDeps: ({ search: { reloadDocument, externalHost } }) => ({\n reloadDocument,\n externalHost,\n }),\n loader: ({ params: { target }, deps: { externalHost, reloadDocument } }) => {\n switch (target) {\n case 'internal':\n throw redirect({ to: '/posts', reloadDocument })\n case 'external':\n const href = externalHost ?? 'http://example.com'\n throw redirect({ href })\n }\n },\n component: () =>
{Route.fullPath}
,\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/via-route-redirect-beforeLoad.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute(\n '/redirect/$target/via-route-redirect-beforeLoad',\n)({\n beforeLoad: ({ params: { target }, search: { externalHost } }) => {\n switch (target) {\n case 'internal':\n // Use relative redirect to sibling route - this is the key feature being tested\n // Note: '../destination' is the correct relative path for sibling navigation\n throw Route.redirect({ to: '../destination' })\n case 'external':\n throw Route.redirect({ href: externalHost ?? 'http://example.com' })\n }\n },\n component: () =>
{Route.fullPath}
,\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/via-route-redirect-loader.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute(\n '/redirect/$target/via-route-redirect-loader',\n)({\n loaderDeps: ({ search: { externalHost } }) => ({\n externalHost,\n }),\n loader: ({ params: { target }, deps: { externalHost } }) => {\n switch (target) {\n case 'internal':\n // Use relative redirect to sibling route - this is the key feature being tested\n // Note: '../destination' is the correct relative path for sibling navigation\n throw Route.redirect({ to: '../destination' })\n case 'external':\n throw Route.redirect({ href: externalHost ?? 'http://example.com' })\n }\n },\n component: () =>
{Route.fullPath}
,\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/via-routeApi-redirect-beforeLoad.tsx", "content": "import { createFileRoute, getRouteApi } from '@tanstack/react-router'\n\nconst routeApi = getRouteApi(\n '/redirect/$target/via-routeApi-redirect-beforeLoad',\n)\n\nexport const Route = createFileRoute(\n '/redirect/$target/via-routeApi-redirect-beforeLoad',\n)({\n beforeLoad: ({ params: { target }, search: { externalHost } }) => {\n switch (target) {\n case 'internal':\n // Use relative redirect to sibling route - this is the key feature being tested\n // Note: '../destination' is the correct relative path for sibling navigation\n throw routeApi.redirect({ to: '../destination' })\n case 'external':\n throw routeApi.redirect({ href: externalHost ?? 'http://example.com' })\n }\n },\n component: () =>
{Route.fullPath}
,\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target/via-routeApi-redirect-loader.tsx", "content": "import { createFileRoute, getRouteApi } from '@tanstack/react-router'\n\nconst routeApi = getRouteApi('/redirect/$target/via-routeApi-redirect-loader')\n\nexport const Route = createFileRoute(\n '/redirect/$target/via-routeApi-redirect-loader',\n)({\n loaderDeps: ({ search: { externalHost } }) => ({\n externalHost,\n }),\n loader: ({ params: { target }, deps: { externalHost } }) => {\n switch (target) {\n case 'internal':\n // Use relative redirect to sibling route - this is the key feature being tested\n // Note: '../destination' is the correct relative path for sibling navigation\n throw routeApi.redirect({ to: '../destination' })\n case 'external':\n throw routeApi.redirect({ href: externalHost ?? 'http://example.com' })\n }\n },\n component: () =>
{Route.fullPath}
,\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/$target.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { retainSearchParams } from '@tanstack/react-router'\nimport z from 'zod'\n\nexport const Route = createFileRoute('/redirect/$target')({\n params: {\n parse: (p) =>\n z\n .object({\n target: z.union([z.literal('internal'), z.literal('external')]),\n })\n .parse(p),\n },\n validateSearch: z.object({\n reloadDocument: z.boolean().optional(),\n preload: z.literal(false).optional(),\n externalHost: z.string().optional(),\n }),\n search: {\n middlewares: [retainSearchParams(['externalHost'])],\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/')({\n component: () => (\n
\n \n internal\n {' '}\n \n external\n \n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/preload/first.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/preload/first')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n \n go to second\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/preload/second.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { redirect } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/redirect/preload/second')({\n loader: async () => {\n await new Promise((r) => setTimeout(r, 1000))\n throw redirect({ from: Route.fullPath, to: '../third' })\n },\n component: RouteComponent,\n pendingComponent: () =>

second pending

,\n})\n\nfunction RouteComponent() {\n return
Hello \"/redirect/preload/second\"!
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/redirect/preload/third.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/redirect/preload/third')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return
Hello \"/redirect/preload/third\"!
\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/index.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Relative Routing Tests - Home\n
\n
\n Using Links\n Using useNavigate\n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/nested/deep/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/link/nested/deep/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/link/nested/deep/\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/nested/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/link/nested/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/link/nested/\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/path/$path/index.tsx", "content": "import { Link, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/link/path/$path/')({\n component: RouteComponent,\n loader: ({ params }) => {\n return params\n },\n})\n\nfunction RouteComponent() {\n const { path } = Route.useParams()\n\n return (\n
\n
\n Hello from \"/relative/links/path/{path}\"!\n
\n
\n \n To {path === 'a' ? 'b' : 'a'}\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/path/index.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/link/path/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Relative Routing Tests - Path Params\n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/relative-link-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/link/relative-link-a')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/link/relative-link-a\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/relative-link-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/link/relative-link-b')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/link/relative-link-b\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/route.tsx", "content": "import {\n Link,\n Outlet,\n createFileRoute,\n useNavigate,\n} from '@tanstack/react-router'\nimport { useEffect } from 'react'\n\nexport const Route = createFileRoute('/relative/link')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const navigate = useNavigate()\n\n useEffect(() => {\n console.log('navigate')\n }, [navigate])\n\n return (\n
\n
\n Relative Routing - Links - Index\n
\n
\n \n Return To Home\n \n \n Return To Index\n \n \n Reload\n \n \n Back\n \n \n To Relative Link A\n \n \n To Relative Link B\n \n \n To Deeply Nested\n \n \n To Path Param A\n \n \n To With Search Params\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/link/with-search/index.tsx", "content": "import { createFileRoute, Link } from '@tanstack/react-router'\nimport { z } from 'zod'\n\nexport const Route = createFileRoute('/relative/link/with-search/')({\n component: RouteComponent,\n validateSearch: z.object({\n searchParam: z.string().default('1'),\n }),\n})\n\nfunction RouteComponent() {\n const { searchParam } = Route.useSearch()\n return (\n <>\n
\n Hello \"/relative/link/with-search/\" searchParam: {searchParam}!\n
\n
\n \n Update Search\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/nested/deep/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/useNavigate/nested/deep/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/useNavigate/nested/deep/\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/nested/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/useNavigate/nested/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/useNavigate/nested/\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/path/$path/index.tsx", "content": "import { createFileRoute, useNavigate } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/useNavigate/path/$path/')({\n component: RouteComponent,\n loader: ({ params }) => {\n return params\n },\n})\n\nfunction RouteComponent() {\n const navigate = useNavigate()\n\n const { path } = Route.useParams()\n\n return (\n
\n \n Hello from \"/relative/useNavigate/path/{path}\"!\n
\n
\n \n navigate({\n from: '/relative/useNavigate/path/',\n to: './$path',\n params: { path: path === 'a' ? 'b' : 'a' },\n })\n }\n className=\"mr-2\"\n data-testid=\"relative-useNavigate-path-param-switchAB\"\n >\n To {path === 'a' ? 'b' : 'a'}\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/path/index.tsx", "content": "import { Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/relative/useNavigate/path/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n
\n Relative Routing Tests - Path Params\n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/relative-useNavigate-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute(\n '/relative/useNavigate/relative-useNavigate-a',\n)({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/useNavigate/relative-useNavigate-a\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/relative-useNavigate-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute(\n '/relative/useNavigate/relative-useNavigate-b',\n)({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n Hello \"/relative/useNavigate/relative-useNavigate-b\"!\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/route.tsx", "content": "import { Outlet, createFileRoute, useNavigate } from '@tanstack/react-router'\nimport { useEffect } from 'react'\n\nexport const Route = createFileRoute('/relative/useNavigate')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const navigate = useNavigate()\n\n useEffect(() => {\n console.log('navigate')\n }, [navigate])\n\n return (\n
\n
\n Relative Routing - Links - Index\n
\n
\n \n navigate({\n from: '/relative/useNavigate',\n to: '..',\n })\n }\n data-testid=\"relative-useNavigate-home\"\n className=\"mr-2 underline\"\n >\n Return To Home\n \n \n navigate({\n from: '/relative/useNavigate',\n to: '.',\n })\n }\n data-testid=\"relative-useNavigate-index\"\n className=\"mr-2 underline\"\n >\n Return To Index\n \n \n navigate({\n to: '.',\n })\n }\n data-testid=\"relative-useNavigate-reload\"\n className=\"mr-2 underline\"\n >\n Reload\n \n \n navigate({\n to: '..',\n })\n }\n data-testid=\"relative-useNavigate-back\"\n className=\"mr-2 underline\"\n >\n Back\n \n \n navigate({\n from: '/relative/useNavigate',\n to: './relative-useNavigate-a',\n })\n }\n data-testid=\"relative-useNavigate-a\"\n className=\"mr-2 underline\"\n >\n To Relative useNavigate A\n \n \n navigate({\n from: '/relative/useNavigate',\n to: './relative-useNavigate-b',\n })\n }\n data-testid=\"relative-useNavigate-b\"\n className=\"mr-2 underline\"\n >\n To Relative Link B\n \n \n navigate({\n from: '/relative/useNavigate',\n to: './nested/deep',\n })\n }\n data-testid=\"relative-useNavigate-deeply-nested\"\n className=\"mr-2 underline\"\n >\n To Deeply Nested\n \n \n navigate({\n to: '/relative/useNavigate/path/$path',\n params: { path: 'a' },\n })\n }\n data-testid=\"relative-useNavigate-path\"\n className=\"mr-2 underline\"\n >\n To Path Param A\n \n \n navigate({\n from: '/relative/useNavigate',\n to: './with-search',\n search: { searchParam: '1' },\n })\n }\n data-testid=\"relative-useNavigate-withSearch\"\n className=\"mr-2 underline\"\n >\n To With Search Params\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/relative/useNavigate/with-search/index.tsx", "content": "import { createFileRoute, useNavigate } from '@tanstack/react-router'\nimport { z } from 'zod'\n\nexport const Route = createFileRoute('/relative/useNavigate/with-search/')({\n component: RouteComponent,\n validateSearch: z.object({\n searchParam: z.string().default('1'),\n }),\n})\n\nfunction RouteComponent() {\n const navigate = useNavigate()\n const { searchParam } = Route.useSearch()\n\n return (\n <>\n
\n Hello \"/relative/useNavigate/with-search/\" searchParam: {searchParam}!\n
\n
\n \n navigate({\n to: '.',\n search: { searchParam: '2' },\n })\n }\n data-testid=\"relative-useNavigate-withSearch-update-param\"\n >\n Update Search\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/remountDeps.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/remountDeps')({\n validateSearch(search: { searchParam: string }) {\n return { searchParam: search.searchParam }\n },\n loaderDeps(opts) {\n return opts.search\n },\n component: Home,\n remountDeps(opts) {\n return opts.search\n },\n})\n\nlet counter = 0\n\nfunction Home() {\n const search = Route.useSearch()\n const navigate = Route.useNavigate()\n\n const [mounts, setMounts] = React.useState(counter)\n React.useEffect(() => {\n setMounts(++counter)\n }, [])\n\n return (\n
\n {\n navigate({\n search: { searchParam: Math.random().toString(36).substring(2, 8) },\n })\n }}\n >\n Regenerate search param\n \n\n
Search: {search.searchParam}
\n
Page component mounts: {mounts}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/search-params/default.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\n\nexport const Route = createFileRoute('/search-params/default')({\n validateSearch: z.object({\n default: z.string().default('d1'),\n }),\n beforeLoad: ({ context }) => {\n if (context.hello !== 'world') {\n throw new Error('Context hello is not \"world\"')\n }\n },\n loader: ({ context }) => {\n if (context.hello !== 'world') {\n throw new Error('Context hello is not \"world\"')\n }\n },\n component: () => {\n const search = Route.useSearch()\n const context = Route.useRouteContext()\n return (\n <>\n
{search.default}
\n
{context.hello}
\n \n )\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/search-params/index.tsx", "content": "import { Link, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/search-params/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n \n go to /search-params/default\n \n
\n \n go to /search-params/default?default=d2\n \n
\n \n go to /search-params/default?default=๐Ÿš€๋Œ€ํ•œ๋ฏผ๊ตญ\n \n
\n \n go to\n /search-params/default?default=%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/search-params/route.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/search-params')({\n beforeLoad: async () => {\n await new Promise((resolve) => setTimeout(resolve, 100))\n return { hello: 'world' as string }\n },\n})\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/structural-sharing.$enabled.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, getRouteApi, useSearch } from '@tanstack/react-router'\nimport React from 'react'\nimport { z } from 'zod'\n\nconst enabledSchema = {\n enabled: z.preprocess((val) => {\n if (typeof val === 'string') {\n if (val.toLowerCase() === 'true') return true\n if (val.toLowerCase() === 'false') return false\n }\n return val\n }, z.boolean()),\n}\n\nexport const Route = createFileRoute('/structural-sharing/$enabled')({\n component: RouteComponent,\n params: {\n parse: (p) => z.object(enabledSchema).parse(p),\n },\n validateSearch: z.object({ foo: z.string(), bar: z.string() }),\n})\n\nfunction useRenderCount() {\n const count = React.useRef(0)\n count.current++\n return count.current\n}\n\nconst api = getRouteApi('/structural-sharing/$enabled')\nfunction RouteComponent() {\n console.log('rendering')\n const renderCount = useRenderCount()\n const { enabled } = Route.useParams()\n\n const searchViaRouteHook = Route.useSearch({\n select: ({ foo, bar }) => {\n return { values: [foo, bar] }\n },\n structuralSharing: enabled,\n })\n\n const searchViaHook = useSearch({\n from: Route.id,\n select: ({ foo, bar }) => {\n return { values: [foo, bar] }\n },\n structuralSharing: enabled,\n })\n\n const searchViaRouteApiHook = api.useSearch({\n select: ({ foo, bar }) => {\n return { values: [foo, bar] }\n },\n structuralSharing: enabled,\n })\n\n return (\n <>\n
{JSON.stringify(enabled)}
\n
{renderCount}
\n
{JSON.stringify(searchViaHook)}
\n
\n {JSON.stringify(searchViaRouteHook)}\n
\n
\n {JSON.stringify(searchViaRouteApiHook)}\n
\n\n
\n \n go to f2/b2\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/๋Œ€ํ•œ๋ฏผ๊ตญ/route.tsx", "content": "import { Link, Outlet, createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/๋Œ€ํ•œ๋ฏผ๊ตญ')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n
\n

\n Hello \"/๋Œ€ํ•œ๋ฏผ๊ตญ\"!\n

\n
    \n
  • \n \n link to latin id\n \n
    • \n
  • \n \n link to unicode id\n \n
    • \n
  • \n \n link to foo/bar\n \n
    • \n
  • \n \n link to foo%\\/๐Ÿš€๋Œ€\n \n
    • \n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard.$.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/$')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n\n return (\n
\n

Unicode Wildcard Params

\n
\n Hello /๋Œ€ํ•œ๋ฏผ๊ตญ/wildcard/\n {params._splat}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/routes/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€.$id.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/$id')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const params = Route.useParams()\n\n return (\n
\n

Unicode Named Params

\n
\n Hello /๋Œ€ํ•œ๋ฏผ๊ตญ/๐Ÿš€/\n {params.id}\n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport type { Page } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n\ntest('lazy file route errorComponent is rendered when the loader throws', async ({\n page,\n}) => {\n await page.goto('/lazy-error')\n\n await expect(page.getByTestId('lazy-route-error-component')).toContainText(\n 'Lazy route error component',\n )\n await expect(page.locator('body')).not.toContainText('Something went wrong!')\n})\n\ntest(\"useBlocker doesn't block navigation if condition is not met\", async ({\n page,\n}) => {\n await page.goto('/editing-a')\n await expect(page.getByRole('heading')).toContainText('Editing A')\n\n await page.getByRole('button', { name: 'Go to next step' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing B')\n})\n\ntest('useBlocker does block navigation if condition is met', async ({\n page,\n}) => {\n await page.goto('/editing-a')\n await expect(page.getByRole('heading')).toContainText('Editing A')\n\n await page.getByLabel('Enter your name:').fill('foo')\n\n await page.getByRole('button', { name: 'Go to next step' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing A')\n\n await expect(page.getByRole('button', { name: 'Proceed' })).toBeVisible()\n})\n\ntest('Proceeding through blocked navigation works', async ({ page }) => {\n await page.goto('/editing-a')\n await expect(page.getByRole('heading')).toContainText('Editing A')\n\n await page.getByLabel('Enter your name:').fill('foo')\n\n await page.getByRole('button', { name: 'Go to next step' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing A')\n\n await page.getByRole('button', { name: 'Proceed' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing B')\n})\n\ntest(\"legacy useBlocker doesn't block navigation if condition is not met\", async ({\n page,\n}) => {\n await page.goto('/editing-b')\n await expect(page.getByRole('heading')).toContainText('Editing B')\n\n await page.getByRole('button', { name: 'Go back' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing A')\n})\n\ntest('legacy useBlocker does block navigation if condition is met', async ({\n page,\n}) => {\n await page.goto('/editing-b')\n await expect(page.getByRole('heading')).toContainText('Editing B')\n\n await page.getByLabel('Enter your name:').fill('foo')\n\n await page.getByRole('button', { name: 'Go back' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing B')\n\n await expect(page.getByRole('button', { name: 'Proceed' })).toBeVisible()\n})\n\ntest('legacy Proceeding through blocked navigation works', async ({ page }) => {\n await page.goto('/editing-b')\n await expect(page.getByRole('heading')).toContainText('Editing B')\n\n await page.getByLabel('Enter your name:').fill('foo')\n\n await page.getByRole('button', { name: 'Go back' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing B')\n\n await page.getByRole('button', { name: 'Proceed' }).click()\n await expect(page.getByRole('heading')).toContainText('Editing A')\n})\n\ntest('useCanGoBack correctly disables back button', async ({ page }) => {\n const getBackButtonDisabled = async () => {\n const backButton = page.getByTestId('back-button')\n const isDisabled = (await backButton.getAttribute('disabled')) !== null\n return isDisabled\n }\n\n expect(await getBackButtonDisabled()).toBe(true)\n\n await page.getByRole('link', { name: 'Posts' }).click()\n await expect(page.getByTestId('posts-links')).toBeInViewport()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByTestId('post-title')).toBeInViewport()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.reload()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.goBack()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.goForward()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.goBack()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.goBack()\n expect(await getBackButtonDisabled()).toBe(true)\n\n await page.reload()\n expect(await getBackButtonDisabled()).toBe(true)\n})\n\ntest('useCanGoBack correctly disables back button, using router.history and window.history', async ({\n page,\n}) => {\n const getBackButtonDisabled = async () => {\n const backButton = page.getByTestId('back-button')\n const isDisabled = (await backButton.getAttribute('disabled')) !== null\n return isDisabled\n }\n\n await page.getByRole('link', { name: 'Posts' }).click()\n await expect(page.getByTestId('posts-links')).toBeInViewport()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByTestId('post-title')).toBeInViewport()\n await page.getByTestId('back-button').click()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.reload()\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.getByTestId('back-button').click()\n expect(await getBackButtonDisabled()).toBe(true)\n\n await page.evaluate('window.history.forward()')\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.evaluate('window.history.forward()')\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.evaluate('window.history.back()')\n expect(await getBackButtonDisabled()).toBe(false)\n\n await page.evaluate('window.history.back()')\n expect(await getBackButtonDisabled()).toBe(true)\n\n await page.reload()\n expect(await getBackButtonDisabled()).toBe(true)\n})\n\nconst testCases = [\n {\n description: 'Navigating to a route inside a route group',\n testId: 'link-to-route-inside-group',\n },\n {\n description:\n 'Navigating to a route inside a subfolder inside a route group ',\n testId: 'link-to-route-inside-group-inside-subfolder',\n },\n {\n description: 'Navigating to a route inside a route group inside a layout',\n testId: 'link-to-route-inside-group-inside-layout',\n },\n {\n description: 'Navigating to a lazy route inside a route group',\n testId: 'link-to-lazy-route-inside-group',\n },\n\n {\n description: 'Navigating to the only route inside a route group ',\n testId: 'link-to-only-route-inside-group',\n },\n]\n\ntestCases.forEach(({ description, testId }) => {\n test(description, async ({ page }) => {\n await page.getByTestId(testId).click()\n await expect(page.getByTestId('search-via-hook')).toContainText('world')\n await expect(page.getByTestId('search-via-route-hook')).toContainText(\n 'world',\n )\n await expect(page.getByTestId('search-via-route-api')).toContainText(\n 'world',\n )\n })\n})\n\ntest('navigating to an unnested route', async ({ page }) => {\n const postId = 'hello-world'\n await page.goto(`/posts/${postId}/edit`)\n await page.waitForURL(`/posts/${postId}/edit`)\n await expect(page.getByTestId('params-via-hook')).toContainText(postId)\n await expect(page.getByTestId('params-via-route-hook')).toContainText(postId)\n await expect(page.getByTestId('params-via-route-api')).toContainText(postId)\n})\n\nasync function getRenderCount(page: Page) {\n const renderCount = parseInt(\n await page.getByTestId('render-count').innerText(),\n )\n return renderCount\n}\nasync function structuralSharingTest(page: Page, enabled: boolean) {\n page.goto(`/structural-sharing/${enabled}/?foo=f1&bar=b1`)\n await expect(page.getByTestId('enabled')).toHaveText(JSON.stringify(enabled))\n\n async function checkSearch({ foo, bar }: { foo: string; bar: string }) {\n expect(page.url().endsWith(`?foo=${foo}&bar=${bar}`)).toBe(true)\n const expectedSearch = JSON.stringify({ values: [foo, bar] })\n await expect(page.getByTestId('search-via-hook')).toHaveText(expectedSearch)\n await expect(page.getByTestId('search-via-route-hook')).toHaveText(\n expectedSearch,\n )\n await expect(page.getByTestId('search-via-route-api-hook')).toHaveText(\n expectedSearch,\n )\n }\n\n await checkSearch({ bar: 'b1', foo: 'f1' })\n await page.getByTestId('link').click()\n await checkSearch({ bar: 'b2', foo: 'f2' })\n}\n\ntest('structural sharing disabled', async ({ page }) => {\n await structuralSharingTest(page, false)\n expect(await getRenderCount(page)).toBe(2)\n await page.getByTestId('link').click()\n expect(await getRenderCount(page)).toBeGreaterThan(2)\n})\n\ntest('structural sharing enabled', async ({ page }) => {\n await structuralSharingTest(page, true)\n expect(await getRenderCount(page)).toBe(2)\n await page.getByTestId('link').click()\n expect(await getRenderCount(page)).toBe(2)\n})\n\ntest('Should change title on client side navigation', async ({ page }) => {\n await page.goto('/')\n\n await page.getByRole('link', { name: 'Posts' }).click()\n\n await expect(page).toHaveTitle('Posts page')\n})\n\ntest('Should change post navigating back and forth', async ({ page }) => {\n await page.goto('/posts/1')\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n\n await page.getByRole('link', { name: 'qui est esse' }).click()\n await expect(page.getByTestId('post-title')).toContainText('qui est esse')\n\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByTestId('post-title')).toContainText('sunt aut facere')\n})\n\ntest('Should not remount deps when remountDeps does not change ', async ({\n page,\n}) => {\n await page.goto('/notRemountDeps')\n await expect(page.getByTestId('component-mounts')).toContainText(\n 'Page component mounts: 1',\n )\n await page.getByRole('button', { name: 'Regenerate search param' }).click()\n await expect(page.getByTestId('component-mounts')).toContainText(\n 'Page component mounts: 1',\n )\n await page.getByRole('button', { name: 'Regenerate search param' }).click()\n await expect(page.getByTestId('component-mounts')).toContainText(\n 'Page component mounts: 1',\n )\n})\n\ntest('Should remount deps when remountDeps does change ', async ({ page }) => {\n await page.goto('/remountDeps')\n await expect(page.getByTestId('component-mounts')).toContainText(\n 'Page component mounts: 1',\n )\n await page.getByRole('button', { name: 'Regenerate search param' }).click()\n await expect(page.getByTestId('component-mounts')).toContainText(\n 'Page component mounts: 2',\n )\n await page.getByRole('button', { name: 'Regenerate search param' }).click()\n await expect(page.getByTestId('component-mounts')).toContainText(\n 'Page component mounts: 3',\n )\n})\n\ntest.describe('Unicode route rendering', () => {\n test('should render non-latin route correctly', async ({ page, baseURL }) => {\n await page.goto('/๋Œ€ํ•œ๋ฏผ๊ตญ')\n\n await expect(page.locator('body')).toContainText('Hello \"/๋Œ€ํ•œ๋ฏผ๊ตญ\"!')\n\n expect(page.url()).toBe(`${baseURL}/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD`)\n })\n})\n\ntest.describe('Pathless layout routes', () => {\n test('direct navigation to pathless layout route renders correctly', async ({\n page,\n }) => {\n await page.goto('/pathless-layout')\n await expect(page.getByTestId('pathless-layout-header')).toContainText(\n 'Pathless Layout Section',\n )\n await expect(page.getByTestId('pathless-layout-wrapper')).toContainText(\n 'Pathless Layout Wrapper',\n )\n await expect(page.getByTestId('pathless-layout-index')).toContainText(\n 'Pathless Layout Index',\n )\n })\n\n test('client-side navigation to pathless layout route', async ({ page }) => {\n await page.goto('/')\n await page.getByTestId('link-to-pathless-layout').click()\n await expect(page.getByTestId('pathless-layout-header')).toContainText(\n 'Pathless Layout Section',\n )\n await expect(page.getByTestId('pathless-layout-wrapper')).toContainText(\n 'Pathless Layout Wrapper',\n )\n })\n\n test('navigation within pathless layout preserves layout', async ({\n page,\n }) => {\n await page.goto('/pathless-layout')\n await page.getByTestId('link-to-child').click()\n await expect(page.getByTestId('pathless-layout-header')).toContainText(\n 'Pathless Layout Section',\n )\n await expect(page.getByTestId('pathless-layout-wrapper')).toContainText(\n 'Pathless Layout Wrapper',\n )\n await expect(page.getByTestId('pathless-layout-child')).toContainText(\n 'Pathless Layout Child Route',\n )\n })\n\n test('direct navigation to child of pathless layout', async ({ page }) => {\n await page.goto('/pathless-layout/child')\n await expect(page.getByTestId('pathless-layout-header')).toContainText(\n 'Pathless Layout Section',\n )\n await expect(page.getByTestId('pathless-layout-wrapper')).toContainText(\n 'Pathless Layout Wrapper',\n )\n await expect(page.getByTestId('pathless-layout-child')).toContainText(\n 'Pathless Layout Child Route',\n )\n })\n\n test('navigating to non-existent route under pathless layout shows not found', async ({\n page,\n }) => {\n await page.goto('/pathless-layout/does-not-exist')\n await expect(page.getByTestId('pathless-layout-not-found')).toContainText(\n 'Not Found in Pathless Layout',\n )\n await expect(page.locator('body')).toContainText('Not Found')\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/fullpath-types.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.describe('FullPath type/runtime match (Issues #4892, #2675, #6403)', () => {\n test.describe('Pathless layout routes should have parent fullPath, not empty string', () => {\n test('direct navigation to pathless layout shows correct fullPath', async ({\n page,\n }) => {\n await page.goto('/fullpath-test')\n // The pathless layout's fullPath should be '/fullpath-test' (same as parent), not ''\n await expect(page.getByTestId('pathless-layout-fullpath')).toHaveText(\n '/fullpath-test',\n )\n })\n\n test('client-side navigation to pathless layout shows correct fullPath', async ({\n page,\n }) => {\n await page.goto('/')\n await page.getByTestId('link-to-fullpath-test').click()\n await expect(page.getByTestId('pathless-layout-fullpath')).toHaveText(\n '/fullpath-test',\n )\n })\n })\n\n test.describe('Index routes should have trailing slash in fullPath', () => {\n test('direct navigation to index route shows fullPath with trailing slash', async ({\n page,\n }) => {\n await page.goto('/fullpath-test')\n // The index route's fullPath should be '/fullpath-test/' (with trailing slash)\n await expect(page.getByTestId('index-route-fullpath')).toHaveText(\n '/fullpath-test/',\n )\n })\n\n test('param route under pathless layout shows correct fullPath', async ({\n page,\n }) => {\n await page.goto('/fullpath-test/123')\n // The param route's fullPath should be '/fullpath-test/$id'\n await expect(page.getByTestId('param-route-fullpath')).toHaveText(\n '/fullpath-test/$id',\n )\n await expect(page.getByTestId('fullpath-test-param')).toHaveText(\n 'Param: 123',\n )\n })\n })\n\n test.describe('Route.to should NOT have trailing slash (Issue #3005)', () => {\n test('index route Route.to should not have trailing slash', async ({\n page,\n }) => {\n await page.goto('/fullpath-test')\n // Route.to should be '/fullpath-test' (without trailing slash)\n // while Route.fullPath is '/fullpath-test/' (with trailing slash)\n await expect(page.getByTestId('index-route-to')).toHaveText(\n '/fullpath-test',\n )\n })\n })\n\n test.describe('Existing pathless layout routes', () => {\n test('existing pathless layout index shows correct fullPath at runtime', async ({\n page,\n }) => {\n // This tests the existing /pathless-layout route which has a pathless _layout\n await page.goto('/pathless-layout')\n await expect(page.getByTestId('pathless-layout-header')).toContainText(\n 'Pathless Layout Section',\n )\n await expect(page.getByTestId('pathless-layout-wrapper')).toContainText(\n 'Pathless Layout Wrapper',\n )\n await expect(page.getByTestId('pathless-layout-index')).toContainText(\n 'Pathless Layout Index',\n )\n })\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/hover-preload-hash.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport { toRuntimePath } from '@tanstack/router-e2e-utils'\n\ntest('clicking hash link then hovering another link does not scroll back to hash', async ({\n page,\n}) => {\n // Go to the page without hash\n await page.goto(toRuntimePath('/hover-preload-hash'))\n\n // Click the hash link to navigate to position1\n await page.getByTestId('link-to-hash').click()\n await expect(page.locator('#position1')).toBeInViewport()\n\n // Scroll up so position1 is no longer in view\n await page.evaluate(() => window.scrollTo(0, 0))\n await expect(page.locator('#position1')).not.toBeInViewport()\n\n // Hover the link to trigger intent preload (should NOT scroll back)\n await page.getByTestId('link-to-only-route-inside-group').hover()\n await page.waitForTimeout(400)\n\n // Ensure we did not jump back to the hash target\n await expect(page.locator('#position1')).not.toBeInViewport()\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/mask.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest('route masks transform params and expose masked pathname in the browser (react)', async ({\n page,\n}) => {\n await page.goto('/')\n\n await page.getByTestId('link-to-masks').click()\n await expect(page.getByText('Route Masks')).toBeVisible()\n\n const link = page.getByTestId('link-to-admin-mask')\n await link.click()\n\n await page.waitForURL('/masks/public/user-42')\n\n await expect(page.getByTestId('admin-user-component')).toBeInViewport()\n await expect(page.getByTestId('admin-user-id')).toHaveText('42')\n\n await expect(page.getByTestId('router-pathname')).toHaveText(\n '/masks/admin/42',\n )\n\n await expect(page.getByTestId('router-masked-pathname')).toHaveText(\n '/masks/public/user-42',\n )\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/non-nested-paths.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\nconst testCases: Array<{\n name: string\n testPathDesc: string\n testPathPrefix: string\n testPathSuffix: string\n paramValue: Record\n paramValue2: Record\n}> = [\n {\n name: 'Named path params',\n testPathDesc: 'named',\n testPathPrefix: '',\n testPathSuffix: '',\n paramValue: { baz: 'baz' },\n paramValue2: { baz: 'baz_' },\n },\n {\n name: 'prefix params',\n testPathPrefix: 'prefix',\n testPathSuffix: '',\n testPathDesc: 'prefix',\n paramValue: { baz: 'baz' },\n paramValue2: { baz: 'baz_' },\n },\n {\n name: 'suffix params',\n testPathPrefix: '',\n testPathSuffix: 'suffix',\n testPathDesc: 'suffix',\n paramValue: { baz: 'baz' },\n paramValue2: { baz: 'baz2' },\n },\n {\n name: 'path',\n testPathPrefix: '',\n testPathSuffix: '',\n testPathDesc: 'path',\n paramValue: {},\n paramValue2: {},\n },\n]\n\ntest.describe('Non-nested paths', () => {\n testCases.forEach(\n ({\n name,\n testPathDesc,\n testPathPrefix,\n testPathSuffix,\n paramValue,\n paramValue2,\n }) => {\n test.describe(name, () => {\n const path = `/non-nested/${testPathDesc}`\n const paramNameDesc = Object.keys(paramValue)[0] ?? 'baz'\n\n test.beforeEach(async ({ page }) => {\n await page.goto('/non-nested')\n await page.waitForURL('/non-nested')\n })\n\n test('Should not un-nest nested paths', async ({ page }) => {\n const nonNestedPathHeading = page.getByTestId(\n 'non-nested-path-heading',\n )\n await expect(nonNestedPathHeading).toBeVisible()\n\n await page.getByTestId(`l-to-${testPathDesc}`).click()\n await page.waitForURL(path)\n\n const rootRouteHeading = page.getByTestId(\n `non-nested-${testPathDesc}-root-route-heading`,\n )\n\n await expect(rootRouteHeading).toBeVisible()\n\n const pathRouteHeading = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-route-heading`,\n )\n\n const indexHeading = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-index-heading`,\n )\n\n const fooHeading = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-foo-heading`,\n )\n\n const indexParams = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-index-param`,\n )\n\n const fooParams = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-foo-param`,\n )\n\n const indexLink = page.getByTestId(`to-${testPathDesc}-index`)\n const fooLink = page.getByTestId(`to-${testPathDesc}-foo`)\n const foo2Link = page.getByTestId(`to-${testPathDesc}-foo-2`)\n\n const indexPath = `${path}/${testPathPrefix}${paramValue[paramNameDesc] ?? 'baz'}${testPathSuffix}`\n const fooPath = `${path}/${testPathPrefix}${paramValue[paramNameDesc] ?? 'baz'}${testPathSuffix}/foo`\n const foo2Path = `${path}/${testPathPrefix}${paramValue2[paramNameDesc] ?? 'baz'}${testPathSuffix}/foo`\n\n console.log(await indexLink.getAttribute('href'))\n await expect(indexLink).toHaveAttribute('href', indexPath)\n await expect(fooLink).toHaveAttribute('href', fooPath)\n await expect(foo2Link).toHaveAttribute('href', foo2Path)\n\n await indexLink.click()\n await page.waitForURL(indexPath)\n await expect(rootRouteHeading).toBeVisible()\n await expect(pathRouteHeading).toBeVisible()\n await expect(indexHeading).toBeVisible()\n const indexParamValue = await indexParams.innerText()\n expect(JSON.parse(indexParamValue)).toEqual(paramValue)\n\n await fooLink.click()\n await page.waitForURL(fooPath)\n await expect(rootRouteHeading).toBeVisible()\n await expect(pathRouteHeading).toBeVisible()\n await expect(fooHeading).toBeVisible()\n const fooParamValue = await fooParams.innerText()\n expect(JSON.parse(fooParamValue)).toEqual(paramValue)\n\n await foo2Link.click()\n await page.waitForURL(foo2Path)\n await expect(rootRouteHeading).toBeVisible()\n await expect(pathRouteHeading).toBeVisible()\n await expect(fooHeading).toBeVisible()\n const foo2ParamValue = await fooParams.innerText()\n expect(JSON.parse(foo2ParamValue)).toEqual(paramValue2)\n })\n\n test('Should not nest non-nested paths', async ({ page }) => {\n const nonNestedPathHeading = page.getByTestId(\n 'non-nested-path-heading',\n )\n await expect(nonNestedPathHeading).toBeVisible()\n\n await page.getByTestId(`l-to-${testPathDesc}`).click()\n await page.waitForURL(path)\n\n const rootRouteHeading = page.getByTestId(\n `non-nested-${testPathDesc}-root-route-heading`,\n )\n\n await expect(rootRouteHeading).toBeVisible()\n\n const pathRouteHeading = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-route-heading`,\n )\n\n const barHeading = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-bar-heading`,\n )\n\n const barParams = page.getByTestId(\n `non-nested-${testPathDesc}-${paramNameDesc}-bar-param`,\n )\n\n const barLink = page.getByTestId(`to-${testPathDesc}-bar`)\n const bar2Link = page.getByTestId(`to-${testPathDesc}-bar-2`)\n\n const barPath = `${path}/${testPathPrefix}${paramValue[paramNameDesc] ?? 'baz'}${testPathSuffix}/bar`\n const bar2Path = `${path}/${testPathPrefix}${paramValue2[paramNameDesc] ?? 'baz'}${testPathSuffix}/bar`\n await expect(barLink).toHaveAttribute('href', barPath)\n\n await expect(bar2Link).toHaveAttribute('href', bar2Path)\n\n await barLink.click()\n await page.waitForURL(barPath)\n await expect(rootRouteHeading).toBeVisible()\n await expect(pathRouteHeading).not.toBeVisible()\n await expect(barHeading).toBeVisible()\n const barParamValue = await barParams.innerText()\n expect(JSON.parse(barParamValue)).toEqual(paramValue)\n\n await bar2Link.click()\n await page.waitForURL(bar2Path)\n await expect(rootRouteHeading).toBeVisible()\n await expect(pathRouteHeading).not.toBeVisible()\n await expect(barHeading).toBeVisible()\n const bar2ParamValue = await barParams.innerText()\n expect(JSON.parse(bar2ParamValue)).toEqual(paramValue2)\n })\n })\n },\n )\n})\n\ntest.describe('Deeply nested non-nested paths', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto('/non-nested/deep')\n await page.waitForURL('/non-nested/deep')\n })\n\n test('It should nest nested paths 1 level deep', async ({ page }) => {\n const rootRouteHeading = page.getByTestId(\n `non-nested-deep-root-route-heading`,\n )\n\n await expect(rootRouteHeading).toBeVisible()\n\n const bazLink = page.getByTestId('to-deep-baz')\n await bazLink.click()\n await page.waitForURL('/non-nested/deep/baz')\n const bazRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-route-heading',\n )\n const bazIndexHeading = page.getByTestId(\n 'non-nested-deep-baz-index-heading',\n )\n const bazIndexParams = page.getByTestId('non-nested-deep-baz-index-param')\n\n await expect(bazRouteHeading).toBeVisible()\n await expect(bazIndexHeading).toBeVisible()\n expect(await bazIndexParams.innerText()).toBe(\n JSON.stringify({ baz: 'baz' }),\n )\n })\n\n test('It should not nest non-nested paths 1 level deep', async ({ page }) => {\n const rootRouteHeading = page.getByTestId(\n `non-nested-deep-root-route-heading`,\n )\n\n await expect(rootRouteHeading).toBeVisible()\n const bazBarLink = page.getByTestId('to-deep-baz-bar')\n\n await bazBarLink.click()\n await page.waitForURL('/non-nested/deep/baz-bar/bar')\n const bazRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-route-heading',\n )\n const bazBarRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-route-heading',\n )\n const bazBarIndexHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-index-heading',\n )\n const bazBarIndexParams = page.getByTestId(\n 'non-nested-deep-baz-bar-index-param',\n )\n\n await expect(bazRouteHeading).not.toBeVisible()\n await expect(bazBarRouteHeading).toBeVisible()\n await expect(bazBarIndexHeading).toBeVisible()\n expect(await bazBarIndexParams.innerText()).toBe(\n JSON.stringify({ baz: 'baz-bar' }),\n )\n })\n\n test('It should not nest non-nested paths 2 levels deep', async ({\n page,\n }) => {\n const rootRouteHeading = page.getByTestId(\n `non-nested-deep-root-route-heading`,\n )\n\n await expect(rootRouteHeading).toBeVisible()\n\n const bazBarQuxLink = page.getByTestId('to-deep-baz-bar-qux')\n await bazBarQuxLink.click()\n\n await page.waitForURL('/non-nested/deep/baz-bar-qux/bar/qux')\n const bazRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-route-heading',\n )\n const bazBarRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-route-heading',\n )\n const bazBarQuxHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-qux-heading',\n )\n const bazBarQuxParams = page.getByTestId(\n 'non-nested-deep-baz-bar-qux-param',\n )\n\n await expect(bazRouteHeading).not.toBeVisible()\n await expect(bazBarRouteHeading).not.toBeVisible()\n await expect(bazBarQuxHeading).toBeVisible()\n await expect(bazBarQuxParams).toBeVisible()\n expect(await bazBarQuxParams.innerText()).toBe(\n JSON.stringify({ baz: 'baz-bar-qux' }),\n )\n })\n\n test('It should nest and un-nest non-nested across paths multiple levels deep', async ({\n page,\n }) => {\n const rootRouteHeading = page.getByTestId(\n `non-nested-deep-root-route-heading`,\n )\n\n await expect(rootRouteHeading).toBeVisible()\n\n const bazBarFooLink = page.getByTestId('to-deep-baz-bar-foo')\n await bazBarFooLink.click()\n\n await page.waitForURL('/non-nested/deep/baz-bar/bar/foo')\n\n const bazRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-route-heading',\n )\n const bazBarRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-route-heading',\n )\n const bazBarFooRouteHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-foo-route-heading',\n )\n const bazBarFooIndexHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-foo-index-heading',\n )\n const bazBarFooIndexParams = page.getByTestId(\n 'non-nested-deep-baz-bar-foo-index-param',\n )\n\n await expect(bazRouteHeading).not.toBeVisible()\n await expect(bazBarRouteHeading).toBeVisible()\n await expect(bazBarFooRouteHeading).toBeVisible()\n await expect(bazBarFooIndexHeading).toBeVisible()\n await expect(bazBarFooIndexParams).toBeVisible()\n expect(await bazBarFooIndexParams.innerText()).toBe(\n JSON.stringify({ baz: 'baz-bar', foo: 'foo' }),\n )\n\n const bazBarFooQuxLink = page.getByTestId('to-deep-baz-bar-foo-qux')\n await bazBarFooQuxLink.click()\n await page.waitForURL('/non-nested/deep/baz-bar-qux/bar/foo/qux')\n\n const bazBarFooQuxHeading = page.getByTestId(\n 'non-nested-deep-baz-bar-foo-qux-heading',\n )\n const bazBarFooQuxParams = page.getByTestId(\n 'non-nested-deep-baz-bar-foo-qux-param',\n )\n\n await expect(bazRouteHeading).not.toBeVisible()\n await expect(bazBarRouteHeading).toBeVisible()\n await expect(bazBarFooRouteHeading).not.toBeVisible()\n await expect(bazBarFooQuxHeading).toBeVisible()\n await expect(bazBarFooQuxParams).toBeVisible()\n expect(await bazBarFooQuxParams.innerText()).toBe(\n JSON.stringify({ baz: 'baz-bar-qux', foo: 'foo' }),\n )\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/open-redirect-prevention.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.describe('Open redirect prevention', () => {\n test.describe('CRLF injection attacks', () => {\n test('should not redirect to external site via CR injection (%0d)', async ({\n page,\n baseURL,\n }) => {\n // This URL attempts to exploit CRLF injection to redirect to google.com\n // %0d = \\r (carriage return)\n // Without the fix, /\\r/google.com/ would be interpreted as //google.com/\n // which browsers resolve as a protocol-relative URL to http://google.com/\n await page.goto('/%0d/google.com/')\n await page.waitForLoadState('networkidle')\n\n // Should stay on the same origin - the path should be treated as a local path\n // not as an external redirect\n expect(page.url().startsWith(baseURL!)).toBe(true)\n // The origin should be localhost, not google.com\n const url = new URL(page.url())\n expect(url.origin).toBe(new URL(baseURL!).origin)\n })\n\n test('should not redirect to external site via LF injection (%0a)', async ({\n page,\n baseURL,\n }) => {\n // %0a = \\n (line feed)\n await page.goto('/%0a/evil.com/')\n await page.waitForLoadState('networkidle')\n\n // Should stay on the same origin\n expect(page.url().startsWith(baseURL!)).toBe(true)\n const url = new URL(page.url())\n expect(url.origin).toBe(new URL(baseURL!).origin)\n })\n\n test('should not redirect to external site via CRLF injection (%0d%0a)', async ({\n page,\n baseURL,\n }) => {\n // Combined CRLF injection attempt\n await page.goto('/%0d%0a/attacker.com/')\n await page.waitForLoadState('networkidle')\n\n // Should stay on the same origin\n expect(page.url().startsWith(baseURL!)).toBe(true)\n const url = new URL(page.url())\n expect(url.origin).toBe(new URL(baseURL!).origin)\n })\n\n test('should not redirect to external site via multiple control chars', async ({\n page,\n baseURL,\n }) => {\n // Multiple CR/LF characters\n await page.goto('/%0d%0d%0a/malicious.com/path')\n await page.waitForLoadState('networkidle')\n\n // Should stay on the same origin\n expect(page.url().startsWith(baseURL!)).toBe(true)\n const url = new URL(page.url())\n expect(url.origin).toBe(new URL(baseURL!).origin)\n })\n })\n\n test.describe('Protocol-relative URL prevention', () => {\n test('should handle paths that could be misinterpreted as protocol-relative URLs', async ({\n page,\n baseURL,\n }) => {\n // When control characters are stripped from paths like /%0d/evil.com/\n // the result could be //evil.com/ which is a protocol-relative URL\n // Our fix collapses these to /evil.com/ to prevent external redirects\n // This is already tested above, but we verify the collapsed path works\n await page.goto('/%0d/test-path/')\n await page.waitForLoadState('networkidle')\n\n // Should stay on the same origin\n expect(page.url().startsWith(baseURL!)).toBe(true)\n const url = new URL(page.url())\n expect(url.origin).toBe(new URL(baseURL!).origin)\n // Path should be collapsed to /test-path (not //test-path/)\n expect(url.pathname).toMatch(/^\\/test-path\\/?$/)\n })\n })\n\n test.describe('Normal navigation still works', () => {\n test('should navigate to normal paths correctly', async ({\n page,\n baseURL,\n }) => {\n await page.goto('/posts')\n await page.waitForLoadState('networkidle')\n\n expect(page.url()).toBe(`${baseURL}/posts`)\n })\n\n test('should handle URL-encoded characters in normal paths', async ({\n page,\n baseURL,\n }) => {\n // Normal URL encoding should still work\n await page.goto('/params/single/hello%20world')\n await page.waitForLoadState('networkidle')\n\n expect(page.url().startsWith(baseURL!)).toBe(true)\n })\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/params.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport type { Page } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest.describe('ensure single params have been parsed correctly whilst being stable in the browser', () => {\n const cases = [\n { value: 'hello', expected: 'hello' },\n {\n value: '100%25',\n expected: '100%',\n },\n {\n value: '100%2525',\n expected: '100%25',\n },\n {\n value: '100%26',\n expected: '100&',\n },\n ]\n\n function getParsedValue(page: Page) {\n return page.getByTestId('parsed-param-value').textContent()\n }\n\n for (const { value, expected } of cases) {\n test(`navigating to /params/single/${value}`, async ({ page, baseURL }) => {\n await page.goto(`/params/single/${value}`)\n\n // on the first run, the value should be the same as the expected value\n const valueOnFirstRun = await getParsedValue(page)\n expect(valueOnFirstRun).toBe(expected)\n\n // the url/pathname should be the same as the expected value\n const urlOnFirstRun = page.url().replace(baseURL!, '')\n expect(urlOnFirstRun).toBe(`/params/single/${value}`)\n\n // click on the self link to the same value\n await page.getByTestId('self-link-same').click()\n const valueOnSecondRun = await getParsedValue(page)\n expect(valueOnSecondRun).toBe(expected)\n\n // click on the self link to the amended value\n await page.getByTestId('self-link-amended').click()\n const valueOnThirdRun = await getParsedValue(page)\n expect(valueOnThirdRun).toBe(`e2e${expected}`)\n\n // the url/pathname should be the same as the expected value\n const urlOnThirdRun = page.url().replace(baseURL!, '')\n expect(urlOnThirdRun).toBe(`/params/single/e2e${value}`)\n })\n }\n})\n\ntest.describe('params operations + non-nested routes', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto('/params-ps/non-nested')\n })\n\n test('useParams must resolve non-nested path params', async ({ page }) => {\n await page.waitForURL('/params-ps/non-nested')\n\n const fooBarLink = page.getByTestId('l-to-non-nested-foo-bar')\n\n const foo2Bar2Link = page.getByTestId('l-to-non-nested-foo2-bar2')\n\n await expect(fooBarLink).toHaveAttribute(\n 'href',\n '/params-ps/non-nested/foo/bar',\n )\n\n await fooBarLink.click()\n await page.waitForURL('/params-ps/non-nested/foo/bar')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe('/params-ps/non-nested/foo/bar')\n\n const fooParamsValue = page.getByTestId('foo-params-value')\n const fooParamsText = await fooParamsValue.innerText()\n const fooParamsObj = JSON.parse(fooParamsText)\n expect(fooParamsObj).toEqual({ foo: 'foo' })\n\n const paramsValue = page.getByTestId('foo-bar-params-value')\n const paramsText = await paramsValue.innerText()\n const paramsObj = JSON.parse(paramsText)\n expect(paramsObj).toEqual({ foo: 'foo', bar: 'bar' })\n\n await expect(foo2Bar2Link).toHaveAttribute(\n 'href',\n '/params-ps/non-nested/foo2/bar2',\n )\n await foo2Bar2Link.click()\n await page.waitForURL('/params-ps/non-nested/foo2/bar2')\n const pagePathname2 = new URL(page.url()).pathname\n expect(pagePathname2).toBe('/params-ps/non-nested/foo2/bar2')\n\n const foo2ParamsValue = page.getByTestId('foo-params-value')\n const foo2ParamsText = await foo2ParamsValue.innerText()\n const foo2ParamsObj = JSON.parse(foo2ParamsText)\n expect(foo2ParamsObj).toEqual({ foo: 'foo2' })\n\n const params2Value = page.getByTestId('foo-bar-params-value')\n const params2Text = await params2Value.innerText()\n const params2Obj = JSON.parse(params2Text)\n expect(params2Obj).toEqual({ foo: 'foo2', bar: 'bar2' })\n })\n})\n\ntest.describe('params operations + prefix/suffix', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto('/params-ps')\n })\n\n test.describe('named params', () => {\n const NAMED_PARAMS_PAIRS = [\n // Test ID | Expected href\n {\n id: 'l-to-named-foo',\n pathname: '/params-ps/named/foo',\n params: { foo: 'foo' },\n destHeadingId: 'ParamsNamedFoo',\n },\n {\n id: 'l-to-named-prefixfoo',\n pathname: '/params-ps/named/prefixfoo',\n params: { foo: 'foo' },\n destHeadingId: 'ParamsNamedFooPrefix',\n },\n {\n id: 'l-to-named-foosuffix',\n pathname: '/params-ps/named/foosuffix',\n params: { foo: 'foo' },\n destHeadingId: 'ParamsNamedFooSuffix',\n },\n {\n id: 'l-to-named-foo-special-characters',\n pathname: '/params-ps/named/foo%25%5C%2F%F0%9F%9A%80%EB%8C%80',\n params: { foo: 'foo%\\\\/๐Ÿš€๋Œ€' },\n destHeadingId: 'ParamsNamedFoo',\n },\n ] satisfies Array<{\n id: string\n pathname: string\n params: Record\n destHeadingId: string\n }>\n\n test.describe('Link', () => {\n NAMED_PARAMS_PAIRS.forEach(({ id, pathname }) => {\n test(`interpolation for testid=\"${id}\" has href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await expect(link).toHaveAttribute('href', pathname)\n })\n })\n\n NAMED_PARAMS_PAIRS.forEach(({ id, pathname }) => {\n test(`navigation for testid=\"${id}\" succeeds to href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await link.click()\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n })\n })\n })\n\n NAMED_PARAMS_PAIRS.forEach(({ pathname, params, destHeadingId }) => {\n test(`on first-load to \"${pathname}\" has correct params`, async ({\n page,\n }) => {\n await page.goto(pathname)\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n\n const headingEl = page.getByRole('heading', { name: destHeadingId })\n await expect(headingEl).toBeVisible()\n\n const paramsEl = page.getByTestId('params-output')\n const paramsText = await paramsEl.innerText()\n const paramsObj = JSON.parse(paramsText)\n expect(paramsObj).toEqual(params)\n })\n })\n\n test(`ensure use params doesn't cause excess renders and is stable across various usage options`, async ({\n page,\n }) => {\n await page.goto('/params-ps/named/foo')\n await page.waitForLoadState('networkidle')\n\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe('/params-ps/named/foo')\n\n const fooRenderCount = page.getByTestId('foo-render-count')\n const fooIndexLink = page.getByTestId('params-foo-links-index')\n const fooBar1Link = page.getByTestId('params-foo-links-bar1')\n const fooBar2Link = page.getByTestId('params-foo-links-bar2')\n const fooBarBazLink = page.getByTestId('params-foo-bar-links-baz')\n const fooValue = page.getByTestId('params-output')\n const fooBarValue = page.getByTestId('foo-bar-value')\n const fooBazInBarValue = page.getByTestId('foo-baz-in-bar-value')\n const fooBarRenderCount = page.getByTestId('foo-bar-render-count')\n const fooBarBazValue = page.getByTestId('foo-bar-baz-value')\n\n await expect(fooRenderCount).toBeInViewport()\n await expect(fooValue).toBeInViewport()\n await expect(fooIndexLink).toBeInViewport()\n await expect(fooBar1Link).toBeInViewport()\n await expect(fooBar2Link).toBeInViewport()\n await expect(fooRenderCount).toHaveText('1')\n await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))\n\n await fooBar1Link.click()\n await page.waitForLoadState('networkidle')\n await expect(fooValue).toBeInViewport()\n await expect(fooRenderCount).toBeInViewport()\n await expect(fooBarRenderCount).toBeInViewport()\n await expect(fooBarValue).toBeInViewport()\n await expect(fooBazInBarValue).toBeInViewport()\n await expect(fooBarBazLink).toBeInViewport()\n await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))\n await expect(fooRenderCount).toHaveText('1')\n await expect(fooBarRenderCount).toHaveText('1')\n await expect(fooBarValue).toHaveText('1')\n await expect(fooBazInBarValue).toHaveText('no param')\n\n await fooBarBazLink.click()\n await page.waitForLoadState('networkidle')\n await expect(fooValue).toBeInViewport()\n await expect(fooRenderCount).toBeInViewport()\n await expect(fooBarRenderCount).toBeInViewport()\n await expect(fooBarValue).toBeInViewport()\n await expect(fooBazInBarValue).toBeInViewport()\n await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))\n await expect(fooRenderCount).toHaveText('1')\n await expect(fooBarRenderCount).toHaveText('2')\n await expect(fooBarValue).toHaveText('1')\n await expect(fooBazInBarValue).toHaveText('1_10')\n await expect(fooBarBazValue).toHaveText('1_10')\n\n await fooBar2Link.click()\n await page.waitForLoadState('networkidle')\n await expect(fooValue).toBeInViewport()\n await expect(fooRenderCount).toBeInViewport()\n await expect(fooBarValue).toBeInViewport()\n await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))\n await expect(fooRenderCount).toHaveText('1')\n await expect(fooBarValue).toHaveText('2')\n\n await fooIndexLink.click()\n await page.waitForLoadState('networkidle')\n await expect(fooValue).toBeInViewport()\n await expect(fooRenderCount).toBeInViewport()\n await expect(fooBarValue).not.toBeInViewport()\n await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))\n await expect(fooRenderCount).toHaveText('1')\n })\n })\n\n test.describe('wildcard param', () => {\n const WILDCARD_PARAM_PAIRS = [\n // Test ID | Expected href\n {\n id: 'l-to-wildcard-foo',\n pathname: '/params-ps/wildcard/foo',\n params: { '*': 'foo', _splat: 'foo' },\n destHeadingId: 'ParamsWildcardSplat',\n },\n {\n id: 'l-to-wildcard-prefixfoo',\n pathname: '/params-ps/wildcard/prefixfoo',\n params: { '*': 'foo', _splat: 'foo' },\n destHeadingId: 'ParamsWildcardSplatPrefix',\n },\n {\n id: 'l-to-wildcard-foosuffix',\n pathname: '/params-ps/wildcard/foosuffix',\n params: { '*': 'foo', _splat: 'foo' },\n destHeadingId: 'ParamsWildcardSplatSuffix',\n },\n {\n id: 'l-to-wildcard-escaped',\n pathname: `/params-ps/wildcard/test[s%5C/.%5C/parameter%25!%F0%9F%9A%80]`,\n params: {\n _splat: 'test[s\\\\/.\\\\/parameter%!๐Ÿš€]',\n '*': 'test[s\\\\/.\\\\/parameter%!๐Ÿš€]',\n },\n destHeadingId: 'ParamsWildcardSplat',\n },\n {\n id: 'l-to-wildcard-prefix-escaped',\n pathname: `/params-ps/wildcard/prefix@%EB%8C%80test[s%5C/.%5C/parameter%25!%F0%9F%9A%80]`,\n params: {\n _splat: 'test[s\\\\/.\\\\/parameter%!๐Ÿš€]',\n '*': 'test[s\\\\/.\\\\/parameter%!๐Ÿš€]',\n },\n destHeadingId: 'ParamsWildcardSplatPrefix',\n },\n {\n id: 'l-to-wildcard-suffix-escaped',\n pathname: `/params-ps/wildcard/test[s%5C/.%5C/parameter%25!%F0%9F%9A%80]suffix@%EB%8C%80`,\n params: {\n _splat: 'test[s\\\\/.\\\\/parameter%!๐Ÿš€]',\n '*': 'test[s\\\\/.\\\\/parameter%!๐Ÿš€]',\n },\n destHeadingId: 'ParamsWildcardSplatSuffix',\n },\n {\n id: 'l-to-wildcard-encoded',\n pathname:\n '/params-ps/wildcard/%25EB%258C%2580%25ED%2595%259C%25EB%25AF%25BC%25EA%25B5%25AD',\n params: {\n '*': '%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n _splat: '%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n },\n destHeadingId: 'ParamsWildcardSplat',\n },\n ] satisfies Array<{\n id: string\n pathname: string\n params: Record\n destHeadingId: string\n }>\n\n test.describe('Link', () => {\n WILDCARD_PARAM_PAIRS.forEach(({ id, pathname }) => {\n test(`interpolation for testid=\"${id}\" has href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await expect(link).toHaveAttribute('href', pathname)\n })\n })\n\n WILDCARD_PARAM_PAIRS.forEach(({ id, pathname }) => {\n test(`navigation for testid=\"${id}\" succeeds to href=\"${pathname}\"`, async ({\n page,\n }) => {\n const link = page.getByTestId(id)\n await link.click()\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n })\n })\n })\n\n WILDCARD_PARAM_PAIRS.forEach(({ pathname, params, destHeadingId }) => {\n test(`on first-load to \"${pathname}\" has correct params`, async ({\n page,\n }) => {\n await page.goto(pathname)\n await page.waitForLoadState('networkidle')\n const pagePathname = new URL(page.url()).pathname\n expect(pagePathname).toBe(pathname)\n\n const headingEl = page.getByRole('heading', { name: destHeadingId })\n await expect(headingEl).toBeVisible()\n\n const paramsEl = page.getByTestId('params-output')\n const paramsText = await paramsEl.innerText()\n const paramsObj = JSON.parse(paramsText)\n expect(paramsObj).toEqual(params)\n })\n })\n })\n})\n\ntest.describe('Unicode params', () => {\n test('should render non-latin route correctly across multiple params', async ({\n page,\n baseURL,\n }) => {\n await page.goto('/params-ps')\n await page.waitForURL('/params-ps')\n const fooLink = page.getByTestId('l-to-named-foo-special-characters')\n\n await fooLink.click()\n await page.waitForURL('/params-ps/named/foo%25%5C%2F%F0%9F%9A%80%EB%8C%80')\n\n expect(page.url()).toBe(\n `${baseURL}/params-ps/named/foo%25%5C%2F%F0%9F%9A%80%EB%8C%80`,\n )\n\n const headingEl = page.getByRole('heading', { name: 'ParamsNamedFoo' })\n await expect(headingEl).toBeVisible()\n let paramsEl = page.getByTestId('params-output')\n let paramsText = await paramsEl.innerText()\n expect(paramsText).toEqual(JSON.stringify({ foo: 'foo%\\\\/๐Ÿš€๋Œ€' }))\n\n const barLink = page.getByTestId('params-foo-links-bar-special-characters')\n\n await barLink.click()\n\n await page.waitForURL(\n '/params-ps/named/foo%25%5C%2F%F0%9F%9A%80%EB%8C%80/%F0%9F%9A%80%252F%2Fabc%EB%8C%80',\n )\n\n expect(page.url()).toBe(\n `${baseURL}/params-ps/named/foo%25%5C%2F%F0%9F%9A%80%EB%8C%80/%F0%9F%9A%80%252F%2Fabc%EB%8C%80`,\n )\n\n paramsEl = page.getByTestId('foo-bar-value')\n paramsText = await paramsEl.innerText()\n expect(paramsText).toEqual('๐Ÿš€%2F/abc๋Œ€')\n })\n\n test.describe('should handle routes with non-latin paths and params correctly', () => {\n const testCases = [\n {\n name: 'named',\n childPath: '๐Ÿš€',\n latinParams: 'foo',\n unicodeParams: 'foo%\\\\/๐Ÿš€๋Œ€',\n },\n {\n name: 'wildcard',\n childPath: 'wildcard',\n latinParams: 'foo/bar',\n unicodeParams: 'foo%\\\\/๐Ÿš€๋Œ€',\n },\n ]\n\n testCases.forEach(({ name, childPath, latinParams, unicodeParams }) => {\n test(`${name} params`, async ({ page, baseURL }) => {\n const pascalCaseName = name.charAt(0).toUpperCase() + name.slice(1)\n const routeParentPath = '/๋Œ€ํ•œ๋ฏผ๊ตญ'\n const encodedRouteParentPath = encodeURI(routeParentPath)\n const childRoutePath = `${routeParentPath}/${childPath}`\n const encodedChildRoutePath = encodeURI(childRoutePath)\n\n await page.goto(routeParentPath)\n await page.waitForURL(encodedRouteParentPath)\n\n const headingRootEl = page.getByTestId('unicode-heading')\n\n expect(await headingRootEl.innerText()).toBe('Hello \"/๋Œ€ํ•œ๋ฏผ๊ตญ\"!')\n\n const latinLink = page.getByTestId(`l-to-${name}-latin`)\n const unicodeLink = page.getByTestId(`l-to-${name}-unicode`)\n\n await expect(latinLink).not.toContainClass('font-bold')\n await expect(unicodeLink).not.toContainClass('font-bold')\n\n await latinLink.click()\n\n await page.waitForURL(`${encodedChildRoutePath}/${latinParams}`)\n\n expect(page.url()).toBe(\n `${baseURL}${encodedChildRoutePath}/${latinParams}`,\n )\n\n await expect(latinLink).toContainClass('font-bold')\n await expect(unicodeLink).not.toContainClass('font-bold')\n\n const headingEl = page.getByTestId(`unicode-${name}-heading`)\n const paramsEl = page.getByTestId(`unicode-${name}-params`)\n\n expect(await headingEl.innerText()).toBe(\n `Unicode ${pascalCaseName} Params`,\n )\n expect(await paramsEl.innerText()).toBe(latinParams)\n\n await unicodeLink.click()\n\n const encodedParams =\n name === 'wildcard'\n ? encodeURI(unicodeParams)\n : encodeURIComponent(unicodeParams)\n\n await page.waitForURL(`${encodedChildRoutePath}/${encodedParams}`)\n\n expect(page.url()).toBe(\n `${baseURL}${encodedChildRoutePath}/${encodedParams}`,\n )\n\n await expect(latinLink).not.toContainClass('font-bold')\n await expect(unicodeLink).toContainClass('font-bold')\n\n expect(await headingEl.innerText()).toBe(\n `Unicode ${pascalCaseName} Params`,\n )\n expect(await paramsEl.innerText()).toBe(unicodeParams)\n })\n })\n })\n})\n\ntest.describe('useParams strict false uses parsed child params', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto('/params-ps')\n })\n\n test('parent receives parsed values after child navigation', async ({\n page,\n }) => {\n await page.getByTestId('strict-false-version-1').click()\n await page.waitForURL('/params-ps/strict-false/1')\n\n await expect(page.getByTestId('strict-false-version-type')).toHaveText(\n 'number',\n )\n await expect(page.getByTestId('strict-false-version-value')).toHaveText('1')\n\n await page.getByTestId('strict-false-version-2').click()\n await page.waitForURL('/params-ps/strict-false/2')\n\n await expect(page.getByTestId('strict-false-version-type')).toHaveText(\n 'number',\n )\n await expect(page.getByTestId('strict-false-version-value')).toHaveText('2')\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/redirect.spec.ts", "content": "import queryString from 'node:querystring'\nimport { expect, test } from '@playwright/test'\nimport combinateImport from 'combinate'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from '../package.json' with { type: 'json' }\n\n// somehow playwright does not correctly import default exports\nconst combinate = (combinateImport as any).default as typeof combinateImport\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_HOST_PORT = await getDummyServerPort(packageJson.name)\n\ntest.describe('redirects', () => {\n const internalNavigationTestMatrix = combinate({\n thrower: ['beforeLoad', 'loader'] as const,\n reloadDocument: [false, true] as const,\n preload: [false, true] as const,\n })\n\n internalNavigationTestMatrix.forEach(\n ({ thrower, reloadDocument, preload }) => {\n test(`internal target, navigation: thrower: ${thrower}, reloadDocument: ${reloadDocument}, preload: ${preload}`, async ({\n page,\n }) => {\n await page.waitForLoadState('networkidle')\n await page.goto(\n `/redirect/internal${preload === false ? '?preload=false' : ''}`,\n )\n const link = page.getByTestId(\n `via-${thrower}${reloadDocument ? '-reloadDocument' : ''}`,\n )\n\n await page.waitForLoadState('networkidle')\n let requestHappened = false\n\n const requestPromise = new Promise((resolve) => {\n page.on('request', (request) => {\n if (\n request.url() === `http://localhost:${EXTERNAL_HOST_PORT}/posts`\n ) {\n requestHappened = true\n resolve()\n }\n })\n })\n await link.focus()\n\n const expectRequestHappened = preload && !reloadDocument\n const timeoutPromise = new Promise((resolve) =>\n setTimeout(resolve, expectRequestHappened ? 5000 : 500),\n )\n await Promise.race([requestPromise, timeoutPromise])\n await page.waitForLoadState('networkidle')\n expect(requestHappened).toBe(expectRequestHappened)\n await link.click()\n let fullPageLoad = false\n page.on('domcontentloaded', () => {\n fullPageLoad = true\n })\n\n const url = `http://localhost:${PORT}/posts`\n\n await page.waitForURL(url)\n if (reloadDocument) {\n await page.waitForLoadState('domcontentloaded')\n }\n expect(page.url()).toBe(url)\n await expect(page.getByTestId('PostsIndexComponent')).toBeInViewport()\n expect(fullPageLoad).toBe(reloadDocument)\n })\n },\n )\n\n const internalDirectVisitTestMatrix = combinate({\n thrower: ['beforeLoad', 'loader'] as const,\n reloadDocument: [false, true] as const,\n })\n\n internalDirectVisitTestMatrix.forEach(({ thrower, reloadDocument }) => {\n test(`internal target, direct visit: thrower: ${thrower}, reloadDocument: ${reloadDocument}`, async ({\n page,\n }) => {\n await page.waitForLoadState('networkidle')\n\n await page.goto(`/redirect/internal/via-${thrower}`)\n\n const url = `http://localhost:${PORT}/posts`\n\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('PostsIndexComponent')).toBeInViewport()\n })\n })\n\n const externalTestMatrix = combinate({\n scenario: ['navigate', 'direct_visit'] as const,\n thrower: ['beforeLoad', 'loader'] as const,\n })\n\n externalTestMatrix.forEach(({ scenario, thrower }) => {\n test(`external target: scenario: ${scenario}, thrower: ${thrower}`, async ({\n page,\n }) => {\n await page.waitForLoadState('networkidle')\n\n const q = queryString.stringify({\n externalHost: `http://localhost:${EXTERNAL_HOST_PORT}/`,\n })\n\n if (scenario === 'navigate') {\n await page.goto(`/redirect/external?${q}`)\n await page.getByTestId(`via-${thrower}`).click()\n } else {\n await page.goto(`/redirect/external/via-${thrower}?${q}`)\n }\n\n const url = `http://localhost:${EXTERNAL_HOST_PORT}/`\n\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n })\n })\n\n test('regression test for #3097', async ({ page }) => {\n await page.goto(`/redirect/preload/first`)\n const link = page.getByTestId(`link`)\n await link.focus()\n await link.click()\n await page.waitForURL('/redirect/preload/third')\n await expect(page.getByTestId(`third`)).toBeInViewport()\n })\n\n // Tests for Route.redirect() method - tests relative redirects\n test.describe('Route.redirect()', () => {\n const routeRedirectInternalTestMatrix = combinate({\n thrower: ['beforeLoad', 'loader'] as const,\n })\n\n // Test internal relative redirects (the key feature being tested)\n routeRedirectInternalTestMatrix.forEach(({ thrower }) => {\n test(`internal target (relative redirect), navigation: thrower: ${thrower}`, async ({\n page,\n }) => {\n await page.goto('/redirect/internal')\n await page.waitForLoadState('networkidle')\n\n const link = page.getByTestId(`via-route-redirect-${thrower}`)\n await link.click()\n\n // Should redirect to the relative ./destination route\n const url = `http://localhost:${PORT}/redirect/internal/destination`\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n await expect(page.getByTestId('redirect-destination')).toBeInViewport()\n })\n })\n\n routeRedirectInternalTestMatrix.forEach(({ thrower }) => {\n test(`internal target (relative redirect), direct visit: thrower: ${thrower}`, async ({\n page,\n }) => {\n await page.goto(`/redirect/internal/via-route-redirect-${thrower}`)\n\n // Should redirect to the relative ./destination route\n const url = `http://localhost:${PORT}/redirect/internal/destination`\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n await expect(page.getByTestId('redirect-destination')).toBeInViewport()\n })\n })\n\n // Test external redirects still work with Route.redirect()\n const externalRouteRedirectTestMatrix = combinate({\n scenario: ['navigate', 'direct_visit'] as const,\n thrower: ['beforeLoad', 'loader'] as const,\n })\n\n externalRouteRedirectTestMatrix.forEach(({ scenario, thrower }) => {\n test(`external target: scenario: ${scenario}, thrower: ${thrower}`, async ({\n page,\n }) => {\n const q = queryString.stringify({\n externalHost: `http://localhost:${EXTERNAL_HOST_PORT}/`,\n })\n\n if (scenario === 'navigate') {\n await page.goto(`/redirect/external?${q}`)\n await page.waitForLoadState('networkidle')\n await page.getByTestId(`via-route-redirect-${thrower}`).click()\n } else {\n await page.goto(\n `/redirect/external/via-route-redirect-${thrower}?${q}`,\n )\n }\n\n const url = `http://localhost:${EXTERNAL_HOST_PORT}/`\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n })\n })\n })\n\n // Tests for getRouteApi().redirect() method - tests relative redirects\n test.describe('getRouteApi().redirect()', () => {\n const routeApiRedirectInternalTestMatrix = combinate({\n thrower: ['beforeLoad', 'loader'] as const,\n })\n\n // Test internal relative redirects (the key feature being tested)\n routeApiRedirectInternalTestMatrix.forEach(({ thrower }) => {\n test(`internal target (relative redirect), navigation: thrower: ${thrower}`, async ({\n page,\n }) => {\n await page.goto('/redirect/internal')\n await page.waitForLoadState('networkidle')\n\n const link = page.getByTestId(`via-routeApi-redirect-${thrower}`)\n await link.click()\n\n // Should redirect to the relative ./destination route\n const url = `http://localhost:${PORT}/redirect/internal/destination`\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n await expect(page.getByTestId('redirect-destination')).toBeInViewport()\n })\n })\n\n routeApiRedirectInternalTestMatrix.forEach(({ thrower }) => {\n test(`internal target (relative redirect), direct visit: thrower: ${thrower}`, async ({\n page,\n }) => {\n await page.goto(`/redirect/internal/via-routeApi-redirect-${thrower}`)\n\n // Should redirect to the relative ./destination route\n const url = `http://localhost:${PORT}/redirect/internal/destination`\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n await expect(page.getByTestId('redirect-destination')).toBeInViewport()\n })\n })\n\n // Test external redirects still work with getRouteApi().redirect()\n const externalRouteApiRedirectTestMatrix = combinate({\n scenario: ['navigate', 'direct_visit'] as const,\n thrower: ['beforeLoad', 'loader'] as const,\n })\n\n externalRouteApiRedirectTestMatrix.forEach(({ scenario, thrower }) => {\n test(`external target: scenario: ${scenario}, thrower: ${thrower}`, async ({\n page,\n }) => {\n const q = queryString.stringify({\n externalHost: `http://localhost:${EXTERNAL_HOST_PORT}/`,\n })\n\n if (scenario === 'navigate') {\n await page.goto(`/redirect/external?${q}`)\n await page.waitForLoadState('networkidle')\n await page.getByTestId(`via-routeApi-redirect-${thrower}`).click()\n } else {\n await page.goto(\n `/redirect/external/via-routeApi-redirect-${thrower}?${q}`,\n )\n }\n\n const url = `http://localhost:${EXTERNAL_HOST_PORT}/`\n await page.waitForURL(url)\n expect(page.url()).toBe(url)\n })\n })\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/relative.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport combinateImport from 'combinate'\nimport { getTestServerPort } from '@tanstack/router-e2e-utils'\nimport packageJson from '../package.json' with { type: 'json' }\n\n// somehow playwright does not correctly import default exports\nconst combinate = (combinateImport as any).default as typeof combinateImport\n\nconst PORT = await getTestServerPort(packageJson.name)\n\ntest.describe('relative_routing', () => {\n const internalNavigationTestMatrix = combinate({\n navigation: ['link', 'useNavigate'] as const,\n })\n\n internalNavigationTestMatrix.forEach(({ navigation }) => {\n test(`simple relative navigation. navigation: ${navigation}`, async ({\n page,\n }) => {\n await page.waitForLoadState('networkidle')\n await page.goto(`/relative/${navigation}`)\n await page.waitForURL(`http://localhost:${PORT}/relative/${navigation}`)\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n const indexLink = page.getByTestId(`relative-${navigation}-index`)\n const backLink = page.getByTestId(`relative-${navigation}-back`)\n const relativeRouteA = page.getByTestId(`relative-${navigation}-a`)\n const relativeRouteB = page.getByTestId(`relative-${navigation}-b`)\n\n await relativeRouteA.click()\n\n await page.waitForURL(\n `http://localhost:${PORT}/relative/${navigation}/relative-${navigation}-a`,\n )\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n await expect(\n page.getByTestId(`relative-${navigation}-a-header`),\n ).toBeInViewport()\n\n await relativeRouteB.click()\n\n await page.waitForURL(\n `http://localhost:${PORT}/relative/${navigation}/relative-${navigation}-b`,\n )\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n await expect(\n page.getByTestId(`relative-${navigation}-b-header`),\n ).toBeInViewport()\n\n await indexLink.click()\n\n await page.waitForURL(`http://localhost:${PORT}/relative/${navigation}`)\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n await expect(\n page.getByTestId(`relative-${navigation}-b-header`),\n ).not.toBeInViewport()\n\n await backLink.click()\n\n await page.waitForURL(`http://localhost:${PORT}/relative`)\n\n await expect(page.getByTestId(`relative-routing-home`)).toBeInViewport()\n })\n\n test(`nested chilren. navigation: ${navigation}`, async ({ page }) => {\n await page.waitForLoadState('networkidle')\n await page.goto(`/relative/${navigation}`)\n await page.waitForURL(`http://localhost:${PORT}/relative/${navigation}`)\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n const backLink = page.getByTestId(`relative-${navigation}-back`)\n\n const deeplyNestedChildRoute = page.getByTestId(\n `relative-${navigation}-deeply-nested`,\n )\n\n await deeplyNestedChildRoute.click()\n\n await page.waitForURL(\n `http://localhost:${PORT}/relative/${navigation}/nested/deep`,\n )\n\n await expect(\n page.getByTestId(`relative-${navigation}-nested-deep-header`),\n ).toBeInViewport()\n\n await backLink.click()\n\n await page.waitForURL(\n `http://localhost:${PORT}/relative/${navigation}/nested`,\n )\n\n await expect(\n page.getByTestId(`relative-${navigation}-nested-header`),\n ).toBeInViewport()\n })\n\n test(`with path params. navigation: ${navigation}`, async ({ page }) => {\n await page.waitForLoadState('networkidle')\n await page.goto(`/relative/${navigation}`)\n await page.waitForURL(`http://localhost:${PORT}/relative/${navigation}`)\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n const pathParamRoute = page.getByTestId(`relative-${navigation}-path`)\n\n await pathParamRoute.click()\n\n await page.waitForURL(\n `http://localhost:${PORT}/relative/${navigation}/path/a`,\n )\n\n expect(page.url().endsWith('/path/a')).toBe(true)\n\n await expect(\n page.getByTestId(`relative-${navigation}-path-param-header`),\n ).toBeInViewport()\n\n const switchParamLink = page.getByTestId(\n `relative-${navigation}-path-param-switchAB`,\n )\n\n await switchParamLink.click()\n\n await page.waitForURL(\n `http://localhost:${PORT}/relative/${navigation}/path/b`,\n )\n\n expect(page.url().endsWith('/path/b')).toBe(true)\n\n await expect(\n page.getByTestId(`relative-${navigation}-path-param-header`),\n ).toBeInViewport()\n })\n\n test(`with search params. navigation: ${navigation}`, async ({ page }) => {\n await page.waitForLoadState('networkidle')\n await page.goto(`/relative/${navigation}`)\n await page.waitForURL(`http://localhost:${PORT}/relative/${navigation}`)\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n const searchParamRoute = page.getByTestId(\n `relative-${navigation}-withSearch`,\n )\n\n await searchParamRoute.click()\n\n let expectedUrl = new URL(\n `http://localhost:${PORT}/relative/${navigation}/with-search?searchParam=\"1\"`,\n )\n\n await page.waitForLoadState('domcontentloaded')\n\n expect(page.url().toString()).toBe(expectedUrl.toString())\n\n await expect(\n page.getByTestId(`relative-${navigation}-withSearch-header`),\n ).toBeInViewport()\n\n await expect(\n page.getByTestId(`relative-${navigation}-withSearch-header`),\n ).toContainText('searchParam: 1')\n\n const updateSearchLink = page.getByTestId(\n `relative-${navigation}-withSearch-update-param`,\n )\n\n await updateSearchLink.click()\n\n await page.waitForLoadState('domcontentloaded')\n\n expectedUrl = new URL(\n `http://localhost:${PORT}/relative/${navigation}/with-search?searchParam=\"2\"`,\n )\n\n expect(page.url().toString()).toBe(expectedUrl.toString())\n\n await expect(\n page.getByTestId(`relative-${navigation}-withSearch-header`),\n ).toContainText('searchParam: 2')\n\n await expect(\n page.getByTestId(`relative-${navigation}-withSearch-header`),\n ).toBeInViewport()\n })\n\n test(`shouldn't cause excessive rendering. navigation: ${navigation}`, async ({\n page,\n }) => {\n let navigateMsgs = 0\n\n page.on('console', (msg) => {\n if (msg.text() === 'navigate') {\n navigateMsgs++\n }\n })\n\n await page.waitForLoadState('networkidle')\n await page.goto(`/relative/${navigation}`)\n await page.waitForURL(`http://localhost:${PORT}/relative/${navigation}`)\n\n await expect(\n page.getByTestId(`relative-${navigation}-header`),\n ).toBeInViewport()\n\n expect(navigateMsgs).toBe(1)\n const indexLink = page.getByTestId(`relative-${navigation}-index`)\n const backLink = page.getByTestId(`relative-${navigation}-back`)\n const relativeRouteA = page.getByTestId(`relative-${navigation}-a`)\n const relativeRouteB = page.getByTestId(`relative-${navigation}-b`)\n const deeplyNestedChildRoute = page.getByTestId(\n `relative-${navigation}-deeply-nested`,\n )\n const pathParamRoute = page.getByTestId(`relative-${navigation}-path`)\n const searchParamRoute = page.getByTestId(\n `relative-${navigation}-withSearch`,\n )\n\n await relativeRouteA.click()\n await page.waitForLoadState('domcontentloaded')\n await relativeRouteB.click()\n await page.waitForLoadState('domcontentloaded')\n await deeplyNestedChildRoute.click()\n await page.waitForLoadState('domcontentloaded')\n await backLink.click()\n await page.waitForLoadState('domcontentloaded')\n await pathParamRoute.click()\n await page.waitForLoadState('domcontentloaded')\n const switchParamLink = page.getByTestId(\n `relative-${navigation}-path-param-switchAB`,\n )\n await switchParamLink.click()\n await page.waitForLoadState('domcontentloaded')\n await searchParamRoute.click()\n await page.waitForLoadState('domcontentloaded')\n\n const updateSearchLink = page.getByTestId(\n `relative-${navigation}-withSearch-update-param`,\n )\n\n await updateSearchLink.click()\n await page.waitForLoadState('domcontentloaded')\n\n await indexLink.click()\n await page.waitForLoadState('domcontentloaded')\n\n expect(navigateMsgs).toBe(1)\n })\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/scroll-into-view.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport type { Page } from '@playwright/test'\n\nconst anchors = {\n defaultAnchor: 'default-anchor',\n noScrollIntoView: 'false-anchor',\n smoothScroll: 'smooth-scroll',\n} as const\n\nconst formTestIds = {\n targetAnchor: 'hash-select',\n scrollIntoView: 'with-scroll',\n behaviorSelect: 'behavior-select',\n blockSelect: 'block-select',\n inlineSelect: 'inline-select',\n navigateButton: 'navigate-button',\n}\n\nconst shownSuffix = '(shown)'\n\nconst activeClass = 'font-bold active'\n\nfunction getAnchorTarget(page: Page, anchor: string) {\n return page.getByTestId(`heading-${anchor}`)\n}\n\nfunction getAnchorLink(page: Page, anchor: string) {\n return page.getByTestId(`link-${anchor}`)\n}\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/anchor')\n})\n\n// Testing the `Link` component with the `hashScrollIntoView` prop\ntest('Navigating via anchor `Link` with default hash scrolling behavior', async ({\n page,\n}) => {\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(\n shownSuffix,\n )\n\n await getAnchorLink(page, anchors.defaultAnchor).click()\n\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).toBeVisible()\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorLink(page, anchors.defaultAnchor)).toHaveClass(\n activeClass,\n )\n})\n\ntest('Navigating via anchor `Link` with hash scrolling disabled', async ({\n page,\n}) => {\n const initialScrollPosition = await page.evaluate(() => window.scrollY)\n\n await expect(\n getAnchorTarget(page, anchors.noScrollIntoView),\n ).not.toContainText(shownSuffix)\n\n await getAnchorLink(page, anchors.noScrollIntoView).click()\n\n // The active anchor should have updated\n await expect(getAnchorLink(page, anchors.noScrollIntoView)).toHaveClass(\n activeClass,\n )\n\n // The anchor should not have been visible, because the scroll should not have been activated\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(\n shownSuffix,\n )\n\n // Expect the same scroll position as before\n expect(await page.evaluate(() => window.scrollY)).toBe(initialScrollPosition)\n})\n\ntest('Navigating via anchor `Link` with smooth hash scrolling behavior', async ({\n page,\n}) => {\n await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(\n shownSuffix,\n )\n\n await getAnchorLink(page, anchors.smoothScroll).click()\n await expect(getAnchorTarget(page, anchors.smoothScroll)).toBeVisible()\n\n // Smooth scrolling should activate the IntersectionObserver on all headings, making them all render \"(shown)\"\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).toContainText(\n shownSuffix,\n )\n await expect(getAnchorTarget(page, anchors.noScrollIntoView)).toContainText(\n shownSuffix,\n )\n await expect(getAnchorTarget(page, anchors.smoothScroll)).toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(\n activeClass,\n )\n})\n\n// Testing the `useNavigate` hook with the `hashScrollIntoView` option\ntest('Navigating via `useNavigate` with instant scroll behavior', async ({\n page,\n}) => {\n await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(\n shownSuffix,\n )\n\n // Scroll to the last anchor instantly, should not activate Intersection Observers for the other anchors\n await page.getByTestId(formTestIds.targetAnchor).selectOption('Smooth Scroll')\n await page.getByTestId(formTestIds.scrollIntoView).check()\n await page.getByTestId(formTestIds.behaviorSelect).selectOption('instant')\n await page.getByTestId(formTestIds.blockSelect).selectOption('start')\n await page.getByTestId(formTestIds.inlineSelect).selectOption('nearest')\n await page.getByTestId(formTestIds.navigateButton).click()\n\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(\n shownSuffix,\n )\n\n await expect(\n getAnchorTarget(page, anchors.noScrollIntoView),\n ).not.toContainText(shownSuffix)\n\n await expect(getAnchorTarget(page, anchors.smoothScroll)).toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorLink(page, anchors.smoothScroll)).toBeVisible()\n\n await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(\n activeClass,\n )\n})\n\ntest('Navigating via `useNavigate` with scrollIntoView disabled', async ({\n page,\n}) => {\n const initialScrollPosition = await page.evaluate(() => window.scrollY)\n\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(\n shownSuffix,\n )\n\n await expect(\n getAnchorTarget(page, anchors.noScrollIntoView),\n ).not.toContainText(shownSuffix)\n\n await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(\n shownSuffix,\n )\n\n // Navigate to the last anchor, but with scrollIntoView disabled should not activate Intersection Observers for any anchors\n await page.getByTestId(formTestIds.targetAnchor).selectOption('Smooth Scroll')\n await page.getByTestId(formTestIds.scrollIntoView).uncheck()\n await page.getByTestId(formTestIds.navigateButton).click()\n\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(\n shownSuffix,\n )\n\n await expect(\n getAnchorTarget(page, anchors.noScrollIntoView),\n ).not.toContainText(shownSuffix)\n\n await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(\n activeClass,\n )\n\n // Expect the same scroll position as before\n expect(await page.evaluate(() => window.scrollY)).toBe(initialScrollPosition)\n})\n\ntest('Navigating via `useNavigate` with smooth scroll behavior', async ({\n page,\n}) => {\n await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(\n shownSuffix,\n )\n\n // Scroll to the last anchor smoothly, should activate Intersection Observers for the other anchors, making them all render \"(shown)\"\n await page.getByTestId(formTestIds.targetAnchor).selectOption('Smooth Scroll')\n await page.getByTestId(formTestIds.scrollIntoView).check()\n await page.getByTestId(formTestIds.behaviorSelect).selectOption('smooth')\n await page.getByTestId(formTestIds.blockSelect).selectOption('start')\n await page.getByTestId(formTestIds.inlineSelect).selectOption('nearest')\n await page.getByTestId(formTestIds.navigateButton).click()\n\n await expect(getAnchorTarget(page, anchors.defaultAnchor)).toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorTarget(page, anchors.noScrollIntoView)).toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorTarget(page, anchors.smoothScroll)).toContainText(\n shownSuffix,\n )\n\n await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(\n activeClass,\n )\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/search-params.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.describe('/search-params/default', () => {\n test('Directly visiting the route without search param set', async ({\n page,\n }) => {\n await page.goto('/search-params/default')\n await page.waitForURL('/search-params/default?default=d1')\n\n await expect(page.getByTestId('search-default')).toContainText('d1')\n await expect(page.getByTestId('context-hello')).toContainText('world')\n expect(\n page.url().endsWith('/search-params/default?default=d1'),\n ).toBeTruthy()\n })\n\n test('Directly visiting the route with search param set', async ({\n page,\n }) => {\n await page.goto('/search-params/default/?default=d2')\n await page.waitForURL('/search-params/default?default=d2')\n\n await expect(page.getByTestId('search-default')).toContainText('d2')\n await expect(page.getByTestId('context-hello')).toContainText('world')\n expect(\n page.url().endsWith('/search-params/default?default=d2'),\n ).toBeTruthy()\n })\n\n test('Directly visiting the route with special character search param set', async ({\n page,\n }) => {\n await page.goto('/search-params/default/?default=๐Ÿš€๋Œ€ํ•œ๋ฏผ๊ตญ')\n await page.waitForURL(\n '/search-params/default?default=%F0%9F%9A%80%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n )\n\n await expect(page.getByTestId('search-default')).toContainText('๐Ÿš€๋Œ€ํ•œ๋ฏผ๊ตญ')\n await expect(page.getByTestId('context-hello')).toContainText('world')\n\n expect(\n page\n .url()\n .endsWith(\n '/search-params/default?default=%F0%9F%9A%80%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n ),\n ).toBeTruthy()\n })\n\n test('Directly visiting the route with encoded character search param set', async ({\n page,\n }) => {\n await page.goto(\n '/search-params/default/?default=%25EB%258C%2580%25ED%2595%259C%25EB%25AF%25BC%25EA%25B5%25AD',\n )\n await page.waitForURL(\n '/search-params/default?default=%25EB%258C%2580%25ED%2595%259C%25EB%25AF%25BC%25EA%25B5%25AD',\n )\n\n await expect(page.getByTestId('search-default')).toContainText(\n '%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n )\n await expect(page.getByTestId('context-hello')).toContainText('world')\n\n expect(\n page\n .url()\n .endsWith(\n '/search-params/default?default=%25EB%258C%2580%25ED%2595%259C%25EB%25AF%25BC%25EA%25B5%25AD',\n ),\n ).toBeTruthy()\n })\n\n test('navigating to the route without search param set', async ({ page }) => {\n await page.goto('/search-params/')\n await page.getByTestId('link-to-default-without-search').click()\n await page.waitForURL('/search-params/default?default=d1')\n\n await expect(page.getByTestId('search-default')).toContainText('d1')\n await expect(page.getByTestId('context-hello')).toContainText('world')\n expect(\n page.url().endsWith('/search-params/default?default=d1'),\n ).toBeTruthy()\n })\n\n test('navigating to the route with search param set', async ({ page }) => {\n await page.goto('/search-params/')\n await page.getByTestId('link-to-default-with-search').click()\n await page.waitForURL('/search-params/default?default=d2')\n\n await expect(page.getByTestId('search-default')).toContainText('d2')\n await expect(page.getByTestId('context-hello')).toContainText('world')\n expect(\n page.url().endsWith('/search-params/default?default=d2'),\n ).toBeTruthy()\n })\n\n test('navigating to the route with special character search param set', async ({\n page,\n }) => {\n await page.goto('/search-params/')\n await page\n .getByTestId('link-to-default-with-search-special-characters')\n .click()\n await page.waitForURL(\n '/search-params/default?default=%F0%9F%9A%80%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n )\n\n await expect(page.getByTestId('search-default')).toContainText('๐Ÿš€๋Œ€ํ•œ๋ฏผ๊ตญ')\n await expect(page.getByTestId('context-hello')).toContainText('world')\n expect(\n page\n .url()\n .endsWith(\n '/search-params/default?default=%F0%9F%9A%80%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n ),\n ).toBeTruthy()\n })\n\n test('navigating to the route with encoded character search param set', async ({\n page,\n }) => {\n await page.goto('/search-params/')\n await page\n .getByTestId('link-to-default-with-search-encoded-characters')\n .click()\n await page.waitForURL(\n '/search-params/default?default=%25EB%258C%2580%25ED%2595%259C%25EB%25AF%25BC%25EA%25B5%25AD',\n )\n\n await expect(page.getByTestId('search-default')).toContainText(\n '%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD',\n )\n await expect(page.getByTestId('context-hello')).toContainText('world')\n expect(\n page\n .url()\n .endsWith(\n '/search-params/default?default=%25EB%258C%2580%25ED%2595%259C%25EB%25AF%25BC%25EA%25B5%25AD',\n ),\n ).toBeTruthy()\n })\n})\n" }, { "path": "e2e/react-router/basic-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-file-based/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n tanstackRouter({\n target: 'react',\n }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-file-based-code-splitting\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e:verbose-routes:true\": \"rm -rf port*.txt; VERBOSE_FILE_ROUTES=1 playwright test --project=chromium\",\n \"test:e2e:verbose-routes:false\": \"rm -rf port*.txt; VERBOSE_FILE_ROUTES=0 playwright test --project=chromium\",\n \"test:e2e\": \"rm -rf port*.txt; pnpm run test:e2e:verbose-routes:true && pnpm run test:e2e:verbose-routes:false\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"tailwindcss\": \"^4.2.2\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport type { CreateFileRoute, FileRoutesByPath } from '@tanstack/react-router'\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as WithoutLoaderRouteImport } from './routes/without-loader'\nimport { Route as ViewportTestRouteImport } from './routes/viewport-test'\nimport { Route as SharedSingletonRouteImport } from './routes/shared-singleton'\nimport { Route as PostsRouteImport } from './routes/posts'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as IndexRouteImport } from './routes/index'\nimport { Route as PostsIndexRouteImport } from './routes/posts.index'\nimport { Route as PostsPostIdRouteImport } from './routes/posts.$postId'\nimport { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'\nimport { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b'\nimport { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a'\n\nconst WithoutLoaderRoute = WithoutLoaderRouteImport.update({\n id: '/without-loader',\n path: '/without-loader',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ViewportTestRoute = ViewportTestRouteImport.update({\n id: '/viewport-test',\n path: '/viewport-test',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst SharedSingletonRoute = SharedSingletonRouteImport.update({\n id: '/shared-singleton',\n path: '/shared-singleton',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsRoute = PostsRouteImport.update({\n id: '/posts',\n path: '/posts',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutRoute = LayoutRouteImport.update({\n id: '/_layout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsIndexRoute = PostsIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => PostsRoute,\n} as any)\nconst PostsPostIdRoute = PostsPostIdRouteImport.update({\n id: '/$postId',\n path: '/$postId',\n getParentRoute: () => PostsRoute,\n} as any)\nconst LayoutLayout2Route = LayoutLayout2RouteImport.update({\n id: '/_layout-2',\n getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBRouteImport.update({\n id: '/layout-b',\n path: '/layout-b',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\nconst LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({\n id: '/layout-a',\n path: '/layout-a',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/posts': typeof PostsRouteWithChildren\n '/shared-singleton': typeof SharedSingletonRoute\n '/viewport-test': typeof ViewportTestRoute\n '/without-loader': typeof WithoutLoaderRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/shared-singleton': typeof SharedSingletonRoute\n '/viewport-test': typeof ViewportTestRoute\n '/without-loader': typeof WithoutLoaderRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts': typeof PostsIndexRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/_layout': typeof LayoutRouteWithChildren\n '/posts': typeof PostsRouteWithChildren\n '/shared-singleton': typeof SharedSingletonRoute\n '/viewport-test': typeof ViewportTestRoute\n '/without-loader': typeof WithoutLoaderRoute\n '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute\n '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | '/posts'\n | '/shared-singleton'\n | '/viewport-test'\n | '/without-loader'\n | '/posts/$postId'\n | '/posts/'\n | '/layout-a'\n | '/layout-b'\n fileRoutesByTo: FileRoutesByTo\n to:\n | '/'\n | '/shared-singleton'\n | '/viewport-test'\n | '/without-loader'\n | '/posts/$postId'\n | '/posts'\n | '/layout-a'\n | '/layout-b'\n id:\n | '__root__'\n | '/'\n | '/_layout'\n | '/posts'\n | '/shared-singleton'\n | '/viewport-test'\n | '/without-loader'\n | '/_layout/_layout-2'\n | '/posts/$postId'\n | '/posts/'\n | '/_layout/_layout-2/layout-a'\n | '/_layout/_layout-2/layout-b'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n LayoutRoute: typeof LayoutRouteWithChildren\n PostsRoute: typeof PostsRouteWithChildren\n SharedSingletonRoute: typeof SharedSingletonRoute\n ViewportTestRoute: typeof ViewportTestRoute\n WithoutLoaderRoute: typeof WithoutLoaderRoute\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/without-loader': {\n id: '/without-loader'\n path: '/without-loader'\n fullPath: '/without-loader'\n preLoaderRoute: typeof WithoutLoaderRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/viewport-test': {\n id: '/viewport-test'\n path: '/viewport-test'\n fullPath: '/viewport-test'\n preLoaderRoute: typeof ViewportTestRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/shared-singleton': {\n id: '/shared-singleton'\n path: '/shared-singleton'\n fullPath: '/shared-singleton'\n preLoaderRoute: typeof SharedSingletonRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts': {\n id: '/posts'\n path: '/posts'\n fullPath: '/posts'\n preLoaderRoute: typeof PostsRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/_layout': {\n id: '/_layout'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof LayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts/': {\n id: '/posts/'\n path: '/'\n fullPath: '/posts/'\n preLoaderRoute: typeof PostsIndexRouteImport\n parentRoute: typeof PostsRoute\n }\n '/posts/$postId': {\n id: '/posts/$postId'\n path: '/$postId'\n fullPath: '/posts/$postId'\n preLoaderRoute: typeof PostsPostIdRouteImport\n parentRoute: typeof PostsRoute\n }\n '/_layout/_layout-2': {\n id: '/_layout/_layout-2'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof LayoutLayout2RouteImport\n parentRoute: typeof LayoutRoute\n }\n '/_layout/_layout-2/layout-b': {\n id: '/_layout/_layout-2/layout-b'\n path: '/layout-b'\n fullPath: '/layout-b'\n preLoaderRoute: typeof LayoutLayout2LayoutBRouteImport\n parentRoute: typeof LayoutLayout2Route\n }\n '/_layout/_layout-2/layout-a': {\n id: '/_layout/_layout-2/layout-a'\n path: '/layout-a'\n fullPath: '/layout-a'\n preLoaderRoute: typeof LayoutLayout2LayoutARouteImport\n parentRoute: typeof LayoutLayout2Route\n }\n }\n}\n\ndeclare module './routes/index' {\n const createFileRoute: CreateFileRoute<\n '/',\n FileRoutesByPath['/']['parentRoute'],\n FileRoutesByPath['/']['id'],\n FileRoutesByPath['/']['path'],\n FileRoutesByPath['/']['fullPath']\n >\n}\ndeclare module './routes/_layout' {\n const createFileRoute: CreateFileRoute<\n '/_layout',\n FileRoutesByPath['/_layout']['parentRoute'],\n FileRoutesByPath['/_layout']['id'],\n FileRoutesByPath['/_layout']['path'],\n FileRoutesByPath['/_layout']['fullPath']\n >\n}\ndeclare module './routes/posts' {\n const createFileRoute: CreateFileRoute<\n '/posts',\n FileRoutesByPath['/posts']['parentRoute'],\n FileRoutesByPath['/posts']['id'],\n FileRoutesByPath['/posts']['path'],\n FileRoutesByPath['/posts']['fullPath']\n >\n}\ndeclare module './routes/shared-singleton' {\n const createFileRoute: CreateFileRoute<\n '/shared-singleton',\n FileRoutesByPath['/shared-singleton']['parentRoute'],\n FileRoutesByPath['/shared-singleton']['id'],\n FileRoutesByPath['/shared-singleton']['path'],\n FileRoutesByPath['/shared-singleton']['fullPath']\n >\n}\ndeclare module './routes/viewport-test' {\n const createFileRoute: CreateFileRoute<\n '/viewport-test',\n FileRoutesByPath['/viewport-test']['parentRoute'],\n FileRoutesByPath['/viewport-test']['id'],\n FileRoutesByPath['/viewport-test']['path'],\n FileRoutesByPath['/viewport-test']['fullPath']\n >\n}\ndeclare module './routes/without-loader' {\n const createFileRoute: CreateFileRoute<\n '/without-loader',\n FileRoutesByPath['/without-loader']['parentRoute'],\n FileRoutesByPath['/without-loader']['id'],\n FileRoutesByPath['/without-loader']['path'],\n FileRoutesByPath['/without-loader']['fullPath']\n >\n}\ndeclare module './routes/_layout/_layout-2' {\n const createFileRoute: CreateFileRoute<\n '/_layout/_layout-2',\n FileRoutesByPath['/_layout/_layout-2']['parentRoute'],\n FileRoutesByPath['/_layout/_layout-2']['id'],\n FileRoutesByPath['/_layout/_layout-2']['path'],\n FileRoutesByPath['/_layout/_layout-2']['fullPath']\n >\n}\ndeclare module './routes/posts.$postId' {\n const createFileRoute: CreateFileRoute<\n '/posts/$postId',\n FileRoutesByPath['/posts/$postId']['parentRoute'],\n FileRoutesByPath['/posts/$postId']['id'],\n FileRoutesByPath['/posts/$postId']['path'],\n FileRoutesByPath['/posts/$postId']['fullPath']\n >\n}\ndeclare module './routes/posts.index' {\n const createFileRoute: CreateFileRoute<\n '/posts/',\n FileRoutesByPath['/posts/']['parentRoute'],\n FileRoutesByPath['/posts/']['id'],\n FileRoutesByPath['/posts/']['path'],\n FileRoutesByPath['/posts/']['fullPath']\n >\n}\ndeclare module './routes/_layout/_layout-2/layout-a' {\n const createFileRoute: CreateFileRoute<\n '/_layout/_layout-2/layout-a',\n FileRoutesByPath['/_layout/_layout-2/layout-a']['parentRoute'],\n FileRoutesByPath['/_layout/_layout-2/layout-a']['id'],\n FileRoutesByPath['/_layout/_layout-2/layout-a']['path'],\n FileRoutesByPath['/_layout/_layout-2/layout-a']['fullPath']\n >\n}\ndeclare module './routes/_layout/_layout-2/layout-b' {\n const createFileRoute: CreateFileRoute<\n '/_layout/_layout-2/layout-b',\n FileRoutesByPath['/_layout/_layout-2/layout-b']['parentRoute'],\n FileRoutesByPath['/_layout/_layout-2/layout-b']['id'],\n FileRoutesByPath['/_layout/_layout-2/layout-b']['path'],\n FileRoutesByPath['/_layout/_layout-2/layout-b']['fullPath']\n >\n}\n\ninterface LayoutLayout2RouteChildren {\n LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute\n LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute\n}\n\nconst LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = {\n LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute,\n LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute,\n}\n\nconst LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren(\n LayoutLayout2RouteChildren,\n)\n\ninterface LayoutRouteChildren {\n LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n LayoutLayout2Route: LayoutLayout2RouteWithChildren,\n}\n\nconst LayoutRouteWithChildren =\n LayoutRoute._addFileChildren(LayoutRouteChildren)\n\ninterface PostsRouteChildren {\n PostsPostIdRoute: typeof PostsPostIdRoute\n PostsIndexRoute: typeof PostsIndexRoute\n}\n\nconst PostsRouteChildren: PostsRouteChildren = {\n PostsPostIdRoute: PostsPostIdRoute,\n PostsIndexRoute: PostsIndexRoute,\n}\n\nconst PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n LayoutRoute: LayoutRouteWithChildren,\n PostsRoute: PostsRouteWithChildren,\n SharedSingletonRoute: SharedSingletonRoute,\n ViewportTestRoute: ViewportTestRoute,\n WithoutLoaderRoute: WithoutLoaderRoute,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/__root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n without-loader\n {' '}\n \n shared-singleton\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n
\n \n viewport-test\n \n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/_layout/_layout-2/layout-a.tsx", "content": "export const Route = createFileRoute({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/_layout/_layout-2/layout-b.tsx", "content": "export const Route = createFileRoute({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/_layout/_layout-2.tsx", "content": "import { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/_layout.tsx", "content": "import { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/index.tsx", "content": "import * as React from 'react'\n\nexport const Route = createFileRoute({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx", "content": "import * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent as any,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n codeSplitGroupings: [\n ['component'],\n ['pendingComponent', 'errorComponent', 'notFoundComponent'],\n ],\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/posts.index.tsx", "content": "import * as React from 'react'\n\nexport const Route = createFileRoute({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../posts'\n\nexport const Route = createFileRoute({\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/shared-singleton.tsx", "content": "import * as React from 'react'\n\n// All shared state lives in declarations โ€” no bare expression statements.\n// The singleton tracks how many times this module scope executes.\nconst singleton = (() => {\n const g = globalThis as any\n g.__tsrSharedSingleton ??= { initCount: 0 }\n g.__tsrSharedSingleton.initCount++\n return { initCountAtCreate: g.__tsrSharedSingleton.initCount as number }\n})()\n\nfunction getInitCount() {\n return (globalThis as any).__tsrSharedSingleton?.initCount as number\n}\n\nexport const Route = createFileRoute({\n loader: () => {\n return {\n loaderSawInitCount: getInitCount(),\n initCountAtCreateFromLoader: singleton.initCountAtCreate,\n }\n },\n component: SharedSingletonComponent,\n})\n\nfunction SharedSingletonComponent() {\n const data = Route.useLoaderData()\n\n return (\n
\n

Shared Singleton

\n
\n initCount (global):{' '}\n {getInitCount()}\n
\n
\n loaderSawInitCount:{' '}\n {data.loaderSawInitCount}\n
\n
\n initCountAtCreate (loader module):{' '}\n \n {data.initCountAtCreateFromLoader}\n \n
\n
\n initCountAtCreate (component module):{' '}\n \n {singleton.initCountAtCreate}\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/viewport-test.tsx", "content": "export const Route = createFileRoute({\n component: () =>
Hello /viewport-test!
,\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/routes/without-loader.tsx", "content": "export const Route = createFileRoute({\n component: () =>
Hello /without-loader!
,\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/tests/preload.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('hovering a link with preload=intent to a route without a loader should preload route', async ({\n page,\n}) => {\n await page.waitForLoadState('networkidle')\n\n const requestPromise = new Promise((resolve) => {\n page.on('request', (request) => {\n resolve(request.url())\n })\n })\n\n await page.getByRole('link', { name: 'without-loader' }).hover()\n const url = await requestPromise\n const expectedString =\n process.env.NODE_ENV === 'development'\n ? 'without-loader.tsx?tsr-split'\n : '/assets/without-loader'\n expect(url).toContain(expectedString)\n})\n\ntest('scrolling into viewport a link with preload=viewport to a route should preload route', async ({\n page,\n}) => {\n await page.waitForLoadState('networkidle')\n\n const [request] = await Promise.all([\n page.waitForRequest(() => true),\n page.getByRole('link', { name: 'viewport-test' }).scrollIntoViewIfNeeded(),\n ])\n\n const expectedString =\n process.env.NODE_ENV === 'development'\n ? 'viewport-test.tsx?tsr-split'\n : '/assets/viewport-test'\n expect(request.url()).toEqual(expect.stringContaining(expectedString))\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/tests/shared-bindings.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('shared module bindings should init once', async ({ page }) => {\n await page.getByTestId('shared-singleton-link').click()\n\n // If module scope is duplicated between reference + split chunk, this becomes \"2\".\n await expect(page.getByTestId('shared-init-count')).toHaveText('1')\n\n // Extra signals (useful when debugging failures)\n await expect(page.getByTestId('shared-loader-saw')).toHaveText('1')\n await expect(page.getByTestId('shared-created-at-loader')).toHaveText('1')\n await expect(page.getByTestId('shared-created-at-module')).toHaveText('1')\n})\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-file-based-code-splitting/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport tailwindcss from '@tailwindcss/vite'\n\nconst isVerboseFileRoutes = process.env.VERBOSE_FILE_ROUTES === '1' || false\nconsole.info(`Verbose file routes is set to: ${isVerboseFileRoutes}.`)\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n verboseFileRoutes: isVerboseFileRoutes,\n codeSplittingOptions: {\n splitBehavior: ({ routeId }) => {\n if (\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n routeId === undefined ||\n routeId.startsWith('$$TSR_') ||\n // @ts-expect-error\n routeId === ''\n ) {\n console.error(\n 'The routeId is empty or undefined. This should not happen.',\n )\n process.exit(1)\n }\n if (routeId === '/posts') {\n return [\n ['loader'],\n ['component'],\n ['pendingComponent', 'notFoundComponent', 'errorComponent'],\n ]\n }\n },\n },\n }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/basic-react-query/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-react-query/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/basic-react-query/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-react-query/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-react-query\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-query\": \"^5.90.0\",\n \"@tanstack/react-query-devtools\": \"^5.90.0\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/router-devtools\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-react-query/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-react-query/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n ErrorComponent,\n Link,\n Outlet,\n RouterProvider,\n createRootRouteWithContext,\n createRoute,\n createRouter,\n useRouter,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/router-devtools'\nimport { ReactQueryDevtools } from '@tanstack/react-query-devtools'\nimport {\n QueryClient,\n QueryClientProvider,\n useQueryErrorResetBoundary,\n useSuspenseQuery,\n} from '@tanstack/react-query'\nimport { NotFoundError, postQueryOptions, postsQueryOptions } from './posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\nimport './styles.css'\n\nconst rootRoute = createRootRouteWithContext<{\n queryClient: QueryClient\n}>()({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n \n \n \n )\n}\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: IndexRouteComponent,\n})\n\nfunction IndexRouteComponent() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n\nconst postsRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: 'posts',\n loader: ({ context: { queryClient } }) =>\n queryClient.ensureQueryData(postsQueryOptions),\n}).lazy(() => import('./posts.lazy').then((d) => d.Route))\n\nconst postsIndexRoute = createRoute({\n getParentRoute: () => postsRoute,\n path: '/',\n component: PostsIndexRouteComponent,\n})\n\nfunction PostsIndexRouteComponent() {\n return
Select a post.
\n}\n\nconst postRoute = createRoute({\n getParentRoute: () => postsRoute,\n path: '$postId',\n errorComponent: PostErrorComponent,\n loader: ({ context: { queryClient }, params: { postId } }) =>\n queryClient.ensureQueryData(postQueryOptions(postId)),\n component: PostRouteComponent,\n})\n\nfunction PostErrorComponent({ error, reset }: ErrorComponentProps) {\n const router = useRouter()\n if (error instanceof NotFoundError) {\n return
{error.message}
\n }\n const queryErrorResetBoundary = useQueryErrorResetBoundary()\n\n React.useEffect(() => {\n queryErrorResetBoundary.reset()\n }, [queryErrorResetBoundary])\n\n return (\n
\n {\n router.invalidate()\n }}\n >\n retry\n \n \n
\n )\n}\n\nfunction PostRouteComponent() {\n const { postId } = postRoute.useParams()\n const postQuery = useSuspenseQuery(postQueryOptions(postId))\n const post = postQuery.data\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n\nconst layoutRoute = createRoute({\n getParentRoute: () => rootRoute,\n id: '_layout',\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n\nconst layout2Route = createRoute({\n getParentRoute: () => layoutRoute,\n id: '_layout-2',\n component: Layout2Component,\n})\n\nfunction Layout2Component() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n\nconst layoutARoute = createRoute({\n getParentRoute: () => layout2Route,\n path: '/layout-a',\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n\nconst layoutBRoute = createRoute({\n getParentRoute: () => layout2Route,\n path: '/layout-b',\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n\nconst routeTree = rootRoute.addChildren([\n postsRoute.addChildren([postRoute, postsIndexRoute]),\n layoutRoute.addChildren([\n layout2Route.addChildren([layoutARoute, layoutBRoute]),\n ]),\n indexRoute,\n])\n\nconst queryClient = new QueryClient()\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n scrollRestoration: true,\n defaultPreload: 'intent',\n // Since we're using React Query, we don't want loader calls to ever be stale\n // This will ensure that the loader is always called when the route is preloaded or visited\n defaultPreloadStaleTime: 0,\n context: {\n queryClient,\n },\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query/src/posts.lazy.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createLazyRoute } from '@tanstack/react-router'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { postsQueryOptions } from './posts'\n\nexport const Route = createLazyRoute('/posts')({\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const postsQuery = useSuspenseQuery(postsQueryOptions)\n\n const posts = postsQuery.data\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query/src/posts.ts", "content": "import axios from 'redaxios'\nimport { queryOptions } from '@tanstack/react-query'\n\nexport class NotFoundError extends Error {}\n\ntype PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nconst fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n\nconst fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!post) {\n throw new NotFoundError(`Post with id \"${postId}\" not found!`)\n }\n\n return post\n}\n\nexport const postQueryOptions = (postId: string) =>\n queryOptions({\n queryKey: ['posts', { postId }],\n queryFn: () => fetchPost(postId),\n })\n\nexport const postsQueryOptions = queryOptions({\n queryKey: ['posts'],\n queryFn: () => fetchPosts(),\n})\n" }, { "path": "e2e/react-router/basic-react-query/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-react-query/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/basic-react-query/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-react-query/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-react-query/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-react-query/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [tailwindcss(), react()],\n})\n" }, { "path": "e2e/react-router/basic-react-query-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/basic-react-query-file-based/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-react-query-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-react-query-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-query\": \"^5.90.0\",\n \"@tanstack/react-query-devtools\": \"^5.90.0\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\nconst queryClient = new QueryClient()\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n context: {\n queryClient,\n },\n scrollRestoration: true,\n defaultPreload: 'intent',\n // Since we're using React Query, we don't want loader calls to ever be stale\n // This will ensure that the loader is always called when the route is preloaded or visited\n defaultPreloadStaleTime: 0,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/postQueryOptions.tsx", "content": "import { queryOptions } from '@tanstack/react-query'\nimport { fetchPost } from './posts'\n\nexport const postQueryOptions = (postId: string) =>\n queryOptions({\n queryKey: ['posts', { postId }],\n queryFn: () => fetchPost(postId),\n })\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/posts.tsx", "content": "import axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nexport class PostNotFoundError extends Error {}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw new PostNotFoundError(`Post with id \"${postId}\" not found!`)\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/postsQueryOptions.tsx", "content": "import { queryOptions } from '@tanstack/react-query'\nimport { fetchPosts } from './posts'\n\nexport const postsQueryOptions = queryOptions({\n queryKey: ['posts'],\n queryFn: () => fetchPosts(),\n})\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as PostsRouteImport } from './routes/posts'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as IndexRouteImport } from './routes/index'\nimport { Route as PostsIndexRouteImport } from './routes/posts.index'\nimport { Route as PostsPostIdRouteImport } from './routes/posts.$postId'\nimport { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'\nimport { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b'\nimport { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a'\n\nconst PostsRoute = PostsRouteImport.update({\n id: '/posts',\n path: '/posts',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutRoute = LayoutRouteImport.update({\n id: '/_layout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsIndexRoute = PostsIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => PostsRoute,\n} as any)\nconst PostsPostIdRoute = PostsPostIdRouteImport.update({\n id: '/$postId',\n path: '/$postId',\n getParentRoute: () => PostsRoute,\n} as any)\nconst LayoutLayout2Route = LayoutLayout2RouteImport.update({\n id: '/_layout-2',\n getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBRouteImport.update({\n id: '/layout-b',\n path: '/layout-b',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\nconst LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({\n id: '/layout-a',\n path: '/layout-a',\n getParentRoute: () => LayoutLayout2Route,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/posts': typeof PostsRouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts': typeof PostsIndexRoute\n '/layout-a': typeof LayoutLayout2LayoutARoute\n '/layout-b': typeof LayoutLayout2LayoutBRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/_layout': typeof LayoutRouteWithChildren\n '/posts': typeof PostsRouteWithChildren\n '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute\n '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | '/posts'\n | '/posts/$postId'\n | '/posts/'\n | '/layout-a'\n | '/layout-b'\n fileRoutesByTo: FileRoutesByTo\n to: '/' | '/posts/$postId' | '/posts' | '/layout-a' | '/layout-b'\n id:\n | '__root__'\n | '/'\n | '/_layout'\n | '/posts'\n | '/_layout/_layout-2'\n | '/posts/$postId'\n | '/posts/'\n | '/_layout/_layout-2/layout-a'\n | '/_layout/_layout-2/layout-b'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n LayoutRoute: typeof LayoutRouteWithChildren\n PostsRoute: typeof PostsRouteWithChildren\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/posts': {\n id: '/posts'\n path: '/posts'\n fullPath: '/posts'\n preLoaderRoute: typeof PostsRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/_layout': {\n id: '/_layout'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof LayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts/': {\n id: '/posts/'\n path: '/'\n fullPath: '/posts/'\n preLoaderRoute: typeof PostsIndexRouteImport\n parentRoute: typeof PostsRoute\n }\n '/posts/$postId': {\n id: '/posts/$postId'\n path: '/$postId'\n fullPath: '/posts/$postId'\n preLoaderRoute: typeof PostsPostIdRouteImport\n parentRoute: typeof PostsRoute\n }\n '/_layout/_layout-2': {\n id: '/_layout/_layout-2'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof LayoutLayout2RouteImport\n parentRoute: typeof LayoutRoute\n }\n '/_layout/_layout-2/layout-b': {\n id: '/_layout/_layout-2/layout-b'\n path: '/layout-b'\n fullPath: '/layout-b'\n preLoaderRoute: typeof LayoutLayout2LayoutBRouteImport\n parentRoute: typeof LayoutLayout2Route\n }\n '/_layout/_layout-2/layout-a': {\n id: '/_layout/_layout-2/layout-a'\n path: '/layout-a'\n fullPath: '/layout-a'\n preLoaderRoute: typeof LayoutLayout2LayoutARouteImport\n parentRoute: typeof LayoutLayout2Route\n }\n }\n}\n\ninterface LayoutLayout2RouteChildren {\n LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute\n LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute\n}\n\nconst LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = {\n LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute,\n LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute,\n}\n\nconst LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren(\n LayoutLayout2RouteChildren,\n)\n\ninterface LayoutRouteChildren {\n LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n LayoutLayout2Route: LayoutLayout2RouteWithChildren,\n}\n\nconst LayoutRouteWithChildren =\n LayoutRoute._addFileChildren(LayoutRouteChildren)\n\ninterface PostsRouteChildren {\n PostsPostIdRoute: typeof PostsPostIdRoute\n PostsIndexRoute: typeof PostsIndexRoute\n}\n\nconst PostsRouteChildren: PostsRouteChildren = {\n PostsPostIdRoute: PostsPostIdRoute,\n PostsIndexRoute: PostsIndexRoute,\n}\n\nconst PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n LayoutRoute: LayoutRouteWithChildren,\n PostsRoute: PostsRouteWithChildren,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/__root.tsx", "content": "import * as React from 'react'\nimport {\n Link,\n Outlet,\n createRootRouteWithContext,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport { ReactQueryDevtools } from '@tanstack/react-query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport const Route = createRootRouteWithContext<{\n queryClient: QueryClient\n}>()({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n \n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/_layout/_layout-2/layout-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_layout/_layout-2/layout-a')({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/_layout/_layout-2/layout-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_layout/_layout-2/layout-b')({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/_layout/_layout-2.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout/_layout-2')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/_layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/posts.$postId.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { ErrorComponent, useRouter } from '@tanstack/react-router'\nimport {\n useQueryErrorResetBoundary,\n useSuspenseQuery,\n} from '@tanstack/react-query'\nimport { PostNotFoundError } from '../posts'\nimport { postQueryOptions } from '../postQueryOptions'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: ({ context: { queryClient }, params: { postId } }) => {\n return queryClient.ensureQueryData(postQueryOptions(postId))\n },\n errorComponent: PostErrorComponent,\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n const router = useRouter()\n if (error instanceof PostNotFoundError) {\n return
{error.message}
\n }\n const queryErrorResetBoundary = useQueryErrorResetBoundary()\n\n React.useEffect(() => {\n queryErrorResetBoundary.reset()\n }, [queryErrorResetBoundary])\n\n return (\n
\n {\n router.invalidate()\n }}\n >\n retry\n \n \n
\n )\n}\n\nfunction PostComponent() {\n const postId = Route.useParams().postId\n const { data: post } = useSuspenseQuery(postQueryOptions(postId))\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/posts.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/routes/posts.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { postsQueryOptions } from '../postsQueryOptions'\n\nexport const Route = createFileRoute('/posts')({\n loader: ({ context: { queryClient } }) =>\n queryClient.ensureQueryData(postsQueryOptions),\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const postsQuery = useSuspenseQuery(postsQueryOptions)\n const posts = postsQuery.data\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\nimport { getDummyServerPort } from '@tanstack/router-e2e-utils'\nimport packageJson from '../package.json' with { type: 'json' }\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('GetPosts', async () => {\n const port = await getDummyServerPort(packageJson.name)\n const res = await fetch(`http://localhost:${port}/posts`)\n\n expect(res.status).toBe(200)\n\n const posts = await res.json()\n\n expect(posts.length).toBeGreaterThan(0)\n\n const postRes = await fetch(`http://localhost:${port}/posts/1`)\n expect(postRes.status).toBe(200)\n const post = await postRes.json()\n expect(post).toEqual(posts[0])\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/basic-react-query-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-react-query-file-based/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n tanstackRouter({ target: 'react', autoCodeSplitting: true }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/basic-scroll-restoration/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-scroll-restoration/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/" }, { "path": "e2e/react-router/basic-scroll-restoration/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-scroll-restoration/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-scroll-restoration\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/react-virtual\": \"^3.13.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-scroll-restoration/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport { getTestServerPort } from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-scroll-restoration/src/main.tsx", "content": "import React, { useLayoutEffect } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n Link,\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n useElementScrollRestoration,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport './styles.css'\n\nconst rootRoute = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n About\n \n \n About (No Reset)\n \n \n By-Element\n \n
\n \n \n \n )\n}\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n loader: () => new Promise((r) => setTimeout(r, 500)),\n component: IndexComponent,\n})\n\nfunction IndexComponent() {\n useLayoutEffect(() => {\n window.invokeOrders.push('index-useLayoutEffect')\n }, [])\n\n return (\n
\n

\n Welcome Home!\n

\n
\n
\n {Array.from({ length: 50 }).map((_, i) => (\n \n Home Item {i + 1}\n
\n ))}\n
\n
\n )\n}\n\nconst aboutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/about',\n loader: () => new Promise((r) => setTimeout(r, 500)),\n component: AboutComponent,\n})\n\nfunction AboutComponent() {\n useLayoutEffect(() => {\n window.invokeOrders.push('about-useLayoutEffect')\n }, [])\n return (\n
\n

Hello from About!

\n
\n {Array.from({ length: 50 }).map((_, i) => (\n \n About Item {i + 1}\n
\n ))}\n
\n
\n )\n}\n\nconst byElementRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/by-element',\n loader: () => new Promise((r) => setTimeout(r, 500)),\n component: ByElementComponent,\n})\n\nfunction ByElementComponent() {\n // We need a unique ID for manual scroll restoration on a specific element\n // It should be as unique as possible for this element across your app\n const scrollRestorationId = 'myVirtualizedContent'\n\n // We use that ID to get the scroll entry for this element\n const scrollEntry = useElementScrollRestoration({\n id: scrollRestorationId,\n })\n\n // Let's use TanStack Virtual to virtualize some content!\n const virtualizerParentRef = React.useRef(null)\n const virtualizer = useVirtualizer({\n count: 10000,\n getScrollElement: () => virtualizerParentRef.current,\n estimateSize: () => 100,\n // We pass the scrollY from the scroll restoration entry to the virtualizer\n // as the initial offset\n initialOffset: scrollEntry?.scrollY,\n })\n\n return (\n
\n
Hello from By-Element!
\n
\n \n
\n First Regular List Item\n
\n
\n {Array.from({ length: 50 }).map((_, i) => (\n \n Regular List Item {i + 1}\n
\n ))}\n
\n
\n {Array.from({ length: 2 }).map((_, i) => (\n
\n
\n {Array.from({ length: 50 }).map((_, i) => (\n \n About Item {i + 1}\n
\n ))}\n
\n
\n ))}\n
\n
Virtualized
\n \n \n {virtualizer.getVirtualItems().map((item) => (\n \n
\n Virtualized Item {item.index + 1}\n
\n
\n ))}\n
\n
\n
\n \n \n \n )\n}\n\nconst fooRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/foo',\n loader: () => new Promise((r) => setTimeout(r, 500)),\n component: FooComponent,\n})\n\nfunction FooComponent() {\n return (\n
\n

Hello from Foo!

\n \n Go to Bar\n \n
\n {Array.from({ length: 50 }).map((_, i) => (\n \n Foo Item {i + 1}\n
\n ))}\n
\n \n )\n}\n\nconst barRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/bar',\n loader: () => new Promise((r) => setTimeout(r, 500)),\n component: BarComponent,\n})\n\nfunction BarComponent() {\n return (\n
\n

Hello from Bar!

\n
\n {Array.from({ length: 50 }).map((_, i) => (\n \n Bar Item {i + 1}\n
\n ))}\n
\n \n )\n}\n\nconst routeTree = rootRoute.addChildren([\n indexRoute,\n aboutRoute,\n byElementRoute,\n fooRoute,\n barRoute,\n])\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n getScrollRestorationKey: (location) => location.pathname,\n})\n\ndeclare global {\n interface Window {\n invokeOrders: Array\n }\n}\nwindow.invokeOrders = []\nrouter.subscribe('onBeforeRouteMount', (event) => {\n window.invokeOrders.push(event.type)\n})\n\nrouter.subscribe('onResolved', (event) => {\n window.invokeOrders.push(event.type)\n})\n\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basic-scroll-restoration/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-scroll-restoration/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest('restore scroll positions by page, home pages top message should not display on navigating back', async ({\n page,\n}) => {\n // Step 1: Navigate to the home page\n await page.goto('/')\n await page.waitForURL('/')\n\n await expect(page.locator('#greeting')).toContainText('Welcome Home!')\n await expect(page.locator('#top-message')).toBeInViewport()\n\n // Step 2: Scroll to a position that hides the top\n const targetScrollPosition = 1000\n await page.evaluate(\n (scrollPos: number) => window.scrollTo(0, scrollPos),\n targetScrollPosition,\n )\n\n // Verify initial scroll position\n const scrollPosition = await page.evaluate(() => window.scrollY)\n expect(scrollPosition).toBe(targetScrollPosition)\n\n await expect(page.locator('#top-message')).not.toBeInViewport()\n await page.waitForTimeout(1000)\n\n // Step 3: Navigate to the about page\n await page.getByRole('link', { name: 'About', exact: true }).click()\n await expect(page.locator('#greeting')).toContainText('Hello from About!')\n\n // Step 4: Go back to the home page and immediately check the message\n await page.goBack()\n\n // Wait for the home page to have rendered\n await page.waitForSelector('#greeting')\n await page.waitForTimeout(1000)\n await expect(page.locator('#top-message')).not.toBeInViewport()\n\n // Confirm the scroll position was restored correctly\n const restoredScrollPosition = await page.evaluate(() => window.scrollY)\n expect(restoredScrollPosition).toBe(targetScrollPosition)\n})\n\ntest('restore scroll positions by element, first regular list item should not display on navigating back', async ({\n page,\n}) => {\n // Step 1: Navigate to the by-element page\n await page.goto('/by-element')\n await page.waitForURL('/by-element')\n\n // Step 2: Scroll to a position that hides the first list item in regular list\n const targetScrollPosition = 1000\n await page.waitForSelector('#RegularList')\n await expect(page.locator('#first-regular-list-item')).toBeInViewport()\n\n await page.evaluate(\n (scrollPos: number) =>\n document.querySelector('#RegularList')!.scrollTo(0, scrollPos),\n targetScrollPosition,\n )\n\n // Verify initial scroll position\n const scrollPosition = await page.evaluate(\n () => document.querySelector('#RegularList')!.scrollTop,\n )\n expect(scrollPosition).toBe(targetScrollPosition)\n\n await expect(page.locator('#first-regular-list-item')).not.toBeInViewport()\n\n // Step 3: Navigate to the about page\n await page.getByRole('link', { name: 'About', exact: true }).click()\n await expect(page.locator('#greeting')).toContainText('Hello from About!')\n\n // Step 4: Go back to the by-element page and immediately check the message\n await page.goBack()\n\n // TODO: For some reason, this only works in headed mode.\n // When someone can explain that to me, I'll fix this test.\n\n // Confirm the scroll position was restored correctly\n // const restoredScrollPosition = await page.evaluate(\n // () => document.querySelector('#RegularList')!.scrollTop,\n // )\n // expect(restoredScrollPosition).toBe(targetScrollPosition)\n})\n\ntest('scroll to top when not scrolled, regression test for #4782', async ({\n page,\n}) => {\n await page.goto('/foo')\n await page.waitForURL('/foo')\n\n await expect(page.getByTestId('foo-route-component')).toBeVisible()\n\n let scrollPosition = await page.evaluate(() => window.scrollY)\n expect(scrollPosition).toBe(0)\n\n // do not scroll, just navigate to /bar\n await page.getByTestId('go-to-bar-link').click()\n await expect(page.getByTestId('bar-route-component')).toBeVisible()\n\n const targetScrollPosition = 1000\n await page.evaluate(\n (scrollPos: number) => window.scrollTo(0, scrollPos),\n targetScrollPosition,\n )\n scrollPosition = await page.evaluate(() => window.scrollY)\n expect(scrollPosition).toBe(targetScrollPosition)\n\n // navigate back to /foo\n await page.goBack()\n await expect(page.getByTestId('foo-route-component')).toBeVisible()\n\n // check if scroll position is restored to 0 since we did not scroll on /foo\n const restoredScrollPosition = await page.evaluate(() => window.scrollY)\n expect(restoredScrollPosition).toBe(0)\n})\n" }, { "path": "e2e/react-router/basic-scroll-restoration/tests/router-events.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest('after a navigation, should have emitted \"onBeforeRouteMount\",\"onResolved\" and useLayoutEffect setup in the correct order', async ({\n page,\n}) => {\n // Navigate to the Home page\n await page.goto('/')\n await expect(page.locator('#greeting')).toContainText('Welcome Home!')\n\n let orders = await page.evaluate(() => window.invokeOrders)\n\n expectItemOrder(orders, 'onBeforeRouteMount', 'onResolved')\n expectItemOrder(orders, 'onBeforeRouteMount', 'index-useLayoutEffect')\n\n // Clear the invokeOrders array\n orders = await page.evaluate(() => {\n window.invokeOrders = []\n return window.invokeOrders\n })\n\n // Navigate to the About page\n await page.getByRole('link', { name: 'About', exact: true }).click()\n await expect(page.locator('#greeting')).toContainText('Hello from About!')\n\n orders = await page.evaluate(() => window.invokeOrders)\n\n expectItemOrder(orders, 'onBeforeRouteMount', 'onResolved')\n expectItemOrder(orders, 'onBeforeRouteMount', 'about-useLayoutEffect')\n})\n\nfunction expectItemOrder(\n array: Array,\n firstItem: TItem,\n secondItem: TItem,\n) {\n const firstIndex = array.findIndex((item) => item === firstItem)\n const secondIndex = array.findIndex((item) => item === secondItem)\n\n if (firstIndex === -1 || secondIndex === -1) {\n throw new Error('One or both items were not found in the array ' + array)\n }\n\n expect(firstIndex).toBeLessThan(secondIndex)\n}\n" }, { "path": "e2e/react-router/basic-scroll-restoration/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-scroll-restoration/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [tailwindcss(), react()],\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/basic-virtual-file-based/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-virtual-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-virtual-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@tanstack/virtual-file-routes\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/routes.ts", "content": "import {\n index,\n layout,\n physical,\n rootRoute,\n route,\n} from '@tanstack/virtual-file-routes'\n\nexport const routes = rootRoute('root.tsx', [\n index('home.tsx'),\n route('/posts', 'posts/posts.tsx', [\n index('posts/posts-home.tsx'),\n route('$postId', 'posts/posts-detail.tsx'),\n ]),\n layout('first', 'layout/first-layout.tsx', [\n layout('second', 'layout/second-layout.tsx', [\n route('/layout-a', 'a.tsx'),\n route('/layout-b', 'b.tsx'),\n ]),\n ]),\n physical('/classic', 'file-based-subtree'),\n])\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n await new Promise((r) => setTimeout(r, 500))\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n await new Promise((r) => setTimeout(r, 500))\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport type { CreateFileRoute, FileRoutesByPath } from '@tanstack/react-router'\n\nimport { Route as rootRouteImport } from './routes/root'\nimport { Route as postsPostsRouteImport } from './routes/posts/posts'\nimport { Route as layoutFirstLayoutRouteImport } from './routes/layout/first-layout'\nimport { Route as homeRouteImport } from './routes/home'\nimport { Route as postsPostsDetailRouteImport } from './routes/posts/posts-detail'\nimport { Route as layoutSecondLayoutRouteImport } from './routes/layout/second-layout'\nimport { Route as postsPostsHomeRouteImport } from './routes/posts/posts-home'\nimport { Route as ClassicHelloRouteRouteImport } from './routes/file-based-subtree/hello/route'\nimport { Route as ClassicHelloIndexRouteImport } from './routes/file-based-subtree/hello/index'\nimport { Route as ClassicHelloWorldRouteImport } from './routes/file-based-subtree/hello/world'\nimport { Route as ClassicHelloUniverseRouteImport } from './routes/file-based-subtree/hello/universe'\nimport { Route as bRouteImport } from './routes/b'\nimport { Route as aRouteImport } from './routes/a'\n\nconst postsPostsRoute = postsPostsRouteImport.update({\n id: '/posts',\n path: '/posts',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst layoutFirstLayoutRoute = layoutFirstLayoutRouteImport.update({\n id: '/_first',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst homeRoute = homeRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst postsPostsDetailRoute = postsPostsDetailRouteImport.update({\n id: '/$postId',\n path: '/$postId',\n getParentRoute: () => postsPostsRoute,\n} as any)\nconst layoutSecondLayoutRoute = layoutSecondLayoutRouteImport.update({\n id: '/_second',\n getParentRoute: () => layoutFirstLayoutRoute,\n} as any)\nconst postsPostsHomeRoute = postsPostsHomeRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => postsPostsRoute,\n} as any)\nconst ClassicHelloRouteRoute = ClassicHelloRouteRouteImport.update({\n id: '/classic/hello',\n path: '/classic/hello',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst ClassicHelloIndexRoute = ClassicHelloIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => ClassicHelloRouteRoute,\n} as any)\nconst ClassicHelloWorldRoute = ClassicHelloWorldRouteImport.update({\n id: '/world',\n path: '/world',\n getParentRoute: () => ClassicHelloRouteRoute,\n} as any)\nconst ClassicHelloUniverseRoute = ClassicHelloUniverseRouteImport.update({\n id: '/universe',\n path: '/universe',\n getParentRoute: () => ClassicHelloRouteRoute,\n} as any)\nconst bRoute = bRouteImport.update({\n id: '/layout-b',\n path: '/layout-b',\n getParentRoute: () => layoutSecondLayoutRoute,\n} as any)\nconst aRoute = aRouteImport.update({\n id: '/layout-a',\n path: '/layout-a',\n getParentRoute: () => layoutSecondLayoutRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof homeRoute\n '/posts': typeof postsPostsRouteWithChildren\n '/classic/hello': typeof ClassicHelloRouteRouteWithChildren\n '/posts/': typeof postsPostsHomeRoute\n '/posts/$postId': typeof postsPostsDetailRoute\n '/layout-a': typeof aRoute\n '/layout-b': typeof bRoute\n '/classic/hello/universe': typeof ClassicHelloUniverseRoute\n '/classic/hello/world': typeof ClassicHelloWorldRoute\n '/classic/hello/': typeof ClassicHelloIndexRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof homeRoute\n '/posts': typeof postsPostsHomeRoute\n '/posts/$postId': typeof postsPostsDetailRoute\n '/layout-a': typeof aRoute\n '/layout-b': typeof bRoute\n '/classic/hello/universe': typeof ClassicHelloUniverseRoute\n '/classic/hello/world': typeof ClassicHelloWorldRoute\n '/classic/hello': typeof ClassicHelloIndexRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof homeRoute\n '/_first': typeof layoutFirstLayoutRouteWithChildren\n '/posts': typeof postsPostsRouteWithChildren\n '/classic/hello': typeof ClassicHelloRouteRouteWithChildren\n '/posts/': typeof postsPostsHomeRoute\n '/_first/_second': typeof layoutSecondLayoutRouteWithChildren\n '/posts/$postId': typeof postsPostsDetailRoute\n '/_first/_second/layout-a': typeof aRoute\n '/_first/_second/layout-b': typeof bRoute\n '/classic/hello/universe': typeof ClassicHelloUniverseRoute\n '/classic/hello/world': typeof ClassicHelloWorldRoute\n '/classic/hello/': typeof ClassicHelloIndexRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | '/posts'\n | '/classic/hello'\n | '/posts/'\n | '/posts/$postId'\n | '/layout-a'\n | '/layout-b'\n | '/classic/hello/universe'\n | '/classic/hello/world'\n | '/classic/hello/'\n fileRoutesByTo: FileRoutesByTo\n to:\n | '/'\n | '/posts'\n | '/posts/$postId'\n | '/layout-a'\n | '/layout-b'\n | '/classic/hello/universe'\n | '/classic/hello/world'\n | '/classic/hello'\n id:\n | '__root__'\n | '/'\n | '/_first'\n | '/posts'\n | '/classic/hello'\n | '/posts/'\n | '/_first/_second'\n | '/posts/$postId'\n | '/_first/_second/layout-a'\n | '/_first/_second/layout-b'\n | '/classic/hello/universe'\n | '/classic/hello/world'\n | '/classic/hello/'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n homeRoute: typeof homeRoute\n layoutFirstLayoutRoute: typeof layoutFirstLayoutRouteWithChildren\n postsPostsRoute: typeof postsPostsRouteWithChildren\n ClassicHelloRouteRoute: typeof ClassicHelloRouteRouteWithChildren\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/posts': {\n id: '/posts'\n path: '/posts'\n fullPath: '/posts'\n preLoaderRoute: typeof postsPostsRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/_first': {\n id: '/_first'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof layoutFirstLayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof homeRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts/$postId': {\n id: '/posts/$postId'\n path: '/$postId'\n fullPath: '/posts/$postId'\n preLoaderRoute: typeof postsPostsDetailRouteImport\n parentRoute: typeof postsPostsRoute\n }\n '/_first/_second': {\n id: '/_first/_second'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof layoutSecondLayoutRouteImport\n parentRoute: typeof layoutFirstLayoutRoute\n }\n '/posts/': {\n id: '/posts/'\n path: '/'\n fullPath: '/posts/'\n preLoaderRoute: typeof postsPostsHomeRouteImport\n parentRoute: typeof postsPostsRoute\n }\n '/classic/hello': {\n id: '/classic/hello'\n path: '/classic/hello'\n fullPath: '/classic/hello'\n preLoaderRoute: typeof ClassicHelloRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/classic/hello/': {\n id: '/classic/hello/'\n path: '/'\n fullPath: '/classic/hello/'\n preLoaderRoute: typeof ClassicHelloIndexRouteImport\n parentRoute: typeof ClassicHelloRouteRoute\n }\n '/classic/hello/world': {\n id: '/classic/hello/world'\n path: '/world'\n fullPath: '/classic/hello/world'\n preLoaderRoute: typeof ClassicHelloWorldRouteImport\n parentRoute: typeof ClassicHelloRouteRoute\n }\n '/classic/hello/universe': {\n id: '/classic/hello/universe'\n path: '/universe'\n fullPath: '/classic/hello/universe'\n preLoaderRoute: typeof ClassicHelloUniverseRouteImport\n parentRoute: typeof ClassicHelloRouteRoute\n }\n '/_first/_second/layout-b': {\n id: '/_first/_second/layout-b'\n path: '/layout-b'\n fullPath: '/layout-b'\n preLoaderRoute: typeof bRouteImport\n parentRoute: typeof layoutSecondLayoutRoute\n }\n '/_first/_second/layout-a': {\n id: '/_first/_second/layout-a'\n path: '/layout-a'\n fullPath: '/layout-a'\n preLoaderRoute: typeof aRouteImport\n parentRoute: typeof layoutSecondLayoutRoute\n }\n }\n}\n\ndeclare module './routes/home' {\n const createFileRoute: CreateFileRoute<\n '/',\n FileRoutesByPath['/']['parentRoute'],\n FileRoutesByPath['/']['id'],\n FileRoutesByPath['/']['path'],\n FileRoutesByPath['/']['fullPath']\n >\n}\ndeclare module './routes/layout/first-layout' {\n const createFileRoute: CreateFileRoute<\n '/_first',\n FileRoutesByPath['/_first']['parentRoute'],\n FileRoutesByPath['/_first']['id'],\n FileRoutesByPath['/_first']['path'],\n FileRoutesByPath['/_first']['fullPath']\n >\n}\ndeclare module './routes/posts/posts' {\n const createFileRoute: CreateFileRoute<\n '/posts',\n FileRoutesByPath['/posts']['parentRoute'],\n FileRoutesByPath['/posts']['id'],\n FileRoutesByPath['/posts']['path'],\n FileRoutesByPath['/posts']['fullPath']\n >\n}\ndeclare module './routes/file-based-subtree/hello/route' {\n const createFileRoute: CreateFileRoute<\n '/classic/hello',\n FileRoutesByPath['/classic/hello']['parentRoute'],\n FileRoutesByPath['/classic/hello']['id'],\n FileRoutesByPath['/classic/hello']['path'],\n FileRoutesByPath['/classic/hello']['fullPath']\n >\n}\ndeclare module './routes/posts/posts-home' {\n const createFileRoute: CreateFileRoute<\n '/posts/',\n FileRoutesByPath['/posts/']['parentRoute'],\n FileRoutesByPath['/posts/']['id'],\n FileRoutesByPath['/posts/']['path'],\n FileRoutesByPath['/posts/']['fullPath']\n >\n}\ndeclare module './routes/layout/second-layout' {\n const createFileRoute: CreateFileRoute<\n '/_first/_second',\n FileRoutesByPath['/_first/_second']['parentRoute'],\n FileRoutesByPath['/_first/_second']['id'],\n FileRoutesByPath['/_first/_second']['path'],\n FileRoutesByPath['/_first/_second']['fullPath']\n >\n}\ndeclare module './routes/posts/posts-detail' {\n const createFileRoute: CreateFileRoute<\n '/posts/$postId',\n FileRoutesByPath['/posts/$postId']['parentRoute'],\n FileRoutesByPath['/posts/$postId']['id'],\n FileRoutesByPath['/posts/$postId']['path'],\n FileRoutesByPath['/posts/$postId']['fullPath']\n >\n}\ndeclare module './routes/a' {\n const createFileRoute: CreateFileRoute<\n '/_first/_second/layout-a',\n FileRoutesByPath['/_first/_second/layout-a']['parentRoute'],\n FileRoutesByPath['/_first/_second/layout-a']['id'],\n FileRoutesByPath['/_first/_second/layout-a']['path'],\n FileRoutesByPath['/_first/_second/layout-a']['fullPath']\n >\n}\ndeclare module './routes/b' {\n const createFileRoute: CreateFileRoute<\n '/_first/_second/layout-b',\n FileRoutesByPath['/_first/_second/layout-b']['parentRoute'],\n FileRoutesByPath['/_first/_second/layout-b']['id'],\n FileRoutesByPath['/_first/_second/layout-b']['path'],\n FileRoutesByPath['/_first/_second/layout-b']['fullPath']\n >\n}\ndeclare module './routes/file-based-subtree/hello/universe' {\n const createFileRoute: CreateFileRoute<\n '/classic/hello/universe',\n FileRoutesByPath['/classic/hello/universe']['parentRoute'],\n FileRoutesByPath['/classic/hello/universe']['id'],\n FileRoutesByPath['/classic/hello/universe']['path'],\n FileRoutesByPath['/classic/hello/universe']['fullPath']\n >\n}\ndeclare module './routes/file-based-subtree/hello/world' {\n const createFileRoute: CreateFileRoute<\n '/classic/hello/world',\n FileRoutesByPath['/classic/hello/world']['parentRoute'],\n FileRoutesByPath['/classic/hello/world']['id'],\n FileRoutesByPath['/classic/hello/world']['path'],\n FileRoutesByPath['/classic/hello/world']['fullPath']\n >\n}\ndeclare module './routes/file-based-subtree/hello/index' {\n const createFileRoute: CreateFileRoute<\n '/classic/hello/',\n FileRoutesByPath['/classic/hello/']['parentRoute'],\n FileRoutesByPath['/classic/hello/']['id'],\n FileRoutesByPath['/classic/hello/']['path'],\n FileRoutesByPath['/classic/hello/']['fullPath']\n >\n}\n\ninterface layoutSecondLayoutRouteChildren {\n aRoute: typeof aRoute\n bRoute: typeof bRoute\n}\n\nconst layoutSecondLayoutRouteChildren: layoutSecondLayoutRouteChildren = {\n aRoute: aRoute,\n bRoute: bRoute,\n}\n\nconst layoutSecondLayoutRouteWithChildren =\n layoutSecondLayoutRoute._addFileChildren(layoutSecondLayoutRouteChildren)\n\ninterface layoutFirstLayoutRouteChildren {\n layoutSecondLayoutRoute: typeof layoutSecondLayoutRouteWithChildren\n}\n\nconst layoutFirstLayoutRouteChildren: layoutFirstLayoutRouteChildren = {\n layoutSecondLayoutRoute: layoutSecondLayoutRouteWithChildren,\n}\n\nconst layoutFirstLayoutRouteWithChildren =\n layoutFirstLayoutRoute._addFileChildren(layoutFirstLayoutRouteChildren)\n\ninterface postsPostsRouteChildren {\n postsPostsHomeRoute: typeof postsPostsHomeRoute\n postsPostsDetailRoute: typeof postsPostsDetailRoute\n}\n\nconst postsPostsRouteChildren: postsPostsRouteChildren = {\n postsPostsHomeRoute: postsPostsHomeRoute,\n postsPostsDetailRoute: postsPostsDetailRoute,\n}\n\nconst postsPostsRouteWithChildren = postsPostsRoute._addFileChildren(\n postsPostsRouteChildren,\n)\n\ninterface ClassicHelloRouteRouteChildren {\n ClassicHelloUniverseRoute: typeof ClassicHelloUniverseRoute\n ClassicHelloWorldRoute: typeof ClassicHelloWorldRoute\n ClassicHelloIndexRoute: typeof ClassicHelloIndexRoute\n}\n\nconst ClassicHelloRouteRouteChildren: ClassicHelloRouteRouteChildren = {\n ClassicHelloUniverseRoute: ClassicHelloUniverseRoute,\n ClassicHelloWorldRoute: ClassicHelloWorldRoute,\n ClassicHelloIndexRoute: ClassicHelloIndexRoute,\n}\n\nconst ClassicHelloRouteRouteWithChildren =\n ClassicHelloRouteRoute._addFileChildren(ClassicHelloRouteRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n homeRoute: homeRoute,\n layoutFirstLayoutRoute: layoutFirstLayoutRouteWithChildren,\n postsPostsRoute: postsPostsRouteWithChildren,\n ClassicHelloRouteRoute: ClassicHelloRouteRouteWithChildren,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/a.tsx", "content": "export const Route = createFileRoute({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/b.tsx", "content": "export const Route = createFileRoute({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/index.tsx", "content": "export const Route = createFileRoute({\n component: () =>
This is the index
,\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/route.tsx", "content": "import { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: () => (\n
\n Hello!\n
{' '}\n \n say hello to the universe\n {' '}\n \n say hello to the world\n \n \n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/universe.tsx", "content": "export const Route = createFileRoute({\n component: () =>
Hello /classic/hello/universe!
,\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/world.tsx", "content": "export const Route = createFileRoute({\n component: () =>
Hello /classic/hello/world!
,\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/home.tsx", "content": "import * as React from 'react'\n\nexport const Route = createFileRoute({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/layout/first-layout.tsx", "content": "import { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/layout/second-layout.tsx", "content": "import { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/posts/posts-detail.tsx", "content": "import * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent as any,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/posts/posts-home.tsx", "content": "import * as React from 'react'\n\nexport const Route = createFileRoute({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/posts/posts.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../../posts'\n\nexport const Route = createFileRoute({\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/routes/root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n Subtree\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/basic-virtual-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-virtual-file-based/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport { routes } from './routes'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n verboseFileRoutes: false,\n virtualRouteConfig: routes,\n }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n\nsrc/routeTree.gen.ts" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-basic-virtual-named-export-config-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@tanstack/virtual-file-routes\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/routes.ts", "content": "import {\n index,\n layout,\n physical,\n rootRoute,\n route,\n} from '@tanstack/virtual-file-routes'\n\nexport const routes = rootRoute('root.tsx', [\n index('home.tsx'),\n route('/posts', 'posts/posts.tsx', [\n index('posts/posts-home.tsx'),\n route('$postId', 'posts/posts-detail.tsx'),\n ]),\n layout('first', 'layout/first-layout.tsx', [\n layout('second', 'layout/second-layout.tsx', [\n route('/layout-a', 'a.tsx'),\n route('/layout-b', 'b.tsx'),\n ]),\n ]),\n physical('/classic', 'file-based-subtree'),\n])\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/a.tsx", "content": "export const Route = createFileRoute({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/b.tsx", "content": "export const Route = createFileRoute({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx", "content": "export const Route = createFileRoute({\n component: () =>
This is the index
,\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx", "content": "import { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: () => (\n
\n Hello!\n
{' '}\n \n say hello to the universe\n {' '}\n \n say hello to the world\n \n \n
\n ),\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx", "content": "export const Route = createFileRoute({\n component: () =>
Hello /classic/hello/universe!
,\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx", "content": "export const Route = createFileRoute({\n component: () =>
Hello /classic/hello/world!
,\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/home.tsx", "content": "import * as React from 'react'\n\nexport const Route = createFileRoute({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx", "content": "import { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx", "content": "import { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx", "content": "import * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent as any,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx", "content": "import * as React from 'react'\n\nexport const Route = createFileRoute({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../../posts'\n\nexport const Route = createFileRoute({\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/routes/root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n Subtree\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@source './**/*.{js,jsx,ts,tsx}';\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.waitForURL('/')\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.waitForURL('/')\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a layout\")\n await expect(page.locator('#app')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.waitForURL('/')\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/basic-virtual-named-export-config-file-based/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n verboseFileRoutes: false,\n virtualRouteConfig: './routes.ts',\n }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/escaped-special-strings/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/.gitignore", "content": "node_modules\ndist\nport*.txt\ntest-results\nplaywright-report\n" }, { "path": "e2e/react-router/escaped-special-strings/index.html", "content": "\n\n \n \n \n Escaped Special Strings E2E Test\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/escaped-special-strings/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-escaped-special-strings\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"pnpm run test:e2e:default\",\n \"test:e2e:default\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\nconst command = `pnpm build && pnpm preview --port ${PORT}`\n\nconsole.info('Running with mode: ', process.env.MODE || 'default')\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n env: {\n MODE: process.env.MODE || '',\n VITE_MODE: process.env.MODE || '',\n VITE_NODE_ENV: 'test',\n VITE_EXTERNAL_PORT: String(EXTERNAL_PORT),\n VITE_SERVER_PORT: String(PORT),\n PORT: String(PORT),\n },\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/escaped-special-strings/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as Char91indexChar93RouteImport } from './routes/[index]'\nimport { Route as Char91routeChar93RouteImport } from './routes/[route]'\nimport { Route as Char91lazyChar93RouteImport } from './routes/[lazy]'\nimport { Route as BlogRouteImport } from './routes/blog[_]'\nimport { Route as LayoutRouteImport } from './routes/[_]layout'\nimport { Route as IndexRouteImport } from './routes/index'\n\nconst Char91indexChar93Route = Char91indexChar93RouteImport.update({\n id: '/index',\n path: '/index',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst Char91routeChar93Route = Char91routeChar93RouteImport.update({\n id: '/route',\n path: '/route',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst Char91lazyChar93Route = Char91lazyChar93RouteImport.update({\n id: '/lazy',\n path: '/lazy',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst BlogRoute = BlogRouteImport.update({\n id: '/blog_',\n path: '/blog_',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutRoute = LayoutRouteImport.update({\n id: '/_layout',\n path: '/_layout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/_layout': typeof LayoutRoute\n '/blog_': typeof BlogRoute\n '/index': typeof Char91indexChar93Route\n '/lazy': typeof Char91lazyChar93Route\n '/route': typeof Char91routeChar93Route\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/_layout': typeof LayoutRoute\n '/blog_': typeof BlogRoute\n '/index': typeof Char91indexChar93Route\n '/lazy': typeof Char91lazyChar93Route\n '/route': typeof Char91routeChar93Route\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/_layout': typeof LayoutRoute\n '/blog_': typeof BlogRoute\n '/index': typeof Char91indexChar93Route\n '/lazy': typeof Char91lazyChar93Route\n '/route': typeof Char91routeChar93Route\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths: '/' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route'\n fileRoutesByTo: FileRoutesByTo\n to: '/' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route'\n id: '__root__' | '/' | '/_layout' | '/blog_' | '/index' | '/lazy' | '/route'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n LayoutRoute: typeof LayoutRoute\n BlogRoute: typeof BlogRoute\n Char91indexChar93Route: typeof Char91indexChar93Route\n Char91lazyChar93Route: typeof Char91lazyChar93Route\n Char91routeChar93Route: typeof Char91routeChar93Route\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/index': {\n id: '/index'\n path: '/index'\n fullPath: '/index'\n preLoaderRoute: typeof Char91indexChar93RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/route': {\n id: '/route'\n path: '/route'\n fullPath: '/route'\n preLoaderRoute: typeof Char91routeChar93RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/lazy': {\n id: '/lazy'\n path: '/lazy'\n fullPath: '/lazy'\n preLoaderRoute: typeof Char91lazyChar93RouteImport\n parentRoute: typeof rootRouteImport\n }\n '/blog_': {\n id: '/blog_'\n path: '/blog_'\n fullPath: '/blog_'\n preLoaderRoute: typeof BlogRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/_layout': {\n id: '/_layout'\n path: '/_layout'\n fullPath: '/_layout'\n preLoaderRoute: typeof LayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n }\n}\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n LayoutRoute: LayoutRoute,\n BlogRoute: BlogRoute,\n Char91indexChar93Route: Char91indexChar93Route,\n Char91lazyChar93Route: Char91lazyChar93Route,\n Char91routeChar93Route: Char91routeChar93Route,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/[_]layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// This file uses [_]layout escaping to create a literal /_layout path\n// instead of being treated as a pathless layout route\nexport const Route = createFileRoute('/_layout')({\n component: EscapedUnderscoreLayoutComponent,\n})\n\nfunction EscapedUnderscoreLayoutComponent() {\n return (\n
\n

Escaped Underscore Layout Page

\n

/_layout

\n

\n This route was created using [_]layout.tsx to escape the leading\n underscore. It renders at the literal path /_layout instead of being a\n pathless layout.\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/[index].tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// This file uses [index] escaping to create a literal /index route\n// instead of being treated as an index route for the parent\nexport const Route = createFileRoute('/index')({\n component: EscapedIndexComponent,\n})\n\nfunction EscapedIndexComponent() {\n return (\n
\n

Escaped Index Page

\n

/index

\n

\n This route was created using [index].tsx to escape the special \"index\"\n token. It renders at the literal path /index instead of being the index\n route.\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/[lazy].tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// This file uses [lazy] escaping to create a literal /lazy path\n// instead of being treated as a lazy-loaded route\nexport const Route = createFileRoute('/lazy')({\n component: EscapedLazyComponent,\n})\n\nfunction EscapedLazyComponent() {\n return (\n
\n

Escaped Lazy Page

\n

/lazy

\n

\n This route was created using [lazy].tsx to escape the special \"lazy\"\n token. It renders at the literal path /lazy instead of being a\n lazy-loaded route.\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/[route].tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// This file uses [route] escaping to create a literal /route path\n// instead of being treated as a layout configuration file\nexport const Route = createFileRoute('/route')({\n component: EscapedRouteComponent,\n})\n\nfunction EscapedRouteComponent() {\n return (\n
\n

Escaped Route Page

\n

/route

\n

\n This route was created using [route].tsx to escape the special \"route\"\n token. It renders at the literal path /route instead of being a layout\n configuration.\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/__root.tsx", "content": "import { Link, Outlet, createRootRoute } from '@tanstack/react-router'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

Page not found

\n Go to /index\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n
\n

Escaped Special Strings Test

\n \n \n / (home)\n \n \n /index\n \n \n /route\n \n \n /lazy\n \n \n /_layout\n \n \n /blog_\n \n \n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/blog[_].tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// This file uses blog[_] escaping to create a literal /blog_ path\n// with the trailing underscore preserved in the URL\nexport const Route = createFileRoute('/blog_')({\n component: EscapedBlogUnderscoreComponent,\n})\n\nfunction EscapedBlogUnderscoreComponent() {\n return (\n
\n

Escaped Blog Underscore Page

\n

/blog_

\n

\n This route was created using blog[_].tsx to escape the trailing\n underscore. It renders at the literal path /blog_ with the underscore\n preserved in the URL.\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\n\n// This is the standard index route for the root path /\n// It coexists with [index].tsx which creates a literal /index route\nexport const Route = createFileRoute('/')({\n component: HomeComponent,\n})\n\nfunction HomeComponent() {\n return (\n
\n

Home Page

\n

/

\n

\n This is the home/index route at /. It coexists with the escaped [index]\n route at /index.\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/tests/escaped-routes.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.describe('Escaped special strings routing', () => {\n test('home index route renders at / path', async ({ page }) => {\n await page.goto('/')\n\n await expect(page.getByTestId('page-title')).toContainText('Home Page')\n await expect(page.getByTestId('page-path')).toContainText('/')\n await expect(page.getByTestId('page-description')).toContainText(\n 'home/index route at /',\n )\n })\n\n test('escaped [index] route renders at /index path', async ({ page }) => {\n await page.goto('/index')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Index Page',\n )\n await expect(page.getByTestId('page-path')).toContainText('/index')\n await expect(page.getByTestId('page-description')).toContainText(\n 'escape the special \"index\" token',\n )\n })\n\n test('escaped [route] route renders at /route path', async ({ page }) => {\n await page.goto('/route')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Route Page',\n )\n await expect(page.getByTestId('page-path')).toContainText('/route')\n await expect(page.getByTestId('page-description')).toContainText(\n 'escape the special \"route\" token',\n )\n })\n\n test('escaped [lazy] route renders at /lazy path', async ({ page }) => {\n await page.goto('/lazy')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Lazy Page',\n )\n await expect(page.getByTestId('page-path')).toContainText('/lazy')\n await expect(page.getByTestId('page-description')).toContainText(\n 'escape the special \"lazy\" token',\n )\n })\n\n test('escaped [_]layout route renders at /_layout path', async ({ page }) => {\n await page.goto('/_layout')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Underscore Layout Page',\n )\n await expect(page.getByTestId('page-path')).toContainText('/_layout')\n await expect(page.getByTestId('page-description')).toContainText(\n 'escape the leading underscore',\n )\n })\n\n test('escaped blog[_] route renders at /blog_ path', async ({ page }) => {\n await page.goto('/blog_')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Blog Underscore Page',\n )\n await expect(page.getByTestId('page-path')).toContainText('/blog_')\n await expect(page.getByTestId('page-description')).toContainText(\n 'escape the trailing underscore',\n )\n })\n\n test('client-side navigation to home / route', async ({ page }) => {\n await page.goto('/index')\n await page.getByTestId('link-home').click()\n await page.waitForURL('/')\n\n await expect(page.getByTestId('page-title')).toContainText('Home Page')\n })\n\n test('client-side navigation to escaped /index route', async ({ page }) => {\n await page.goto('/route')\n await page.getByTestId('link-index').click()\n await page.waitForURL('/index')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Index Page',\n )\n })\n\n test('client-side navigation to escaped /route route', async ({ page }) => {\n await page.goto('/index')\n await page.getByTestId('link-route').click()\n await page.waitForURL('/route')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Route Page',\n )\n })\n\n test('client-side navigation to escaped /lazy route', async ({ page }) => {\n await page.goto('/index')\n await page.getByTestId('link-lazy').click()\n await page.waitForURL('/lazy')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Lazy Page',\n )\n })\n\n test('client-side navigation to escaped /_layout route', async ({ page }) => {\n await page.goto('/index')\n await page.getByTestId('link-underscore-layout').click()\n await page.waitForURL('/_layout')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Underscore Layout Page',\n )\n })\n\n test('client-side navigation to escaped /blog_ route', async ({ page }) => {\n await page.goto('/index')\n await page.getByTestId('link-blog-underscore').click()\n await page.waitForURL('/blog_')\n\n await expect(page.getByTestId('page-title')).toContainText(\n 'Escaped Blog Underscore Page',\n )\n })\n\n test('URL is correct for escaped routes with underscores', async ({\n page,\n baseURL,\n }) => {\n await page.goto('/_layout')\n expect(page.url()).toBe(`${baseURL}/_layout`)\n\n await page.goto('/blog_')\n expect(page.url()).toBe(`${baseURL}/blog_`)\n })\n})\n" }, { "path": "e2e/react-router/escaped-special-strings/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/escaped-special-strings/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tanstackRouter({\n target: 'react',\n }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/generator-cli-only/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/generator-cli-only/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/" }, { "path": "e2e/react-router/generator-cli-only/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/generator-cli-only/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-generator-cli-only\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"tsr generate && vite --port 3000\",\n \"dev:e2e\": \"tsr generate && vite\",\n \"build\": \"tsr generate && vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"tsr generate && vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-cli\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/generator-cli-only/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/generator-cli-only/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/posts.ts", "content": "import axios from 'redaxios'\n\nexport class NotFoundError extends Error {}\n\ntype PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!post) {\n throw new NotFoundError(`Post with id \"${postId}\" not found!`)\n }\n\n return post\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as PathlessLayoutRouteImport } from './routes/_pathlessLayout'\nimport { Route as PostsRouteRouteImport } from './routes/posts.route'\nimport { Route as IndexRouteImport } from './routes/index'\nimport { Route as PostsIndexRouteImport } from './routes/posts.index'\nimport { Route as PostsPostIdRouteImport } from './routes/posts.$postId'\nimport { Route as PathlessLayoutNestedLayoutRouteImport } from './routes/_pathlessLayout/_nested-layout'\nimport { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b'\nimport { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a'\n\nconst PathlessLayoutRoute = PathlessLayoutRouteImport.update({\n id: '/_pathlessLayout',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsRouteRoute = PostsRouteRouteImport.update({\n id: '/posts',\n path: '/posts',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst PostsIndexRoute = PostsIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => PostsRouteRoute,\n} as any)\nconst PostsPostIdRoute = PostsPostIdRouteImport.update({\n id: '/$postId',\n path: '/$postId',\n getParentRoute: () => PostsRouteRoute,\n} as any)\nconst PathlessLayoutNestedLayoutRoute =\n PathlessLayoutNestedLayoutRouteImport.update({\n id: '/_nested-layout',\n getParentRoute: () => PathlessLayoutRoute,\n } as any)\nconst PathlessLayoutNestedLayoutRouteBRoute =\n PathlessLayoutNestedLayoutRouteBRouteImport.update({\n id: '/route-b',\n path: '/route-b',\n getParentRoute: () => PathlessLayoutNestedLayoutRoute,\n } as any)\nconst PathlessLayoutNestedLayoutRouteARoute =\n PathlessLayoutNestedLayoutRouteARouteImport.update({\n id: '/route-a',\n path: '/route-a',\n getParentRoute: () => PathlessLayoutNestedLayoutRoute,\n } as any)\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/posts': typeof PostsRouteRouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute\n '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts': typeof PostsIndexRoute\n '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute\n '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/posts': typeof PostsRouteRouteWithChildren\n '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren\n '/_pathlessLayout/_nested-layout': typeof PathlessLayoutNestedLayoutRouteWithChildren\n '/posts/$postId': typeof PostsPostIdRoute\n '/posts/': typeof PostsIndexRoute\n '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute\n '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | '/posts'\n | '/posts/$postId'\n | '/posts/'\n | '/route-a'\n | '/route-b'\n fileRoutesByTo: FileRoutesByTo\n to: '/' | '/posts/$postId' | '/posts' | '/route-a' | '/route-b'\n id:\n | '__root__'\n | '/'\n | '/posts'\n | '/_pathlessLayout'\n | '/_pathlessLayout/_nested-layout'\n | '/posts/$postId'\n | '/posts/'\n | '/_pathlessLayout/_nested-layout/route-a'\n | '/_pathlessLayout/_nested-layout/route-b'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n PostsRouteRoute: typeof PostsRouteRouteWithChildren\n PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/_pathlessLayout': {\n id: '/_pathlessLayout'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof PathlessLayoutRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts': {\n id: '/posts'\n path: '/posts'\n fullPath: '/posts'\n preLoaderRoute: typeof PostsRouteRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/posts/': {\n id: '/posts/'\n path: '/'\n fullPath: '/posts/'\n preLoaderRoute: typeof PostsIndexRouteImport\n parentRoute: typeof PostsRouteRoute\n }\n '/posts/$postId': {\n id: '/posts/$postId'\n path: '/$postId'\n fullPath: '/posts/$postId'\n preLoaderRoute: typeof PostsPostIdRouteImport\n parentRoute: typeof PostsRouteRoute\n }\n '/_pathlessLayout/_nested-layout': {\n id: '/_pathlessLayout/_nested-layout'\n path: ''\n fullPath: '/'\n preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteImport\n parentRoute: typeof PathlessLayoutRoute\n }\n '/_pathlessLayout/_nested-layout/route-b': {\n id: '/_pathlessLayout/_nested-layout/route-b'\n path: '/route-b'\n fullPath: '/route-b'\n preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteBRouteImport\n parentRoute: typeof PathlessLayoutNestedLayoutRoute\n }\n '/_pathlessLayout/_nested-layout/route-a': {\n id: '/_pathlessLayout/_nested-layout/route-a'\n path: '/route-a'\n fullPath: '/route-a'\n preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteARouteImport\n parentRoute: typeof PathlessLayoutNestedLayoutRoute\n }\n }\n}\n\ninterface PostsRouteRouteChildren {\n PostsPostIdRoute: typeof PostsPostIdRoute\n PostsIndexRoute: typeof PostsIndexRoute\n}\n\nconst PostsRouteRouteChildren: PostsRouteRouteChildren = {\n PostsPostIdRoute: PostsPostIdRoute,\n PostsIndexRoute: PostsIndexRoute,\n}\n\nconst PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren(\n PostsRouteRouteChildren,\n)\n\ninterface PathlessLayoutNestedLayoutRouteChildren {\n PathlessLayoutNestedLayoutRouteARoute: typeof PathlessLayoutNestedLayoutRouteARoute\n PathlessLayoutNestedLayoutRouteBRoute: typeof PathlessLayoutNestedLayoutRouteBRoute\n}\n\nconst PathlessLayoutNestedLayoutRouteChildren: PathlessLayoutNestedLayoutRouteChildren =\n {\n PathlessLayoutNestedLayoutRouteARoute:\n PathlessLayoutNestedLayoutRouteARoute,\n PathlessLayoutNestedLayoutRouteBRoute:\n PathlessLayoutNestedLayoutRouteBRoute,\n }\n\nconst PathlessLayoutNestedLayoutRouteWithChildren =\n PathlessLayoutNestedLayoutRoute._addFileChildren(\n PathlessLayoutNestedLayoutRouteChildren,\n )\n\ninterface PathlessLayoutRouteChildren {\n PathlessLayoutNestedLayoutRoute: typeof PathlessLayoutNestedLayoutRouteWithChildren\n}\n\nconst PathlessLayoutRouteChildren: PathlessLayoutRouteChildren = {\n PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren,\n}\n\nconst PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren(\n PathlessLayoutRouteChildren,\n)\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n PostsRouteRoute: PostsRouteRouteWithChildren,\n PathlessLayoutRoute: PathlessLayoutRouteWithChildren,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/__root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Pathless Layout\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')(\n {\n component: LayoutAComponent,\n },\n)\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout/route-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')(\n {\n component: LayoutBComponent,\n },\n)\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/_pathlessLayout/_nested-layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_pathlessLayout/_nested-layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested pathless layout
\n
\n \n Go to route A\n \n \n Go to route B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/_pathlessLayout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_pathlessLayout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a pathless layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/posts.$postId.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/posts.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/routes/posts.route.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../posts'\n\nexport const Route = createFileRoute('/posts')({\n loader: fetchPosts,\n component: PostsLayoutComponent,\n})\n\nfunction PostsLayoutComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/generator-cli-only/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/generator-cli-only/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts', exact: true }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested pathless layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Pathless Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a pathless layout\")\n await expect(page.locator('#app')).toContainText(\n \"I'm a nested pathless layout\",\n )\n\n await page.getByRole('link', { name: 'Go to route A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Go to route B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/generator-cli-only/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/generator-cli-only/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/generator-cli-only/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"types\": [\"vite/client\"]\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/generator-cli-only/tsr.config.json", "content": "{\n \"routesDirectory\": \"./src/routes\",\n \"generatedRouteTree\": \"./src/routeTree.gen.ts\"\n}\n" }, { "path": "e2e/react-router/generator-cli-only/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [tailwindcss(), react()],\n})\n" }, { "path": "e2e/react-router/i18n-paraglide/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/.gitignore", "content": "node_modules\ndist\nsrc/routeTree.gen.ts\nsrc/paraglide\n*.local\nport*.txt\ntest-results\n" }, { "path": "e2e/react-router/i18n-paraglide/index.html", "content": "\n\n \n \n \n \n \n \n TanStack Router i18n-paraglide e2e\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/i18n-paraglide/messages/de.json", "content": "{\n \"$schema\": \"https://inlang.com/schema/inlang-message-format\",\n \"example_message\": \"Guten Tag {username}\",\n \"hello_about\": \"Hallo /ueber!\",\n \"home_page\": \"Startseite\",\n \"about_page\": \"รœber uns\"\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/messages/en.json", "content": "{\n \"$schema\": \"https://inlang.com/schema/inlang-message-format\",\n \"example_message\": \"Hello world {username}\",\n \"hello_about\": \"Hello /about!\",\n \"home_page\": \"Home page\",\n \"about_page\": \"About page\"\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-i18n-paraglide\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"tailwindcss\": \"^4.2.2\"\n },\n \"devDependencies\": {\n \"@inlang/paraglide-js\": \"^2.4.0\",\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@types/node\": \"^22.10.2\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport { getTestServerPort } from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_SERVER_PORT=${PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/i18n-paraglide/project.inlang/.gitignore", "content": "cache\n" }, { "path": "e2e/react-router/i18n-paraglide/project.inlang/project_id", "content": "apLjNFHNH2yAHYTN5d" }, { "path": "e2e/react-router/i18n-paraglide/project.inlang/settings.json", "content": "{\n \"$schema\": \"https://inlang.com/schema/project-settings\",\n \"baseLocale\": \"en\",\n \"locales\": [\"en\", \"de\"],\n \"modules\": [\n \"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js\",\n \"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js\"\n ],\n \"plugin.inlang.messageFormat\": {\n \"pathPattern\": \"./messages/{locale}.json\"\n }\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/src/main.tsx", "content": "import { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport './styles.css'\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\nimport { deLocalizeUrl, localizeUrl } from './paraglide/runtime.js'\n\n// Create a new router instance\nconst router = createRouter({\n routeTree,\n context: {},\n defaultPreload: 'intent',\n scrollRestoration: true,\n defaultStructuralSharing: true,\n defaultPreloadStaleTime: 0,\n\n rewrite: {\n input: ({ url }) => deLocalizeUrl(url),\n output: ({ url }) => localizeUrl(url),\n },\n})\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\n// Render the app\nconst rootElement = document.getElementById('app')\nif (rootElement && !rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/src/routes/__root.tsx", "content": "import { Link, Outlet, createRootRoute, redirect } from '@tanstack/react-router'\nimport {\n getLocale,\n locales,\n setLocale,\n shouldRedirect,\n} from '@/paraglide/runtime'\nimport { m } from '@/paraglide/messages'\n\nexport const Route = createRootRoute({\n beforeLoad: async () => {\n document.documentElement.setAttribute('lang', getLocale())\n\n const decision = await shouldRedirect({ url: window.location.href })\n\n if (decision.redirectUrl) {\n throw redirect({ href: decision.redirectUrl.href })\n }\n },\n component: () => (\n <>\n
\n
\n \n {m.home_page()}\n \n\n \n {m.about_page()}\n \n
\n\n
\n {locales.map((locale) => (\n setLocale(locale)}\n data-active-locale={locale === getLocale()}\n data-testid={`locale-${locale}`}\n className=\"rounded p-1 px-2 border border-gray-300 cursor-pointer [&[data-active-locale=true]]:bg-gray-500 [&[data-active-locale=true]]:text-white\"\n >\n {locale}\n \n ))}\n
\n
\n\n
\n\n
\n \n
\n \n ),\n})\n" }, { "path": "e2e/react-router/i18n-paraglide/src/routes/about.tsx", "content": "import { m } from '@/paraglide/messages'\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/about')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return
{m.hello_about()}
\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { m } from '@/paraglide/messages'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n
\n

\n {m.example_message({\n username: 'TanStack Router!',\n })}\n

\n
\n )\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/src/styles.css", "content": "@import 'tailwindcss' source('../');\n" }, { "path": "e2e/react-router/i18n-paraglide/tests/navigation.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\n// These tests verify that client-side i18n rewrites work correctly in a pure SPA\n// (no server-side rendering). The router uses the rewrite API to:\n// - input: de-localize URLs for route matching (e.g., /de/ueber -> /about)\n// - output: localize URLs for display (e.g., /about -> /de/ueber)\n\ntest.describe('Client-side i18n navigation', () => {\n test('should load the home page without redirect loops', async ({ page }) => {\n // Navigate to root - should work without any redirect loop issues\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n // Verify the page loaded successfully\n await expect(page.getByTestId('home-content')).toBeVisible()\n await expect(page.getByTestId('home-content')).toContainText('Hello world')\n })\n\n test('should load the German home page (/de)', async ({ page }) => {\n await page.goto('/de')\n await page.waitForLoadState('networkidle')\n\n // Verify we're on the German page\n await expect(page.getByTestId('home-content')).toBeVisible()\n await expect(page.getByTestId('home-content')).toContainText('Guten Tag')\n\n // URL should remain /de\n expect(page.url()).toContain('/de')\n })\n\n test('should navigate to about page and update URL correctly', async ({\n page,\n }) => {\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n // Click on about link\n await page.getByTestId('about-link').click()\n await page.waitForLoadState('networkidle')\n\n // Verify we're on the about page\n await expect(page.getByTestId('about-content')).toBeVisible()\n await expect(page.getByTestId('about-content')).toContainText(\n 'Hello /about!',\n )\n\n // URL should be /about (English)\n expect(page.url()).toContain('/about')\n })\n\n test('should navigate to German about page with translated URL', async ({\n page,\n }) => {\n await page.goto('/de')\n await page.waitForLoadState('networkidle')\n\n // Click on about link (should navigate to /de/ueber)\n await page.getByTestId('about-link').click()\n await page.waitForLoadState('networkidle')\n\n // Verify we're on the about page with German content\n await expect(page.getByTestId('about-content')).toBeVisible()\n await expect(page.getByTestId('about-content')).toContainText(\n 'Hallo /ueber!',\n )\n\n // URL should be /de/ueber (German translated path)\n expect(page.url()).toContain('/de/ueber')\n })\n\n test('should directly access German about page (/de/ueber)', async ({\n page,\n }) => {\n // Direct navigation to translated URL\n await page.goto('/de/ueber')\n await page.waitForLoadState('networkidle')\n\n // Verify the page loaded correctly\n await expect(page.getByTestId('about-content')).toBeVisible()\n await expect(page.getByTestId('about-content')).toContainText(\n 'Hallo /ueber!',\n )\n\n // URL should stay /de/ueber\n expect(page.url()).toContain('/de/ueber')\n })\n\n test('should switch locale and update URLs accordingly', async ({ page }) => {\n // Start at English home page\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n // Verify English content\n await expect(page.getByTestId('home-content')).toContainText('Hello world')\n\n // Switch to German\n await page.getByTestId('locale-de').click()\n await page.waitForLoadState('networkidle')\n\n // Verify German content\n await expect(page.getByTestId('home-content')).toContainText('Guten Tag')\n\n // URL should now include /de\n expect(page.url()).toContain('/de')\n })\n\n test('should switch locale on about page and update translated URL', async ({\n page,\n }) => {\n // Start at English about page\n await page.goto('/about')\n await page.waitForLoadState('networkidle')\n\n // Verify English content\n await expect(page.getByTestId('about-content')).toContainText(\n 'Hello /about!',\n )\n\n // Switch to German\n await page.getByTestId('locale-de').click()\n await page.waitForLoadState('networkidle')\n\n // Verify German content\n await expect(page.getByTestId('about-content')).toContainText(\n 'Hallo /ueber!',\n )\n\n // URL should now be /de/ueber (translated path)\n expect(page.url()).toContain('/de/ueber')\n })\n\n test('should maintain correct links after locale switch', async ({\n page,\n }) => {\n // Start at German home page\n await page.goto('/de')\n await page.waitForLoadState('networkidle')\n\n // Verify about link has German translated href\n const aboutLink = page.getByTestId('about-link')\n await expect(aboutLink).toHaveAttribute('href', '/de/ueber')\n\n // Switch to English\n await page.getByTestId('locale-en').click()\n await page.waitForLoadState('networkidle')\n\n // Verify about link now has English href\n await expect(aboutLink).toHaveAttribute('href', '/about')\n })\n})\n\ntest.describe('Client-side navigation without redirect loops', () => {\n test('navigating back and forth should not cause issues', async ({\n page,\n }) => {\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n // Navigate to about\n await page.getByTestId('about-link').click()\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('about-content')).toBeVisible()\n\n // Navigate back to home\n await page.getByTestId('home-link').click()\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('home-content')).toBeVisible()\n\n // Navigate to about again\n await page.getByTestId('about-link').click()\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('about-content')).toBeVisible()\n })\n\n test('switching locales multiple times should work correctly', async ({\n page,\n }) => {\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n // Switch to German\n await page.getByTestId('locale-de').click()\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('home-content')).toContainText('Guten Tag')\n\n // Switch back to English\n await page.getByTestId('locale-en').click()\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('home-content')).toContainText('Hello world')\n\n // Switch to German again\n await page.getByTestId('locale-de').click()\n await page.waitForLoadState('networkidle')\n await expect(page.getByTestId('home-content')).toContainText('Guten Tag')\n })\n\n test('browser back/forward should work with locale changes', async ({\n page,\n }) => {\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n // Navigate to about\n await page.getByTestId('about-link').click()\n await page.waitForLoadState('networkidle')\n\n // Switch to German\n await page.getByTestId('locale-de').click()\n await page.waitForLoadState('networkidle')\n expect(page.url()).toContain('/de/ueber')\n\n // Go back\n await page.goBack()\n await page.waitForLoadState('networkidle')\n\n // Should be on about page (English or previous state)\n await expect(page.getByTestId('about-content')).toBeVisible()\n })\n})\n\ntest.describe('URL rewrite consistency', () => {\n test('internal navigation should use rewritten URLs in links', async ({\n page,\n }) => {\n await page.goto('/de')\n await page.waitForLoadState('networkidle')\n\n // Check that links are properly localized\n const homeLink = page.getByTestId('home-link')\n const aboutLink = page.getByTestId('about-link')\n\n await expect(homeLink).toHaveAttribute('href', '/de')\n await expect(aboutLink).toHaveAttribute('href', '/de/ueber')\n })\n\n test('English links should not have locale prefix', async ({ page }) => {\n await page.goto('/')\n await page.waitForLoadState('networkidle')\n\n const homeLink = page.getByTestId('home-link')\n const aboutLink = page.getByTestId('about-link')\n\n await expect(homeLink).toHaveAttribute('href', '/')\n await expect(aboutLink).toHaveAttribute('href', '/about')\n })\n})\n" }, { "path": "e2e/react-router/i18n-paraglide/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"noImplicitAny\": false,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"resolveJsonModule\": true,\n \"allowSyntheticDefaultImports\": true,\n \"skipLibCheck\": true,\n \"allowJs\": true,\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"src\", \"tests\"]\n}\n" }, { "path": "e2e/react-router/i18n-paraglide/vite.config.ts", "content": "import { defineConfig } from 'vite'\nimport viteReact from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport { resolve } from 'node:path'\nimport { paraglideVitePlugin } from '@inlang/paraglide-js'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n paraglideVitePlugin({\n project: './project.inlang',\n outdir: './src/paraglide',\n outputStructure: 'message-modules',\n cookieName: 'PARAGLIDE_LOCALE',\n strategy: ['url', 'cookie', 'preferredLanguage', 'baseLocale'],\n urlPatterns: [\n {\n pattern: '/',\n localized: [\n ['en', '/'],\n ['de', '/de'],\n ],\n },\n {\n pattern: '/about',\n localized: [\n ['en', '/about'],\n ['de', '/de/ueber'],\n ],\n },\n {\n pattern: '/:path(.*)?',\n localized: [\n ['en', '/:path(.*)?'],\n ['de', '/de/:path(.*)?'],\n ],\n },\n ],\n }),\n tanstackRouter({ autoCodeSplitting: true }),\n viteReact(),\n ],\n resolve: {\n alias: {\n '@': resolve(__dirname, './src'),\n },\n },\n})\n" }, { "path": "e2e/react-router/js-only-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/js-only-file-based/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-hash\ndist-ssr\n*.local\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/" }, { "path": "e2e/react-router/js-only-file-based/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/js-only-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-js-only-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/js-only-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} pnpm build && pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/js-only-file-based/src/main.jsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n defaultStaleTime: 5000,\n scrollRestoration: true,\n})\n\nconst rootElement = document.getElementById('app')\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/posts.js", "content": "import axios from 'redaxios'\n\nexport class NotFoundError extends Error {}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios.get(`${queryURL}/posts`).then((r) => r.data.slice(0, 10))\n}\n\nexport const fetchPost = async (postId) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n\n if (!post) {\n throw new NotFoundError(`Post with id \"${postId}\" not found!`)\n }\n\n return post\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routeTree.gen.js", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as PathlessLayoutRouteImport } from './routes/_pathlessLayout'\nimport { Route as PostsRouteRouteImport } from './routes/posts.route'\nimport { Route as IndexRouteImport } from './routes/index'\nimport { Route as PostsIndexRouteImport } from './routes/posts.index'\nimport { Route as PostsPostIdRouteImport } from './routes/posts.$postId'\nimport { Route as PathlessLayoutNestedLayoutRouteImport } from './routes/_pathlessLayout/_nested-layout'\nimport { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b'\nimport { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a'\n\nconst PathlessLayoutRoute = PathlessLayoutRouteImport.update({\n id: '/_pathlessLayout',\n getParentRoute: () => rootRouteImport,\n})\nconst PostsRouteRoute = PostsRouteRouteImport.update({\n id: '/posts',\n path: '/posts',\n getParentRoute: () => rootRouteImport,\n})\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n})\nconst PostsIndexRoute = PostsIndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => PostsRouteRoute,\n})\nconst PostsPostIdRoute = PostsPostIdRouteImport.update({\n id: '/$postId',\n path: '/$postId',\n getParentRoute: () => PostsRouteRoute,\n})\nconst PathlessLayoutNestedLayoutRoute =\n PathlessLayoutNestedLayoutRouteImport.update({\n id: '/_nested-layout',\n getParentRoute: () => PathlessLayoutRoute,\n })\nconst PathlessLayoutNestedLayoutRouteBRoute =\n PathlessLayoutNestedLayoutRouteBRouteImport.update({\n id: '/route-b',\n path: '/route-b',\n getParentRoute: () => PathlessLayoutNestedLayoutRoute,\n })\nconst PathlessLayoutNestedLayoutRouteARoute =\n PathlessLayoutNestedLayoutRouteARouteImport.update({\n id: '/route-a',\n path: '/route-a',\n getParentRoute: () => PathlessLayoutNestedLayoutRoute,\n })\n\nconst PostsRouteRouteChildren = {\n PostsPostIdRoute: PostsPostIdRoute,\n PostsIndexRoute: PostsIndexRoute,\n}\n\nconst PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren(\n PostsRouteRouteChildren,\n)\n\nconst PathlessLayoutNestedLayoutRouteChildren = {\n PathlessLayoutNestedLayoutRouteARoute: PathlessLayoutNestedLayoutRouteARoute,\n PathlessLayoutNestedLayoutRouteBRoute: PathlessLayoutNestedLayoutRouteBRoute,\n}\n\nconst PathlessLayoutNestedLayoutRouteWithChildren =\n PathlessLayoutNestedLayoutRoute._addFileChildren(\n PathlessLayoutNestedLayoutRouteChildren,\n )\n\nconst PathlessLayoutRouteChildren = {\n PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren,\n}\n\nconst PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren(\n PathlessLayoutRouteChildren,\n)\n\nconst rootRouteChildren = {\n IndexRoute: IndexRoute,\n PostsRouteRoute: PostsRouteRouteWithChildren,\n PathlessLayoutRoute: PathlessLayoutRouteWithChildren,\n}\nexport const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/__root.jsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Pathless Layout\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')(\n {\n component: LayoutAComponent,\n },\n)\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')(\n {\n component: LayoutBComponent,\n },\n)\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/_pathlessLayout/_nested-layout.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_pathlessLayout/_nested-layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested pathless layout
\n
\n \n Go to route A\n \n \n Go to route B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/_pathlessLayout.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_pathlessLayout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a pathless layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/index.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/posts.$postId.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../posts'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/posts.index.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/routes/posts.route.jsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../posts'\n\nexport const Route = createFileRoute('/posts')({\n loader: fetchPosts,\n component: PostsLayoutComponent,\n})\n\nfunction PostsLayoutComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/js-only-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/js-only-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts', exact: true }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested pathless layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Pathless Layout', exact: true }).click()\n\n await expect(page.locator('#app')).toContainText(\"I'm a pathless layout\")\n await expect(page.locator('#app')).toContainText(\n \"I'm a nested pathless layout\",\n )\n\n await page.getByRole('link', { name: 'Go to route A' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Go to route B' }).click()\n await expect(page.locator('#app')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/js-only-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/js-only-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/js-only-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react-jsx\",\n \"target\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"module\": \"ESNext\",\n \"resolveJsonModule\": true,\n \"allowJs\": true,\n \"skipLibCheck\": true\n },\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/js-only-file-based/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n tanstackRouter({\n target: 'react',\n disableTypes: true,\n }),\n react(),\n ],\n})\n" }, { "path": "e2e/react-router/rspack-basic-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/.gitignore", "content": "# Local\n.DS_Store\n*.local\n*.log*\n\n# Dist\nnode_modules\ndist/\ndist-hash/\n\n# IDE\n.vscode/*\n!.vscode/extensions.json\n.idea\n\n# E2E\nsrc/routeTree.gen.ts\ntest-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/rspack-basic-file-based/README.md", "content": "# Example\n\nTo run this example:\n\n- `pnpm install`\n- `pnpm dev`\n" }, { "path": "e2e/react-router/rspack-basic-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-rspack-basic-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"rsbuild dev --port 3000\",\n \"build\": \"rsbuild build && tsc --noEmit\",\n \"preview\": \"rsbuild preview\",\n \"start\": \"rsbuild preview\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@rsbuild/core\": \"^1.2.4\",\n \"@rsbuild/plugin-react\": \"^1.1.0\",\n \"@tailwindcss/postcss\": \"^4.2.2\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"postcss\": \"^8.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"typescript\": \"^5.7.2\"\n }\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `PUBLIC_NODE_ENV=\"test\" PUBLIC_EXTERNAL_PORT=${EXTERNAL_PORT} PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/rspack-basic-file-based/postcss.config.mjs", "content": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/rsbuild.config.ts", "content": "import { defineConfig } from '@rsbuild/core'\nimport { pluginReact } from '@rsbuild/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/rspack'\n\nexport default defineConfig({\n plugins: [pluginReact()],\n tools: {\n rspack: {\n plugins: [\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n }),\n ],\n },\n },\n})\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/app.tsx", "content": "import * as React from 'react'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\nconst App = () => {\n return \n}\n\nexport default App\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/env.d.ts", "content": "/// \n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/index.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './app'\n\nconst rootEl = document.getElementById('root')\n\nif (rootEl) {\n const root = ReactDOM.createRoot(rootEl)\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.PUBLIC_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.PUBLIC_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/__root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_layout/_layout-2/layout-a')({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_layout/_layout-2/layout-b')({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout/_layout-2')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/_layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_layout')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/posts.$postId.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/posts.index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/routes/posts.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../posts'\n\nexport const Route = createFileRoute('/posts')({\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@source './**/*.{js,jsx,ts,tsx}';\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#root')).toContainText(\"I'm a layout\")\n await expect(page.locator('#root')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#root')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#root')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/rspack-basic-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/rspack-basic-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"moduleResolution\": \"Bundler\",\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES2022\"],\n \"module\": \"ESNext\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"isolatedModules\": true,\n \"resolveJsonModule\": true,\n \"useDefineForClassFields\": true,\n \"allowJs\": true\n },\n \"include\": [\"src\", \"playwright.config.ts\", \"tests\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/.gitignore", "content": "# Local\n.DS_Store\n*.local\n*.log*\n\n# Dist\nnode_modules\ndist/\ndist-hash/\n\n# IDE\n.vscode/*\n!.vscode/extensions.json\n.idea\n\n# E2E\nsrc/routeTree.gen.ts\ntest-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/README.md", "content": "# Example\n\nTo run this example:\n\n- `pnpm install`\n- `pnpm dev`\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-rspack-basic-virtual-named-export-config-file-based\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"rsbuild dev --port 3000\",\n \"build\": \"rsbuild build && tsc --noEmit\",\n \"preview\": \"rsbuild preview\",\n \"start\": \"rsbuild preview\",\n \"test:e2e\": \"rm -rf port*.txt; playwright test --project=chromium\"\n },\n \"dependencies\": {\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@rsbuild/core\": \"^1.2.4\",\n \"@rsbuild/plugin-react\": \"^1.1.0\",\n \"@tailwindcss/postcss\": \"^4.2.2\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@tanstack/virtual-file-routes\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"postcss\": \"^8.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"typescript\": \"^5.7.2\"\n }\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(packageJson.name)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `PUBLIC_NODE_ENV=\"test\" PUBLIC_EXTERNAL_PORT=${EXTERNAL_PORT} PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_SERVER_PORT=${PORT} pnpm start --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/postcss.config.mjs", "content": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/routes.ts", "content": "import {\n index,\n layout,\n physical,\n rootRoute,\n route,\n} from '@tanstack/virtual-file-routes'\n\nexport const routes = rootRoute('root.tsx', [\n index('home.tsx'),\n route('/posts', 'posts/posts.tsx', [\n index('posts/posts-home.tsx'),\n route('$postId', 'posts/posts-detail.tsx'),\n ]),\n layout('first', 'layout/first-layout.tsx', [\n layout('second', 'layout/second-layout.tsx', [\n route('/layout-a', 'a.tsx'),\n route('/layout-b', 'b.tsx'),\n ]),\n ]),\n physical('/classic', 'file-based-subtree'),\n])\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.ts", "content": "import { defineConfig } from '@rsbuild/core'\nimport { pluginReact } from '@rsbuild/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/rspack'\n\nexport default defineConfig({\n plugins: [pluginReact()],\n tools: {\n rspack: {\n plugins: [\n tanstackRouter({\n target: 'react',\n autoCodeSplitting: true,\n virtualRouteConfig: './routes.ts',\n }),\n ],\n },\n },\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx", "content": "import * as React from 'react'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\nimport { routeTree } from './routeTree.gen'\nimport './styles.css'\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\nconst App = () => {\n return \n}\n\nexport default App\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/env.d.ts", "content": "/// \n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/index.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './app'\n\nconst rootEl = document.getElementById('root')\n\nif (rootEl) {\n const root = ReactDOM.createRoot(rootEl)\n root.render(\n \n \n ,\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsx", "content": "import { notFound } from '@tanstack/react-router'\nimport axios from 'redaxios'\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.PUBLIC_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.PUBLIC_EXTERNAL_PORT}`\n}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n await new Promise((r) => setTimeout(r, 500))\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw notFound()\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n await new Promise((r) => setTimeout(r, 500))\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_first/_second/layout-a')({\n component: LayoutAComponent,\n})\n\nfunction LayoutAComponent() {\n return
I'm layout A!
\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/_first/_second/layout-b')({\n component: LayoutBComponent,\n})\n\nfunction LayoutBComponent() {\n return
I'm layout B!
\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/classic/hello/')({\n component: () =>
This is the index
,\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/classic/hello')({\n component: () => (\n
\n Hello!\n
{' '}\n \n say hello to the universe\n {' '}\n \n say hello to the world\n \n \n
\n ),\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/classic/hello/universe')({\n component: () =>
Hello /classic/hello/universe!
,\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/classic/hello/world')({\n component: () =>
Hello /classic/hello/world!
,\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/')({\n component: Home,\n})\n\nfunction Home() {\n return (\n
\n

Welcome Home!

\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_first')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a layout
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/_first/_second')({\n component: LayoutComponent,\n})\n\nfunction LayoutComponent() {\n return (\n
\n
I'm a nested layout
\n
\n \n Layout A\n \n \n Layout B\n \n
\n
\n \n
\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { ErrorComponent } from '@tanstack/react-router'\nimport { fetchPost } from '../../posts'\nimport type { ErrorComponentProps } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n loader: async ({ params: { postId } }) => fetchPost(postId),\n errorComponent: PostErrorComponent as any,\n notFoundComponent: () => {\n return

Post not found

\n },\n component: PostComponent,\n})\n\nexport function PostErrorComponent({ error }: ErrorComponentProps) {\n return \n}\n\nfunction PostComponent() {\n const post = Route.useLoaderData()\n\n return (\n
\n

{post.title}

\n
{post.body}
\n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nexport const Route = createFileRoute('/posts/')({\n component: PostsIndexComponent,\n})\n\nfunction PostsIndexComponent() {\n return
Select a post.
\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\nimport { Link, Outlet } from '@tanstack/react-router'\nimport { fetchPosts } from '../../posts'\n\nexport const Route = createFileRoute('/posts')({\n loader: fetchPosts,\n component: PostsComponent,\n})\n\nfunction PostsComponent() {\n const posts = Route.useLoaderData()\n\n return (\n
\n
    \n {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(\n (post) => {\n return (\n
  • \n \n
    {post.title.substring(0, 20)}
    \n \n
    • \n )\n },\n )}\n
\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx", "content": "import * as React from 'react'\nimport { Link, Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n notFoundComponent: () => {\n return (\n
\n

This is the notFoundComponent configured on root route

\n Start Over\n
\n )\n },\n})\n\nfunction RootComponent() {\n return (\n <>\n
\n \n Home\n {' '}\n \n Posts\n {' '}\n \n Layout\n {' '}\n \n Subtree\n {' '}\n \n This Route Does Not Exist\n \n
\n
\n \n {/* Start rendering router matches */}\n \n \n )\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/src/styles.css", "content": "@import 'tailwindcss' source('../');\n\n@source './**/*.{js,jsx,ts,tsx}';\n\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n\nhtml {\n color-scheme: light dark;\n}\n* {\n @apply border-gray-200 dark:border-gray-800;\n}\nbody {\n @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/tests/app.spec.ts", "content": "import { expect, test } from '@playwright/test'\n\ntest.beforeEach(async ({ page }) => {\n await page.goto('/')\n})\n\ntest('Navigating to a post page', async ({ page }) => {\n await page.waitForURL('/')\n await page.getByRole('link', { name: 'Posts' }).click()\n await page.getByRole('link', { name: 'sunt aut facere repe' }).click()\n await expect(page.getByRole('heading')).toContainText('sunt aut facere')\n})\n\ntest('Navigating nested layouts', async ({ page }) => {\n await page.waitForURL('/')\n await page.getByRole('link', { name: 'Layout', exact: true }).click()\n\n await expect(page.locator('#root')).toContainText(\"I'm a layout\")\n await expect(page.locator('#root')).toContainText(\"I'm a nested layout\")\n\n await page.getByRole('link', { name: 'Layout A' }).click()\n await expect(page.locator('#root')).toContainText(\"I'm layout A!\")\n\n await page.getByRole('link', { name: 'Layout B' }).click()\n await expect(page.locator('#root')).toContainText(\"I'm layout B!\")\n})\n\ntest('Navigating to a not-found route', async ({ page }) => {\n await page.waitForURL('/')\n await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()\n await expect(page.getByRole('paragraph')).toContainText(\n 'This is the notFoundComponent configured on root route',\n )\n await page.getByRole('link', { name: 'Start Over' }).click()\n await expect(page.getByRole('heading')).toContainText('Welcome Home!')\n})\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts", "content": "import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function setup() {\n await e2eStartDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.ts", "content": "import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'\nimport packageJson from '../../package.json' with { type: 'json' }\n\nexport default async function teardown() {\n await e2eStopDummyServer(packageJson.name)\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"moduleResolution\": \"Bundler\",\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES2022\"],\n \"module\": \"ESNext\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"isolatedModules\": true,\n \"resolveJsonModule\": true,\n \"useDefineForClassFields\": true,\n \"allowJs\": true\n },\n \"include\": [\"src\", \"playwright.config.ts\", \"tests\", \"./routes.ts\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "e2e/react-router/rspack-basic-virtual-named-export-config-file-based/tsr.config.json", "content": "{\n \"routesDirectory\": \"./src/routes\",\n \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n \"virtualRouteConfig\": \"./routes.ts\"\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/.devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/typescript-node:24\"\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/.gitignore", "content": "node_modules\n.DS_Store\ndist\ndist-ssr\ndist-hash\n*.local\ntest-results\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/README.md", "content": "# Scroll Restoration Testing Sandbox with Vite\n\nTo run this example:\n\n- `npm install`\n- `npm start`\n\nThis sandbox is for testing the scroll restoration behavior.\n\n## Setup\n\n- Create your files in `src/routes` directory.\n- Make sure you update the arrays in the following files with the expected routes\n - `tests/app.spec.ts` > routes array\n - `src/routes/__root.tsx` > Nav component, routes array\n - `src/routes/index.tsx` > Navigation test suite, routes array\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/index.html", "content": "\n\n \n \n \n Vite App\n \n \n
\n \n \n\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/package.json", "content": "{\n \"name\": \"tanstack-router-e2e-react-scroll-restoration-sandbox-vite\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"dev:hash\": \"VITE_APP_HISTORY=hash vite --port 3000\",\n \"dev:e2e\": \"vite\",\n \"build\": \"vite build && tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"start\": \"vite\",\n \"test:e2e:browser\": \"VITE_APP_HISTORY=browser playwright test --config=playwright.browser.config.ts --project=chromium\",\n \"test:e2e:hash\": \"VITE_APP_HISTORY=hash playwright test --config=playwright.hash.config.ts --project=chromium\",\n \"test:e2e\": \"rm -rf port*.txt; pnpm run test:e2e:browser && pnpm run test:e2e:hash\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-router\": \"workspace:^\",\n \"@tanstack/react-router-devtools\": \"workspace:^\",\n \"@tanstack/router-plugin\": \"workspace:^\",\n \"@tanstack/zod-adapter\": \"workspace:^\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"redaxios\": \"^0.5.1\",\n \"tailwindcss\": \"^4.2.2\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.50.1\",\n \"@tanstack/router-e2e-utils\": \"workspace:^\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^6.0.1\",\n \"vite\": \"^8.0.0\"\n }\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/playwright.browser.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n resolveRuntimeSuffix,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(\n packageJson.name + `-${resolveRuntimeSuffix('browser')}`,\n)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\n\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=browser pnpm build && VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=browser pnpm preview --port ${PORT}`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n\n quiet: false,\n})\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/playwright.hash.config.ts", "content": "import { defineConfig, devices } from '@playwright/test'\nimport {\n getDummyServerPort,\n getTestServerPort,\n resolveRuntimeSuffix,\n} from '@tanstack/router-e2e-utils'\nimport packageJson from './package.json' with { type: 'json' }\n\nconst PORT = await getTestServerPort(\n packageJson.name + `-${resolveRuntimeSuffix('hash')}`,\n)\nconst EXTERNAL_PORT = await getDummyServerPort(packageJson.name)\n\nconst baseURL = `http://localhost:${PORT}`\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nexport default defineConfig({\n testDir: './tests',\n workers: 1,\n\n reporter: [['line']],\n\n globalSetup: './tests/setup/global.setup.ts',\n globalTeardown: './tests/setup/global.teardown.ts',\n\n use: {\n /* Base URL to use in actions like `await page.goto('/')`. */\n baseURL,\n },\n\n webServer: {\n command: `VITE_NODE_ENV=\"test\" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=hash vite build --outDir dist-hash && VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=hash pnpm preview --port ${PORT} --outDir dist-hash`,\n url: baseURL,\n reuseExistingServer: !process.env.CI,\n stdout: 'pipe',\n },\n\n projects: [\n {\n name: 'chromium',\n use: { ...devices['Desktop Chrome'] },\n },\n ],\n})\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/main.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n RouterProvider,\n createHashHistory,\n createRouter,\n} from '@tanstack/react-router'\nimport { routeTree } from './routeTree.gen'\nimport type { RouterHistory } from '@tanstack/react-router'\nimport './styles.css'\n\nlet history: RouterHistory | undefined\n\nif (import.meta.env.VITE_APP_HISTORY === 'hash') {\n history = createHashHistory()\n}\n\n// Set up a Router instance\nconst router = createRouter({\n routeTree,\n history,\n scrollRestoration: true,\n})\n\n// Register things for typesafety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: typeof router\n }\n}\n\nconst rootElement = document.getElementById('app')!\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement)\n root.render()\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/posts.tsx", "content": "import axios from 'redaxios'\n\nexport function sleep(ms: number) {\n return new Promise((r) => setTimeout(r, ms))\n}\n\nexport type PostType = {\n id: string\n title: string\n body: string\n}\n\nlet queryURL = 'https://jsonplaceholder.typicode.com'\n\nif (import.meta.env.VITE_NODE_ENV === 'test') {\n queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`\n}\n\nexport class PostNotFoundError extends Error {}\n\nexport const fetchPost = async (postId: string) => {\n console.info(`Fetching post with id ${postId}...`)\n const post = await axios\n .get(`${queryURL}/posts/${postId}`)\n .then((r) => r.data)\n .catch((err) => {\n if (err.status === 404) {\n throw new PostNotFoundError(`Post with id \"${postId}\" not found!`)\n }\n throw err\n })\n\n return post\n}\n\nexport const fetchPosts = async () => {\n console.info('Fetching posts...')\n return axios\n .get>(`${queryURL}/posts`)\n .then((r) => r.data.slice(0, 10))\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts", "content": "/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { createFileRoute } from '@tanstack/react-router'\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as IndexRouteImport } from './routes/index'\nimport { Route as testsPageWithSearchRouteImport } from './routes/(tests)/page-with-search'\nimport { Route as testsNormalPageRouteImport } from './routes/(tests)/normal-page'\nimport { Route as testsLazyWithLoaderPageRouteImport } from './routes/(tests)/lazy-with-loader-page'\nimport { Route as testsLazyPageRouteImport } from './routes/(tests)/lazy-page'\n\nconst testsVirtualPageLazyRouteImport = createFileRoute(\n '/(tests)/virtual-page',\n)()\n\nconst IndexRoute = IndexRouteImport.update({\n id: '/',\n path: '/',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst testsVirtualPageLazyRoute = testsVirtualPageLazyRouteImport\n .update({\n id: '/(tests)/virtual-page',\n path: '/virtual-page',\n getParentRoute: () => rootRouteImport,\n } as any)\n .lazy(() => import('./routes/(tests)/virtual-page.lazy').then((d) => d.Route))\nconst testsPageWithSearchRoute = testsPageWithSearchRouteImport.update({\n id: '/(tests)/page-with-search',\n path: '/page-with-search',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst testsNormalPageRoute = testsNormalPageRouteImport.update({\n id: '/(tests)/normal-page',\n path: '/normal-page',\n getParentRoute: () => rootRouteImport,\n} as any)\nconst testsLazyWithLoaderPageRoute = testsLazyWithLoaderPageRouteImport\n .update({\n id: '/(tests)/lazy-with-loader-page',\n path: '/lazy-with-loader-page',\n getParentRoute: () => rootRouteImport,\n } as any)\n .lazy(() =>\n import('./routes/(tests)/lazy-with-loader-page.lazy').then((d) => d.Route),\n )\nconst testsLazyPageRoute = testsLazyPageRouteImport\n .update({\n id: '/(tests)/lazy-page',\n path: '/lazy-page',\n getParentRoute: () => rootRouteImport,\n } as any)\n .lazy(() => import('./routes/(tests)/lazy-page.lazy').then((d) => d.Route))\n\nexport interface FileRoutesByFullPath {\n '/': typeof IndexRoute\n '/lazy-page': typeof testsLazyPageRoute\n '/lazy-with-loader-page': typeof testsLazyWithLoaderPageRoute\n '/normal-page': typeof testsNormalPageRoute\n '/page-with-search': typeof testsPageWithSearchRoute\n '/virtual-page': typeof testsVirtualPageLazyRoute\n}\nexport interface FileRoutesByTo {\n '/': typeof IndexRoute\n '/lazy-page': typeof testsLazyPageRoute\n '/lazy-with-loader-page': typeof testsLazyWithLoaderPageRoute\n '/normal-page': typeof testsNormalPageRoute\n '/page-with-search': typeof testsPageWithSearchRoute\n '/virtual-page': typeof testsVirtualPageLazyRoute\n}\nexport interface FileRoutesById {\n __root__: typeof rootRouteImport\n '/': typeof IndexRoute\n '/(tests)/lazy-page': typeof testsLazyPageRoute\n '/(tests)/lazy-with-loader-page': typeof testsLazyWithLoaderPageRoute\n '/(tests)/normal-page': typeof testsNormalPageRoute\n '/(tests)/page-with-search': typeof testsPageWithSearchRoute\n '/(tests)/virtual-page': typeof testsVirtualPageLazyRoute\n}\nexport interface FileRouteTypes {\n fileRoutesByFullPath: FileRoutesByFullPath\n fullPaths:\n | '/'\n | '/lazy-page'\n | '/lazy-with-loader-page'\n | '/normal-page'\n | '/page-with-search'\n | '/virtual-page'\n fileRoutesByTo: FileRoutesByTo\n to:\n | '/'\n | '/lazy-page'\n | '/lazy-with-loader-page'\n | '/normal-page'\n | '/page-with-search'\n | '/virtual-page'\n id:\n | '__root__'\n | '/'\n | '/(tests)/lazy-page'\n | '/(tests)/lazy-with-loader-page'\n | '/(tests)/normal-page'\n | '/(tests)/page-with-search'\n | '/(tests)/virtual-page'\n fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n IndexRoute: typeof IndexRoute\n testsLazyPageRoute: typeof testsLazyPageRoute\n testsLazyWithLoaderPageRoute: typeof testsLazyWithLoaderPageRoute\n testsNormalPageRoute: typeof testsNormalPageRoute\n testsPageWithSearchRoute: typeof testsPageWithSearchRoute\n testsVirtualPageLazyRoute: typeof testsVirtualPageLazyRoute\n}\n\ndeclare module '@tanstack/react-router' {\n interface FileRoutesByPath {\n '/': {\n id: '/'\n path: '/'\n fullPath: '/'\n preLoaderRoute: typeof IndexRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(tests)/virtual-page': {\n id: '/(tests)/virtual-page'\n path: '/virtual-page'\n fullPath: '/virtual-page'\n preLoaderRoute: typeof testsVirtualPageLazyRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(tests)/page-with-search': {\n id: '/(tests)/page-with-search'\n path: '/page-with-search'\n fullPath: '/page-with-search'\n preLoaderRoute: typeof testsPageWithSearchRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(tests)/normal-page': {\n id: '/(tests)/normal-page'\n path: '/normal-page'\n fullPath: '/normal-page'\n preLoaderRoute: typeof testsNormalPageRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(tests)/lazy-with-loader-page': {\n id: '/(tests)/lazy-with-loader-page'\n path: '/lazy-with-loader-page'\n fullPath: '/lazy-with-loader-page'\n preLoaderRoute: typeof testsLazyWithLoaderPageRouteImport\n parentRoute: typeof rootRouteImport\n }\n '/(tests)/lazy-page': {\n id: '/(tests)/lazy-page'\n path: '/lazy-page'\n fullPath: '/lazy-page'\n preLoaderRoute: typeof testsLazyPageRouteImport\n parentRoute: typeof rootRouteImport\n }\n }\n}\n\nconst rootRouteChildren: RootRouteChildren = {\n IndexRoute: IndexRoute,\n testsLazyPageRoute: testsLazyPageRoute,\n testsLazyWithLoaderPageRoute: testsLazyWithLoaderPageRoute,\n testsNormalPageRoute: testsNormalPageRoute,\n testsPageWithSearchRoute: testsPageWithSearchRoute,\n testsVirtualPageLazyRoute: testsVirtualPageLazyRoute,\n}\nexport const routeTree = rootRouteImport\n ._addFileChildren(rootRouteChildren)\n ._addFileTypes()\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx", "content": "import { createLazyFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nimport { ScrollBlock } from '../-components/scroll-block'\n\nexport const Route = createLazyFileRoute('/(tests)/lazy-page')({\n component: Component,\n})\n\nfunction Component() {\n return (\n
\n

lazy-page

\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nexport const Route = createFileRoute('/(tests)/lazy-page')({})\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx", "content": "import { createLazyFileRoute } from '@tanstack/react-router'\nimport { ScrollBlock } from '../-components/scroll-block'\n\nexport const Route = createLazyFileRoute('/(tests)/lazy-with-loader-page')({\n component: Component,\n})\n\nfunction Component() {\n return (\n
\n

lazy-with-loader-page

\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { sleep } from '../../posts'\n\nexport const Route = createFileRoute('/(tests)/lazy-with-loader-page')({\n loader: async () => {\n await sleep(1000)\n return { foo: 'bar' }\n },\n})\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nimport { ScrollBlock } from '../-components/scroll-block'\n\nexport const Route = createFileRoute('/(tests)/normal-page')({\n component: Component,\n})\n\nfunction Component() {\n return (\n
\n

normal-page

\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsx", "content": "import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { zodValidator } from '@tanstack/zod-adapter'\nimport { ScrollBlock } from '../-components/scroll-block'\n\nexport const Route = createFileRoute('/(tests)/page-with-search')({\n validateSearch: zodValidator(z.object({ where: z.string() })),\n component: Component,\n})\n\nfunction Component() {\n return (\n
\n

page-with-search

\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsx", "content": "import { createLazyFileRoute } from '@tanstack/react-router'\nimport * as React from 'react'\n\nimport { ScrollBlock } from '../-components/scroll-block'\n\nexport const Route = createLazyFileRoute('/(tests)/virtual-page')({\n component: Component,\n})\n\nfunction Component() {\n return (\n
\n

virtual-page

\n
\n \n
\n )\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/-components/scroll-block.tsx", "content": "export const atTheTopId = 'at-the-top'\nexport const atTheBottomId = 'at-the-bottom'\n\nexport function ScrollBlock({ number = 100 }: { number?: number }) {\n return (\n <>\n
\n {Array.from({ length: number }).map((_, i) => (\n
{i}
\n ))}\n
\n At the bottom\n
\n \n )\n}\n" }, { "path": "e2e/react-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx", "content": "import * as React from 'react'\nimport {\n Link,\n Outlet,\n createRootRoute,\n linkOptions,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nexport const Route = createRootRoute({\n component: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <>\n