Type error in `params.parse` callback with a route that include a path param

I have a file

src/routes/_restricted/projects/$projectId.content.tsx

src/routes/_restricted/projects/$projectId.content.tsx

with this code :

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

export const Route = createFileRoute(
  "/_restricted/projects/$projectId/content",
)({
  component: RouteComponent,
  params: {
    parse: (params) => {
      return { projectId: Number(params.projectId) };
      //                          ^? (parameter) params: Record<never, string>
    },
    stringify: (params) => {
      return { projectId: params.projectId.toString() };
    },
  },
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  console.log(projectId);
  //              ^? const projectId: number
  return (
    <div className="size-full"></div>
  );
}

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

export const Route = createFileRoute(
  "/_restricted/projects/$projectId/content",
)({
  component: RouteComponent,
  params: {
    parse: (params) => {
      return { projectId: Number(params.projectId) };
      //                          ^? (parameter) params: Record<never, string>
    },
    stringify: (params) => {
      return { projectId: params.projectId.toString() };
    },
  },
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  console.log(projectId);
  //              ^? const projectId: number
  return (
    <div className="size-full"></div>
  );
}

I don't know why I have this error on the

params.parse

params.parse

callback. Do you think it my be a bug?

I also have a

"/_restricted/projects/$projectId"

"/_restricted/projects/$projectId"

where it works correctly.

TanStack•11mo ago•

4 replies

wispy-olive

Type error in `params.parse` callback with a route that include a path param

I have a file

src/routes/_restricted/projects/$projectId.content.tsx

src/routes/_restricted/projects/$projectId.content.tsx

with this code :

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

export const Route = createFileRoute(
  "/_restricted/projects/$projectId/content",
)({
  component: RouteComponent,
  params: {
    parse: (params) => {
      return { projectId: Number(params.projectId) };
      //                          ^? (parameter) params: Record<never, string>
    },
    stringify: (params) => {
      return { projectId: params.projectId.toString() };
    },
  },
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  console.log(projectId);
  //              ^? const projectId: number
  return (
    <div className="size-full"></div>
  );
}

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

export const Route = createFileRoute(
  "/_restricted/projects/$projectId/content",
)({
  component: RouteComponent,
  params: {
    parse: (params) => {
      return { projectId: Number(params.projectId) };
      //                          ^? (parameter) params: Record<never, string>
    },
    stringify: (params) => {
      return { projectId: params.projectId.toString() };
    },
  },
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  console.log(projectId);
  //              ^? const projectId: number
  return (
    <div className="size-full"></div>
  );
}

I don't know why I have this error on the

params.parse

params.parse

callback. Do you think it my be a bug?

I also have a

"/_restricted/projects/$projectId"

"/_restricted/projects/$projectId"

where it works correctly.

Type error in `params.parse` callback with a route that include a path param

Similar Threads

Type error in `params.parse` callback with a route that include a path param

Similar Threads

Similar Threads

Similar Threads