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

- 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>;
}

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>;
}

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>;
}

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

http://localhost:3001/posts/24/edit

the output is

Hello posts.$24.tsx

Hello posts.$24.tsx

but it should be:

Hello posts.${postId}.edit.tsx

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?

TanStack•13mo 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

- 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>;
}

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>;
}

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>;
}

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

http://localhost:3001/posts/24/edit

the output is

Hello posts.$24.tsx

Hello posts.$24.tsx

but it should be:

Hello posts.${postId}.edit.tsx

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?

Nested Dynamic routes

Similar Threads

Nested Dynamic routes

Similar Threads

Similar Threads

Similar Threads