eager-peach

Throwing a not found route with Navigate?

When a user hits a dynamic path that's incorrect (i.e. not their org/team id), how might i throw them to the 404/not found? I imagine it's actually better to redirect them to a dynamic path with their correct id. but this navigate doesn't seem to fire off when the teamId ==! orgId either to a 404 or a dynamic path with their correct id in this example i edited the teamId of the URL edit: i realize I am passing the modified $teamId around (not fetching the real id in different places so i need to refactor alittle). unless the 404 thing is still an issue but i think its not redirecting with the correct id as i menitoned

6 Replies

optimistic-gold•2y ago

Does your Navigate to teamid/properties at the end there work? If so can you tell me which version you are using, because similar is not working for me at all

eager-peachOP•2y ago

i am on 0.226 but yeah doesn't work for me. if i refresh the url with a mismatched $teamId in my case, nothing happens. @Tanner Linsley any thoughts? I also added my clerk stuff to the RouterProvider as context but since i'm working in the root with AuthCheck not sure if there might be issues. I tried using useEffect but don't think this is working.. or at least haven't quite figured it out but seems like i have to add Navigate components across different routes to redirect as need if i stick with this i'm sure there's a better solution

export function Root() {
    const context = useRouteContext({ from: '__root__' })
    console.log({ context })  // 

    return (
        <>
            <SignedIn>
                <AuthCheck />
                <Outlet />
            </SignedIn>
            <SignedOut>
                <Navigate to='/login' />
                <Outlet />
            </SignedOut>
            <TanStackRouterDevtools />
        </>
    )
}

export function Root() {
    const context = useRouteContext({ from: '__root__' })
    console.log({ context })  // 

    return (
        <>
            <SignedIn>
                <AuthCheck />
                <Outlet />
            </SignedIn>
            <SignedOut>
                <Navigate to='/login' />
                <Outlet />
            </SignedOut>
            <TanStackRouterDevtools />
        </>
    )
}

optimistic-gold•2y ago

Your task is probably twice as confusing as it needs to be as long as this issue is around: https://github.com/TanStack/router/issues/801

GitHub

Returning causes the URL to change but not the content · Issue #80...

Describe the bug When returning <Navigate> from a component, it will update the URL but return the content of the original URL. However, when the <Navigate> is returned conditionally, i...

eager-peachOP•2y ago

oh, good find. I guess i will just come back to this later and hopefully there's a solution sometime soon

optimistic-gold•2y ago

Fyi it's not an issue in 194. If you get desperate

eager-peachOP•2y ago

I think the other issue i've got is I pass the objects returned from the clerk org and user hooks so i have access to say an organization?.id property, but organization can return null or undefined. Not quite sure how i can check that organization is defined and then all the way down the route tree i don't need ot check it again. but anytime i access it from const context = useRouteContext({...}) it can be undefined. And what's going on is i'm noticing when rendering it will flip between undefined -> defined -> undefined so kind of confused hwo to deal with it. If i check (!orgId) -> navigate to select-team then it ends up in an infinite loop. but i am tired

interface MyRouterContext {
    user: ReturnType<typeof useUser>
    organization: ReturnType<typeof useOrganization>
}

export const rootRoute = rootRouteWithContext<MyRouterContext>()({
    component: Root,
})

interface MyRouterContext {
    user: ReturnType<typeof useUser>
    organization: ReturnType<typeof useOrganization>
}

export const rootRoute = rootRouteWithContext<MyRouterContext>()({
    component: Root,
})

Gaming

Programming

Throwing a not found route with Navigate?

Did you find this page helpful?