TanStackT
TanStack•12mo ago•
5 replies
scornful-crimson

Nested Dynamic routes

Hi!
It's probably my fault, but I can't find a solution! So my problem is that I have following structure:
- posts
  - index.tsx
  - $postId.tsx
  - $postId.edit.tsx

And following code to each file.
index.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/posts/')({
  component: RouteComponent,
});

function RouteComponent() {
  return <div>Hello posts.index.tsx</div>;
}

$postId.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/posts/$postId')({
  component: RouteComponent,
});

function RouteComponent() {
  const { postId } = Route.useParams();
  return <div>Hello posts.${postId}.tsx </div>;
}

$postId.edit.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/posts/$postId/edit')({
  component: RouteComponent,
});

function RouteComponent() {
  const { postId } = Route.useParams();

  return <div>Hello posts.${postId}.edit.tsx</div>;
}


but when I reach to http://localhost:3001/posts/24/edit the output is Hello posts.$24.tsx but it should be: Hello posts.${postId}.edit.tsx it's like *.edit.tsx doesn't work for some reason... But when I did same things with FLAT ROUTES it worked fine. Why is that?
Was this page helpful?