TanStack•4mo ago•

21 replies

wet-harlequin

Different pending routing behavior between <Navigate /> and navigate({...})

reacttypescript

I have an nested

<Outlet />

<Outlet />

in my application which controls a stepper flow, the content below is what is rendered by the deeper <Outlet />.

Only the <Navigate /> component renders the inner <Outlet /> as null for a moment causing a weird visual appearance.

export function RouteComponent() {
    const query = useQuery({...});

    if (query.data?.specialStatus === "done") {
        return <Navigate to="/path/to/my/thing" />
    }

    return <div>...</div>;
}

export function RouteComponent() {
    const query = useQuery({...});

    if (query.data?.specialStatus === "done") {
        return <Navigate to="/path/to/my/thing" />
    }

    return <div>...</div>;
}

When

navigate({...})

navigate({...})

is called, the

isPending: true

isPending: true

flag is set, and we navigate to the specified route with the pending component shown until data loads.

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    if (query.data?.specialStatus === "done") {
        navigate({ to: "/path/to/my/thing" });
    }

    return <div>...</div>;
}

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    if (query.data?.specialStatus === "done") {
        navigate({ to: "/path/to/my/thing" });
    }

    return <div>...</div>;
}

I'm not sure what I'm doing wrong that causes a temporary "null" outlet before navigation completes, it looks like

<Navigate />

<Navigate />

component calls

navigate({...})

navigate({...})

within a useEffect hook versus calling it directly in the component.

This also works with the transition state working as expected (no null <Outlet /> rendered).

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    useEffect(() => {
        if (query.data?.specialStatus === "done") {
            navigate({ to: "/path/to/my/thing" });
        }
    }, [navigate, query.data?.specialStatus]);

    return <div>...</div>;
}

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    useEffect(() => {
        if (query.data?.specialStatus === "done") {
            navigate({ to: "/path/to/my/thing" });
        }
    }, [navigate, query.data?.specialStatus]);

    return <div>...</div>;
}

TanStack•4mo ago•

21 replies

wet-harlequin

Different pending routing behavior between <Navigate /> and navigate({...})

reacttypescript

I have an nested

<Outlet />

<Outlet />

export function RouteComponent() {
    const query = useQuery({...});

    if (query.data?.specialStatus === "done") {
        return <Navigate to="/path/to/my/thing" />
    }

    return <div>...</div>;
}

export function RouteComponent() {
    const query = useQuery({...});

    if (query.data?.specialStatus === "done") {
        return <Navigate to="/path/to/my/thing" />
    }

    return <div>...</div>;
}

When

navigate({...})

navigate({...})

is called, the

isPending: true

isPending: true

flag is set, and we navigate to the specified route with the pending component shown until data loads.

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    if (query.data?.specialStatus === "done") {
        navigate({ to: "/path/to/my/thing" });
    }

    return <div>...</div>;
}

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    if (query.data?.specialStatus === "done") {
        navigate({ to: "/path/to/my/thing" });
    }

    return <div>...</div>;
}

I'm not sure what I'm doing wrong that causes a temporary "null" outlet before navigation completes, it looks like

<Navigate />

<Navigate />

component calls

navigate({...})

navigate({...})

within a useEffect hook versus calling it directly in the component.

This also works with the transition state working as expected (no null <Outlet /> rendered).

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    useEffect(() => {
        if (query.data?.specialStatus === "done") {
            navigate({ to: "/path/to/my/thing" });
        }
    }, [navigate, query.data?.specialStatus]);

    return <div>...</div>;
}

export function RouteComponent() {
    const query = useQuery({...});
    const navigate = useNavigate();

    useEffect(() => {
        if (query.data?.specialStatus === "done") {
            navigate({ to: "/path/to/my/thing" });
        }
    }, [navigate, query.data?.specialStatus]);

    return <div>...</div>;
}

Different pending routing behavior between <Navigate /> and navigate({...})

Similar Threads

Different pending routing behavior between <Navigate /> and navigate({...})

Similar Threads

Similar Threads

Similar Threads