TanStackT
TanStack•3mo ago•
21 replies
wet-harlequin

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

I have an nested <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>;
}


When navigate({...}) is called, the 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>;
}


I'm not sure what I'm doing wrong that causes a temporary "null" outlet before navigation completes, it looks like <Navigate /> component calls 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>;
}
image.png
Was this page helpful?