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

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

/editor

use the layout declared in the

Editor

Editor

component.

Since

/editor

/editor

path by itself does not display anything meaningful, I want it to automatically redirect to

/editor/rooms

/editor/rooms

.

What would be the best way and place to do that?

TanStack•2y ago•

17 replies

rubber-blue