metropolitan-bronze

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 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?

5 Replies

quickest-silver•7mo ago

Could you try renaming your $postId.tsx file to $postId.index.tsx?

metropolitan-bronzeOP•7mo ago

when i renamed it I have following typescript error:

Argument of type '"/posts/$postId/"' is not assignable to parameter of type 'keyof FileRoutesByPath'.ts(2345)

Argument of type '"/posts/$postId/"' is not assignable to parameter of type 'keyof FileRoutesByPath'.ts(2345)

in here: export const Route = createFileRoute('/posts/$postId/')({ component: RouteComponent, }); and it's not working ;/

wise-white•7mo ago

Hmm. Can you try $postId_.edit.tsx? It would opt you out of the parent since you’re not wanting to share the “layout” of $postId. Otherwise you’d need an Outlet on the $postId route

metropolitan-bronzeOP•7mo ago

Works fine! THanks @Eric Chernuka 🙂

wise-white•7mo ago

Amazing! Glad you’re good to go.

Gaming

Programming

Nested Dynamic routes

Did you find this page helpful?