sunny-green

How to redirect to a default child route?

What's the best way to automatically redirect from a parent route to a default child route? Let's say we have an editorRoute:

export const editorRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: "/editor",
    component: React.memo(Editor),
})

export const editorRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: "/editor",
    component: React.memo(Editor),
})

and some child routes including this one:

const editorRoomsRoute = createRoute({
    getParentRoute: () => editorRoute,
    path: "rooms",
    component: React.memo(Rooms),
})

const editorRoomsRoute = createRoute({
    getParentRoute: () => editorRoute,
    path: "rooms",
    component: React.memo(Rooms),
})

All the routes under /editor use the layout declared in the Editor component. Since /editor path by itself does not display anything meaningful, I want it to automatically redirect to /editor/rooms. What would be the best way and place to do that?

13 Replies

extended-salmon•16mo ago

create a child route with path: '/' and redirect in beforeLoad with throw redirect 🙂

rare-sapphire•16mo ago

you can create an index route like

createRoute({
getParentRoute: () => editorRoute,
path: '/'
beforeLoad: () => {
throw redirect({to: '/editor/rooms'});
}

createRoute({
getParentRoute: () => editorRoute,
path: '/'
beforeLoad: () => {
throw redirect({to: '/editor/rooms'});
}

sunny-greenOP•16mo ago

Awesome! Thanks!

fair-rose•9mo ago

Having a similar issue and we're using file based routing. Could use some help, I'm sure it's something simple but spending way too much time on it.

import { createFileRoute, linkOptions, redirect } from '@tanstack/react-router';
export const Route = createFileRoute('/_auth/dashboard/')({
  beforeLoad: ({ context: { user } }) => {
    if (user?.publicMetadata.isSuperAdmin) {
      throw redirect({
        to: '/dashboard/companies',
      });
    }

    throw redirect({
      to: '/dashboard/requests',
    });
  },
});

export const dashboardIndexLinkOptions = linkOptions({
  to: '/dashboard',
});

import { createFileRoute, linkOptions, redirect } from '@tanstack/react-router';
export const Route = createFileRoute('/_auth/dashboard/')({
  beforeLoad: ({ context: { user } }) => {
    if (user?.publicMetadata.isSuperAdmin) {
      throw redirect({
        to: '/dashboard/companies',
      });
    }

    throw redirect({
      to: '/dashboard/requests',
    });
  },
});

export const dashboardIndexLinkOptions = linkOptions({
  to: '/dashboard',
});

/dashboard itself doesn't have content, so we redirect based on role... but this redirects for every child route when navigating directly to it or refreshing (i.e. /dashboard/invoices will redirect to /requests for regular users). Thank you so much!

deep-jade•9mo ago

same solution as above.create an index route and throw the redirect there

fair-rose•9mo ago

Apologies if I'm being obtuse (likely the case), the route I posted is our index route. It's _auth.dashboard.index.tsx

deep-jade•9mo ago

right I didn't notice that sorry can you please provide a minimal complete example? on Stackblitz ideally

fair-rose•9mo ago

Sure thing will do! Thanks very much, Manuel!

deep-jade•9mo ago

the redirect being thrown in the index route should not affect children as the index is a leaf

fair-rose•9mo ago

Wow, sorry for wasting your time, but thanks for suggesting a minimal repro. Could not repro. It turns out it was my redirect handling on the child route which is based on authenticated user state. I was not returning early if the user state wasn't defined yet, so it fell through to the default redirect to /requests. Have a wonderful day! Just wanted to say I appreciate everything you folks are doing with these libraries. They're great to work with and make dev life much easier. 🙂

deep-jade•9mo ago

glad you found your issue

eager-peach•8mo ago

with fileRouter the file route the index route is loaded with child routes as well - so it keeps throwing. Is there another way to do this?

deep-jade•8mo ago

unclear to me what you mean. can you please create a complete minimal example (e.g. by forking one of the existing examples on stackblitz)?

Gaming

Programming

How to redirect to a default child route?

Did you find this page helpful?