What is the cleanest way to pass route parameters to component files?

export const Route = createFileRoute("/projects_/$projectId")({
  component: RouteComponent,
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  const { tab } = Route.useSearch();

  return (
    <Project
      projectId={projectId}
      activeTab={tab}
    />
  );
}

//src/routes/projects_/$projectId.jsx
export const Route = createFileRoute("/projects_/$projectId")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <Project />
  );
}

//src/components/Project.jsx
import { useSearch, useParams } from "@tanstack/react-router";

function Project() {
    const {projectId} = useParams({from: "/projects_/$projectId"})
    ...
}

//src/routes/projects_/$projectId.jsx
export const Route = createFileRoute("/projects_/$projectId")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <Project />
  );
}

//src/components/Project.jsx
import { getRouteApi } from '@tanstack/react-router'

const route = getRouteApi("/projects_/$projectId")

function Project() {
  const {projectId} = route.useParams()

  return <div>...</div>
}