Type Inference with useParams and useSearch?

Hoping someone can help me understand why I am not seeing the correct types when using

useParams

useParams

and

useSearch

useSearch

. Here is the route definition:

export const resourceTabsSchema = z.object({
  tab: z
    .union([
      z.literal("comments"),
      z.literal("attachments"),
      z.literal("activity"),
    ])
    .optional(),
});

export const feedbackDetailRoute = new Route({
  path: "$id",
  component: FeedbackDetailsRoute,
  getParentRoute: () => feedbackRoute,
  validateSearch: resourceTabsSchema,
});

export const resourceTabsSchema = z.object({
  tab: z
    .union([
      z.literal("comments"),
      z.literal("attachments"),
      z.literal("activity"),
    ])
    .optional(),
});

export const feedbackDetailRoute = new Route({
  path: "$id",
  component: FeedbackDetailsRoute,
  getParentRoute: () => feedbackRoute,
  validateSearch: resourceTabsSchema,
});

And then in the component tree:

export function FeedbackDetailsRoute() {
    // id: any
    const { id } = useParams({ from: feedbackDetailRoute.id });

    // tab: any
    const { tab } = useSearch({ from: feedbackDetailRoute.id });
}

export function FeedbackDetailsRoute() {
    // id: any
    const { id } = useParams({ from: feedbackDetailRoute.id });

    // tab: any
    const { tab } = useSearch({ from: feedbackDetailRoute.id });
}

I am correct in assuming these should be typed accordingly?

TanStack•3y ago•

2 replies

verbal-lime

Type Inference with useParams and useSearch?

Hoping someone can help me understand why I am not seeing the correct types when using

useParams

useParams

and

useSearch

useSearch

. Here is the route definition:

export const resourceTabsSchema = z.object({
  tab: z
    .union([
      z.literal("comments"),
      z.literal("attachments"),
      z.literal("activity"),
    ])
    .optional(),
});

export const feedbackDetailRoute = new Route({
  path: "$id",
  component: FeedbackDetailsRoute,
  getParentRoute: () => feedbackRoute,
  validateSearch: resourceTabsSchema,
});

export const resourceTabsSchema = z.object({
  tab: z
    .union([
      z.literal("comments"),
      z.literal("attachments"),
      z.literal("activity"),
    ])
    .optional(),
});

export const feedbackDetailRoute = new Route({
  path: "$id",
  component: FeedbackDetailsRoute,
  getParentRoute: () => feedbackRoute,
  validateSearch: resourceTabsSchema,
});

And then in the component tree:

export function FeedbackDetailsRoute() {
    // id: any
    const { id } = useParams({ from: feedbackDetailRoute.id });

    // tab: any
    const { tab } = useSearch({ from: feedbackDetailRoute.id });
}

export function FeedbackDetailsRoute() {
    // id: any
    const { id } = useParams({ from: feedbackDetailRoute.id });

    // tab: any
    const { tab } = useSearch({ from: feedbackDetailRoute.id });
}

I am correct in assuming these should be typed accordingly?

Type Inference with useParams and useSearch?

Similar Threads

Type Inference with useParams and useSearch?

Similar Threads

Similar Threads

Similar Threads