T
TanStack•2w ago
stormy-gold

Using prefixes in route paths and layouts like `/@{$username}`

migrating from next to start and struggling to get this setup working. nextjs router setup: 
app/
  - profile/[username]/layout.tsx
  - profile/[username]/page.tsx
  - profile/[username]/nested/page.tsx
  - profile/[username]/nested/deep/page.tsx
app/
  - profile/[username]/layout.tsx
  - profile/[username]/page.tsx
  - profile/[username]/nested/page.tsx
  - profile/[username]/nested/deep/page.tsx
this is accompanied with a rewrite in the next config like so, which accomplishes the /@username route 
async rewrites() {
  return [
    {
      source: "/@:username/progress",
      destination: "/profile/:username/nested",
    },
    {
      source: "/@:username/nested/deep",
      destination: "/profile/:username/nested/deep",
    },
    {
      source: "/@:username",
      destination: "/profile/:username",
    },
  ];
}
async rewrites() {
  return [
    {
      source: "/@:username/progress",
      destination: "/profile/:username/nested",
    },
    {
      source: "/@:username/nested/deep",
      destination: "/profile/:username/nested/deep",
    },
    {
      source: "/@:username",
      destination: "/profile/:username",
    },
  ];
}
i currently have: 
routes/
  - (profile)/@$username.tsx - layout
  - (profile)/@$username.index.tsx - root path
  - (profile)/@$username.progress.tsx - nested path
  - (profile)/@$username/nested/deep.tsx - second nested
routes/
  - (profile)/@$username.tsx - layout
  - (profile)/@$username.index.tsx - root path
  - (profile)/@$username.progress.tsx - nested path
  - (profile)/@$username/nested/deep.tsx - second nested
with this setup, the notFoundComponent defined in __root is triggering for any /@username route. i'm sure this is something incredibly simple and i'm just misunderstanding how layouts work
3 Replies
harsh-harlequin
harsh-harlequin•2w ago
this is how you define a prefix https://tanstack.com/router/latest/docs/framework/solid/guide/path-params#defining-prefixes
Path Params | TanStack Router Solid Docs
Path params are used to match a single segment (the text until the next /) and provide its value back to you as a named variable. They are defined by using the $ character prefix in the path, followed...
harsh-harlequin
harsh-harlequin•2w ago
in your case: @{$username}.tsx
stormy-gold
stormy-goldOP•2w ago
perfect, knew it had to be that simple. thanks!

Did you find this page helpful?