T
TanStack•3y ago
flat-fuchsia

[Solved] Facing `Result_Code_Hung` When redirecting on load of a component

I have two navigate() calls that occur in quick succession that I believe cause an issue that causes the page to become unresponsive. I only have a few routes: 
const routeTree = rootRoute.addChildren([
    indexRoute,
    onboardingRoute,
    signUpRoute,
    signInRoute,
    OrgRoot,
])
const routeTree = rootRoute.addChildren([
    indexRoute,
    onboardingRoute,
    signUpRoute,
    signInRoute,
    OrgRoot,
])
On my sign in page, I redirect users to the OrgRoot component after a login 
                navigate(
                    {
                        from: props.IsSignUp ? signUpRoute.id : signInRoute.id,
                        to: OrgRoot.id,
                        replace: true,
                        search: {},
                        params: {
                            orgID: resp.orgID
                        },
                    })
                navigate(
                    {
                        from: props.IsSignUp ? signUpRoute.id : signInRoute.id,
                        to: OrgRoot.id,
                        replace: true,
                        search: {},
                        params: {
                            orgID: resp.orgID
                        },
                    })
If this is the only code that runs, it works. However, on the organization page, I call another check to see if a user needs to go through the onboarding step (a different URL). 
        useEffect(() => {
                if (data?.hasCreatedProject === false && !haveNavigated) {
                    console.log("data is false")
                    setHaveNavigated(true)
                    navigate(
                        {
                            to: onboardingRoute.id,
                            search: {},
                            params: {
                                orgID: params.orgID
                            },
                        }).then(() => window.alert("hello world, I have navigated"))
            }
        }, [data])
        useEffect(() => {
                if (data?.hasCreatedProject === false && !haveNavigated) {
                    console.log("data is false")
                    setHaveNavigated(true)
                    navigate(
                        {
                            to: onboardingRoute.id,
                            search: {},
                            params: {
                                orgID: params.orgID
                            },
                        }).then(() => window.alert("hello world, I have navigated"))
            }
        }, [data])
This appears to end up in a loop. The loop wasn't apparent at first, but if I wrap the navigate in a timeout, I see the window.alert trigger many times. However, according to my console, the useEffect block only runs twice (so the loop is likely related to the navigate call.
1 Reply
flat-fuchsia
flat-fuchsiaOP•3y ago
I think this is a sharp edge of route match priority. I changed my path from org/$orgID/onboarding to /onboarding/$orgID and it appears to be working

Did you find this page helpful?