wispy-olive

Set default child route

Hello, I already have a solution working for this, but I'm just checking to see if there's a better way to do what I'm trying to do here, or if I shouldn't be trying to do this at all and I should be using a different structure.

Lets say for an example my site has pages for "groups", with subpages to view a group's members and to view posts made within the group. There is no page for just the group itself, only these views of either the members or posts, and one must always be selected. To model this via the router, I have a parent route

group.$id

group.$id

and the child routes

group.$id.$members

group.$id.$members

and

group.$id.posts

group.$id.posts

. When a user navigates to just

https://example.com/group/123

https://example.com/group/123

in their browser, I have it set up to automatically redirect them to a "default" child route, such as

https://example.com/group/123/posts

https://example.com/group/123/posts

. To do this, I check in

group.$id

group.$id

's beforeLoad function for if it is the "leaf" of the URL, as in the current route is none of its children, since the beforeLoad also runs for all of the child routes. If it is the current leaf route, I

throw redirect({ to: "/group/$id/posts", params })

throw redirect({ to: "/group/$id/posts", params })

to redirect the user automatically. I wrote a custom function to detect if the current route is the left or not as shown below:

export function isLeaf(matches: MakeRouteMatchUnion<AnyRouter>[], route: AnyRoute): boolean {
    return matches.at(-1)?.fullPath === route.id;
}

// use it as so...
beforeLoad: ({ matches, params }) => {
    if (isLeaf(matches, Route)) {
        throw redirect(/* ... */);
    }
},

export function isLeaf(matches: MakeRouteMatchUnion<AnyRouter>[], route: AnyRoute): boolean {
    return matches.at(-1)?.fullPath === route.id;
}

// use it as so...
beforeLoad: ({ matches, params }) => {
    if (isLeaf(matches, Route)) {
        throw redirect(/* ... */);
    }
},

Is this how I should be going about this, or is there a better way?

TanStack•13mo ago

wispy-olive

Set default child route

group.$id

group.$id

and the child routes

group.$id.$members

group.$id.$members

and

group.$id.posts

group.$id.posts

. When a user navigates to just

https://example.com/group/123

https://example.com/group/123

in their browser, I have it set up to automatically redirect them to a "default" child route, such as

https://example.com/group/123/posts

https://example.com/group/123/posts

. To do this, I check in

group.$id

group.$id

throw redirect({ to: "/group/$id/posts", params })

throw redirect({ to: "/group/$id/posts", params })

to redirect the user automatically. I wrote a custom function to detect if the current route is the left or not as shown below:

export function isLeaf(matches: MakeRouteMatchUnion<AnyRouter>[], route: AnyRoute): boolean {
    return matches.at(-1)?.fullPath === route.id;
}

// use it as so...
beforeLoad: ({ matches, params }) => {
    if (isLeaf(matches, Route)) {
        throw redirect(/* ... */);
    }
},

export function isLeaf(matches: MakeRouteMatchUnion<AnyRouter>[], route: AnyRoute): boolean {
    return matches.at(-1)?.fullPath === route.id;
}

// use it as so...
beforeLoad: ({ matches, params }) => {
    if (isLeaf(matches, Route)) {
        throw redirect(/* ... */);
    }
},

Is this how I should be going about this, or is there a better way?

Set default child route

Similar Threads

Set default child route

Similar Threads

Similar Threads

Similar Threads