Is it a good idea to pass the route to a Component?

Hey

,

I want to have access to the

route.fullPath

route.fullPath

or the

route.id

route.id

and the numerous hooks at a child component.

Here's my code:

import { createFileRoute } from "@tanstack/react-router";

import { CreateForm } from "@/features/create-vouchers";
import { Loading } from "shared-ui/loading";
import { Alert } from "shared-ui/alert";

export const Route = createFileRoute("/app/vouchers/creation/create")({
  pendingComponent: () => <Loading size="md" />,
  errorComponent: ({ error }) => (
    <Alert type="error">{error.errorMessage}</Alert>
  ),
  component: CreateComponent,
});

function CreateComponent() {
  return <CreateForm route={Route} />;
}

import { createFileRoute } from "@tanstack/react-router";

import { CreateForm } from "@/features/create-vouchers";
import { Loading } from "shared-ui/loading";
import { Alert } from "shared-ui/alert";

export const Route = createFileRoute("/app/vouchers/creation/create")({
  pendingComponent: () => <Loading size="md" />,
  errorComponent: ({ error }) => (
    <Alert type="error">{error.errorMessage}</Alert>
  ),
  component: CreateComponent,
});

function CreateComponent() {
  return <CreateForm route={Route} />;
}

Can you tell me whether this is a good idea or how you solve it? I want to navigate in the child component and I need the

route.id

route.id

for this.

Thanks

TanStack•2y ago•

13 replies

verbal-lime

Is it a good idea to pass the route to a Component?

Hey

,

I want to have access to the

route.fullPath

route.fullPath

or the

route.id

route.id

and the numerous hooks at a child component.

Here's my code:

import { createFileRoute } from "@tanstack/react-router";

import { CreateForm } from "@/features/create-vouchers";
import { Loading } from "shared-ui/loading";
import { Alert } from "shared-ui/alert";

export const Route = createFileRoute("/app/vouchers/creation/create")({
  pendingComponent: () => <Loading size="md" />,
  errorComponent: ({ error }) => (
    <Alert type="error">{error.errorMessage}</Alert>
  ),
  component: CreateComponent,
});

function CreateComponent() {
  return <CreateForm route={Route} />;
}

import { createFileRoute } from "@tanstack/react-router";

import { CreateForm } from "@/features/create-vouchers";
import { Loading } from "shared-ui/loading";
import { Alert } from "shared-ui/alert";

export const Route = createFileRoute("/app/vouchers/creation/create")({
  pendingComponent: () => <Loading size="md" />,
  errorComponent: ({ error }) => (
    <Alert type="error">{error.errorMessage}</Alert>
  ),
  component: CreateComponent,
});

function CreateComponent() {
  return <CreateForm route={Route} />;
}

Can you tell me whether this is a good idea or how you solve it? I want to navigate in the child component and I need the

route.id

route.id

for this.

Thanks

Is it a good idea to pass the route to a Component?

Similar Threads

Is it a good idea to pass the route to a Component?

Similar Threads

Similar Threads

Similar Threads