T
TanStack•2y ago
stormy-gold

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
I've added a redirect in 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'})
  }
})
When I go to mywebsite.com/parent/child-1 it all works fine, but if I go to mywebsite.com/parent I want it to redirect to child-1. The problem is that I can get it to redirect properly but none of the content from child-1.tsx or route.tsx is showing. The page is just blank.
10 Replies
rare-sapphire
rare-sapphire•2y ago
You should use redirect inside beforeLoad function instead as it's a better integration. But it should work either inside loader I think
stormy-gold
stormy-goldOP•2y ago
Yeah I've tried with beforeLoad too and it errors: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition
rare-sapphire
rare-sapphire•2y ago
does it work if you remove your parent component ?
stormy-gold
stormy-goldOP•2y ago
The route.tsx?
rare-sapphire
rare-sapphire•2y ago
the component property in your createFileRoute Ok I understand you're actually throwing an redirect in a layout that is used in the redirect path. So you're permanently redirecting your app What you want is redirecting to /child-1 if you're on the path /parent/, right ?
stormy-gold
stormy-goldOP•2y ago
Yes!
rare-sapphire
rare-sapphire•2y ago
Then you should use the before load and redirect inside a file called index.tsx For example. if you're on the page /parent/child-1, then the files parent/route.tsx and child-1.index.tsx are called. If you're on the page /parent, then the file parent/index.tsx is called a child route is rendered inside the outlet of it's parent route. An Outlet cannot be used in an index route as it cannot have a child route.
stormy-gold
stormy-goldOP•2y ago
Thank you for the explanation! It all makes sense when you start having the applicable problems 😄
rare-sapphire
rare-sapphire•2y ago
No problem !
stormy-gold
stormy-goldOP•2y ago
Solution In the Kitchen Sink example I found this: 
dashboard.invoices.$invoiceId.tsx
dashboard.invoices.index.tsx
dashboard.invoices.tsx
dashboard.invoices.$invoiceId.tsx
dashboard.invoices.index.tsx
dashboard.invoices.tsx
and it took me a little while to realize that it translates to this: 
dashboard
  invoices
    route.tsx
    index.tsx
    $invoiceId.tsx   
dashboard
  invoices
    route.tsx
    index.tsx
    $invoiceId.tsx
With that realization I fixed my issue by doing this: 
parent
  route.tsx  <-- menu & outlet
  index.tsx  <-- beforeLoad & redirect
  child-1.tsx   
  ...
parent
  route.tsx  <-- menu & outlet
  index.tsx  <-- beforeLoad & redirect
  child-1.tsx   
  ...

Did you find this page helpful?