national-gold

Nested path being caught by parent route

I have two files - $breed.tsx - $breed.$subbbreed.tsx The nested route is being intercepted by the first route in file based routing. Am I doing something wrong?

7 Replies

national-goldOP•2y ago

xenial-black•2y ago

I can only guess since you did not provide a minimal complete example. $breed.tsx must contain an <Outlet /> so that $breed.$subbreed.tsx is rendered within it

national-goldOP•2y ago

No outlet in there. Looks like this

import {
  ErrorComponent,
  ErrorComponentProps,
  createFileRoute,
} from "@tanstack/react-router";
import { breedQueryOptions } from "../api/breedQueryOptions";
import { prettifyName } from "../utils";

export const Route = createFileRoute("/$breed")({
  loader: ({ context: { queryClient }, params: { breed, subbreed } }) =>
    queryClient.ensureQueryData(breedQueryOptions(breed, subbreed)),
  errorComponent: BreedErrorComponent as any,
  component: BreedComponent,
});

export function BreedErrorComponent({ error }: ErrorComponentProps) {
  if (error instanceof Error) {
    return <div>{error.message}</div>;
  }

  return <ErrorComponent error={error} />;
}

function BreedComponent() {
  const { breed, subbreed } = Route.useParams();
  const { message, isLoading, error } = Route.useLoaderData();

  if (isLoading) {
    // todo skele loaders
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Fetch error...</div>;
  }

  const prettifiedBreed = prettifyName(breed);
  console.log("$breed.tsx", breed, subbreed);
  return (
    <>
      <h2 className="text-4xl font-bold mb-5">{prettifiedBreed} pictures</h2>
      <div className="grid grid-cols-3 gap-[40px]">
        {message.slice(0, 12).map((url) => (
          <img
            className="w-full aspect-square rounded-lg"
            key={url}
            src={url}
          />
        ))}
      </div>
    </>
  );
}

import {
  ErrorComponent,
  ErrorComponentProps,
  createFileRoute,
} from "@tanstack/react-router";
import { breedQueryOptions } from "../api/breedQueryOptions";
import { prettifyName } from "../utils";

export const Route = createFileRoute("/$breed")({
  loader: ({ context: { queryClient }, params: { breed, subbreed } }) =>
    queryClient.ensureQueryData(breedQueryOptions(breed, subbreed)),
  errorComponent: BreedErrorComponent as any,
  component: BreedComponent,
});

export function BreedErrorComponent({ error }: ErrorComponentProps) {
  if (error instanceof Error) {
    return <div>{error.message}</div>;
  }

  return <ErrorComponent error={error} />;
}

function BreedComponent() {
  const { breed, subbreed } = Route.useParams();
  const { message, isLoading, error } = Route.useLoaderData();

  if (isLoading) {
    // todo skele loaders
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Fetch error...</div>;
  }

  const prettifiedBreed = prettifyName(breed);
  console.log("$breed.tsx", breed, subbreed);
  return (
    <>
      <h2 className="text-4xl font-bold mb-5">{prettifiedBreed} pictures</h2>
      <div className="grid grid-cols-3 gap-[40px]">
        {message.slice(0, 12).map((url) => (
          <img
            className="w-full aspect-square rounded-lg"
            key={url}
            src={url}
          />
        ))}
      </div>
    </>
  );
}

( i recently added subbreed while debugging, ignore )

xenial-black•2y ago

can you please provide a minimal complete example on stackblitz e.g. by forking one of the existing tanstack router examples?

national-goldOP•2y ago

Hmm everytime I try forking, I get this error. I'll try a few more things...

xenial-black•2y ago

try codesandbox instead?

national-goldOP•2y ago

The solution was with my file based routing naming:

src/routes
├── $breed
│   ├── $subbreed.tsx
│   └── index.tsx
├── __root.tsx
└── index.tsx

src/routes
├── $breed
│   ├── $subbreed.tsx
│   └── index.tsx
├── __root.tsx
└── index.tsx

Fixed it. For flat paths, $breed.index.tsx and $breed.$subbreed.tsx would fix it too. Thanks for the assist.

Gaming

Programming

Nested path being caught by parent route

Did you find this page helpful?