component property should pass router props and state to the render component

[ImRLopezAG]

this feature request is very important because it will allow reduce the boilerplate of the component that we use as routes on file routes lets create some scenarios

before:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_base/test')({
  component: RouteComponent,
  loader: () => ['Test data loaded'],
})

function RouteComponent() {
  const data = Route.useLoaderData()
  return <div>{JSON.stringify(data)}</div>
}

after:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_base/test')({
  component: RouteComponent,
  loader: () => ['Test data loaded'],
})

function RouteComponent(route: RouterComponentProps<'/_base/test'>) {
  const data = route.useLoaderData()
  return <div>{JSON.stringify(data)}</div>
}

// or could be even better

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_base/test')({
  component: RouteComponent,
  loader: () => ['Test data loaded'],
})

function RouteComponent({ loaderData, params,  route, context, location }: RouterComponentProps<'/_base/test'>) {
  const data = loaderData
  return <div>{JSON.stringify(data)}</div>
}

Like this you can use on a big component or lets say a dashboard where you load the data ssr and create the dashboard on other file

before

import { Dashboard } from '@components/dashboards'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_base/')({
	component: Dashboard,
	loader: async ({ context: { rpc } }) => {
		return await rpc.dashboards.getCompliance()
	},
})

// src/components/dashboards.tsx

import { useLoaderData } from '@tanstack/react-router'

export function Dashboard() {
const data = useLoaderData({
  from: '/_base/dashboards'
})

// ... rest of your big component
}

if the feature is implemented would be like this at the end

// src/components/dashboards.tsx
export function Dashboard({loaderData: data}: RouterComponentProps<'/_base/'> ) {

// ... rest of your big component
}

Or other aproach is use directclly from the route declaration without create a component 

[schiller-manuel]

i don't see the appeal.
just to save one line const data = Route.useLoaderData() ?

[ImRLopezAG]

isn't just a line cause on the props you can have

function RouteComponent({ loaderData, params,  route, context, location, match }: RouterComponentProps<'/_base/test'>) {
}

and yo can use components of other file as I explain on the example where you don't want to have all the logic on the same file and dedicate the file route to handle auth, validation, ...etc. While the component that you import handle the result data, context, even helps you to avoid importing the router or location cause you will have on the props.