compatible-crimson

my first layout

hi guys, im trying to create a layout for my / signin / signup pages but i must have missed something because i have an error that tells me my route is equivalent to '/', here is the file

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/(auth)/_auth')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/(auth)/_auth"!</div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/(auth)/_auth')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/(auth)/_auth"!</div>
}

does anyone have some clue ? thank you 🙂

21 Replies

extended-salmon•5mo ago

groups and layout routes starting with _ (pathless layouts) are not included in the url

extended-salmon•5mo ago

if you want a layout that is included in the url you can do it like this https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#layout-routes otherwise pathless layouts are not in the URL https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#pathless-layout-routes

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...

compatible-crimsonOP•5mo ago

i want my urls to be like '/' for the index (the landing page), '/signin'' for the signin page, '/signup' for the signup page, and a layout excluded from the url just wrapping my signup and signin for some shared ui, here is a screen of how i just tried (doesnt work)

compatible-crimsonOP•5mo ago

compatible-crimsonOP•5mo ago

ideally i would have want to wrap the 3 files in a grouped folder, maybe (auth) folder just for organisational purpose it is fixed right now, it seems like whatever i tried didnt work because i had a missing string in the routeTree file, manually adding it solved the issue

conventional-tan•5mo ago

you should never need to manually modify this file did you have the dev server running?

compatible-crimsonOP•5mo ago

yes it was running and gave me some error message telling me about that string missing thats why i went to look for it (we dont see the file in my screen because i hide it with vscode but its here). i "played" a lot with the files to understand routing so maybe it didnt like it so much lol 🙂 i mean, i played a lot with the routes file, not the the routeTree one (just added that string missing) anyway, its working now, if it happens again ill screen the message precisely. Enjoying the experience so far !

compatible-crimsonOP•5mo ago

export const Route = createFileRoute('/_private/wlog/$wlogId')({ (the error: Argument of type '"/_private/wlog/$wlogId"' is not assignable to parameter of type 'keyof FileRoutesByPath'.ts(2345) export const Route = createFileRoute('/_private/wlog')({ same error just tried to make a more intuitive routing and this broke again, with the routeTree going wild ^^ emptying the file and then restarting the server fixed it, but i guess i shouldnt have to do that

conventional-tan•5mo ago

don't open the route tree gen file just ignore it

conventional-tan•5mo ago

https://tanstack.com/router/latest/docs/framework/react/routing/installation-with-router-cli#ignoring-the-generated-route-tree-file

Installation with Router CLI | TanStack Router React Docs

[!WARNING] You should only use the TanStack Router CLI if you are not using a supported bundler. The CLI only supports the generation of the route tree file and does not provide any other features. To...

compatible-crimsonOP•5mo ago

i look at it when my app breaks and i got the errors in my route files, until i empty it and restarted the server so it can regenerate the file, the app was broken i dont have this cli installed, i have the vite plugin

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
    react(),
    tailwindcss()
  ]
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
    react(),
    tailwindcss()
  ]
})

{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@radix-ui/react-slot": "^1.2.0",
    "@tailwindcss/vite": "^4.1.4",
    "@tanstack/react-query": "^5.74.4",
    "@tanstack/react-router": "^1.116.0",
    "@tanstack/react-router-devtools": "^1.116.0",
    "@tanstack/zod-adapter": "^1.116.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.501.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.2.0",
    "tailwindcss": "^4.1.4",
    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.22.0",
    "@tanstack/router-plugin": "^1.116.1",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.22.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.26.1",
    "vite": "^6.3.1"
  }
}

{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@radix-ui/react-slot": "^1.2.0",
    "@tailwindcss/vite": "^4.1.4",
    "@tanstack/react-query": "^5.74.4",
    "@tanstack/react-router": "^1.116.0",
    "@tanstack/react-router-devtools": "^1.116.0",
    "@tanstack/zod-adapter": "^1.116.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.501.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.2.0",
    "tailwindcss": "^4.1.4",
    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.22.0",
    "@tanstack/router-plugin": "^1.116.1",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.22.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.26.1",
    "vite": "^6.3.1"
  }
}

conventional-tan•5mo ago

the ignore part is the same for all whether cli or vite plugin g

compatible-crimsonOP•5mo ago

i just hide the file and didnt open it, and just rename some files again in my routes to have a better naming here at some screens of the problem

compatible-crimsonOP•5mo ago

since i did it the same way than for the private, it should work for the _auth too, but is broken for now (i restarted the server) how am i supposed to fix it without emptying rhe routeTree file and restarting the server ? (the file is hidden by vscode right now, i didnt touch it at this point)

conventional-tan•5mo ago

could be a windows thing. are you running under wsl?

compatible-crimsonOP•5mo ago

no i am on a pure windows 10 + vscode powershell terminal inside vscode

conventional-tan•5mo ago

do you have wsl and could if it makes a difference? do you have wsl and could if it makes a difference?

compatible-crimsonOP•5mo ago

i will try for sure if i keep getting these errors

Gaming

Programming

my first layout

Did you find this page helpful?