T
TanStack•10mo ago
mere-teal

Best approach to render a page based on param?

I have driveId as a param, but technically they are too different pages. My current approach would be to have a route.tsx for $driveId folder, and then determine which component (page) to load based on that, but I'm wondering if there is a better approach?
3 Replies
rival-black
rival-black•10mo ago
Can you give more context? is it different pages based on what the value of driveId is?
mere-teal
mere-tealOP•10mo ago
Yes - currently I have it like this 
function RouteComponent() {
  const loaderData = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();

  if (params.driveId === "foo") {
    return <Foo loaderData={loaderData} params={params} search={search} />;
  }

  if (params.driveId === "bar") {
    return (
      <Bar loaderData={loaderData} params={params} search={search} />
    );
  }
}
function RouteComponent() {
  const loaderData = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();

  if (params.driveId === "foo") {
    return <Foo loaderData={loaderData} params={params} search={search} />;
  }

  if (params.driveId === "bar") {
    return (
      <Bar loaderData={loaderData} params={params} search={search} />
    );
  }
}
Foo and Bar being regular components - but was curious if I can do this in a way where they are pages that can control their own loaders, etc
rival-black
rival-black•10mo ago
if you really need fully different pages based off the driveId instead of just different data, i wouldn't use a dynamic route segment with $. It would be best just to make each its own route. for example: users.foo.tsx users.bar.tsx

Did you find this page helpful?