Error: Redirecting from parent to child on load

I think what I'm doing has a better solution, but I'm not sure what to do. I have a folder structure that looks something like this:

routes
  parent
    child-1.tsx
    child-2.tsx
    child-3.tsx
    route.tsx

routes
  parent
    child-1.tsx
    child-2.tsx
    child-3.tsx
    route.tsx

routes
  parent
    child-1.tsx
    child-2.tsx
    child-3.tsx
    route.tsx

routes
  parent
    child-1.tsx
    child-2.tsx
    child-3.tsx
    route.tsx

I've added a redirect in

route.tsx

route.tsx

route.tsx

route.tsx that looks like this:

export const Route = createFileRoute("/parent")({
  component: ParentComponent,
  loader: () => {
    throw redirect({to: '/parent/child-1'})
  }
})

export const Route = createFileRoute("/parent")({
  component: ParentComponent,
  loader: () => {
    throw redirect({to: '/parent/child-1'})
  }
})

export const Route = createFileRoute("/parent")({
  component: ParentComponent,
  loader: () => {
    throw redirect({to: '/parent/child-1'})
  }
})

export const Route = createFileRoute("/parent")({
  component: ParentComponent,
  loader: () => {
    throw redirect({to: '/parent/child-1'})
  }
})

When I go to

mywebsite.com/parent/child-1

mywebsite.com/parent/child-1

mywebsite.com/parent/child-1

mywebsite.com/parent/child-1 it all works fine, but if I go to

mywebsite.com/parent

mywebsite.com/parent

mywebsite.com/parent

mywebsite.com/parent I want it to redirect to

child-1

child-1

child-1

child-1.

The problem is that I can get it to redirect properly but none of the content from

child-1.tsx

child-1.tsx

child-1.tsx

child-1.tsx or

route.tsx

route.tsx

route.tsx

route.tsx is showing. The page is just blank.