Redirect Not Working as Expected in @tanstack/react-router v1.31.1

acoBOYZ commented 2 weeks ago

Describe the bug

In @tanstack/react-router version 1.31.1, when i using the beforeLoad method to perform a redirect, the URL changes but the page does not navigate to the new destination. Instead, it stays on the same page. This issue occurs when trying to redirect based on authentication state in my code as you can see below.

` import PublicLayout from '@/layouts/PublicLayout' import { authenticated } from '@/lib/authUtils' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_public-layout')({ beforeLoad({ context }) { authenticated(context.auth) }, component: PublicLayout }) ... export function authenticated(auth: AuthContextType) { if (auth.isAuthenticated) { throw redirect({ to: appConfig.DEFAULT_PAGE }) } } `

Your Example Website or App

The issue can be reproduced in any basic authentication flow implemented with @tanstack/react-router where conditional redirects are used to handle authenticated and unauthenticated states. Unfortunately, I cannot provide a live URL as this is running locally, but I can provide a sample repository if required.

Steps to Reproduce the Bug or Issue

Set up @tanstack/react-router in a React project.
Implement authentication checks in the beforeLoad method.
Use the redirect function to redirect unauthenticated users to a login page.
Notice that the URL in the browser changes, but the page content remains the same.

Expected behavior

When a user is not authenticated, and the redirect function is called within beforeLoad, I expect the application to navigate to the specified login page and not just change the URL. Same is for the scenario otherwise.

Screenshots or Videos

No response

Platform

OS: macOS - 14.4.1
Browser: Chrome
Version: 119.0.6045.159 (Official Build) (arm64)

Additional context

No response

j-mcfarlane commented 2 weeks ago

I am having the same issue

Winterson-Islary commented 2 weeks ago

Same here. The page stays empty unless manually refreshed.

bhaleraosaurabh commented 2 weeks ago

Facing the same issue. The page content does not load. The page has to be manually refreshed for the content to be loaded.

maksymskuibida commented 2 weeks ago

Facing the ame issue, but only if there is two redirects in row. For example, if I have $lang in path param and all pages starts from $lang. So, if user open link with no path, first redirect is to /$lang and than in $lang/_authorised to $lang/login.

I have already fixed it by changin logic to redirect to /$lang/login on start, if there is no $lang param, but also user is not authorised

schiller-manuel commented 2 weeks ago

does this still occur with v 1.31.2?

StephenSHorton commented 2 weeks ago

does this still occur with v 1.31.2?

Well, it navigates now but the location (URL) does not change.

j-mcfarlane commented 2 weeks ago

Im getting the opposite, still same problem. If I have /dashboard and check the context I can see auth is false - the redirect changes my url to /login as expected but the components that are rendered are my dashboard even with an unauthenticated user. If I click refresh it becomes the correct /login page

Will triple check to see if I had any cached versions of my project.

maksymskuibida commented 2 weeks ago

does this still occur with v 1.31.2?

For me 1.31.2 fixed redirect when there is only one redirect in row, but if there are two or more redirects in row it does not work. I fixed it in my code, so I do not do two redirects in row for now, but sometimes it can happen, so, I think it should work, doesn't matter is it 1 or 10 redirects in row

acoBOYZ commented 2 weeks ago

I recently updated to version 1.31.3 and noticed that the router.invalidate() issue seems to be resolved. However, the "throw redirect" functionality is still problematic.

Here's what I encountered with this new update:

If a user is unauthenticated, I redirect them to the "/login" page from a route defined in a "_layout" file. This redirects successfully to the "/login" page, except:
In previous versions of @tanstack/react-router, an authenticated user wouldn't see the login page and would be redirected directly to their destination. But now, the "/login" page renders first, and then the user is redirected to their authenticated destination.
If an unauthenticated user tries to navigate to a protected page like "/dashboard," they can still navigate there. Normally, a beforeLoad function in the '/_public-layout' should redirect them to the "/login" page, but this isn't working for me now.

Here's the code I use for redirect checks:

//Filename:  _public-layout.tsx
...
export const Route = createFileRoute('/_public-layout')({
beforeLoad({ context }) {
authenticated(context.auth);
},
component: PublicLayout,
});

//Filename: _layout.tsx
...
export const Route is createFileRoute('/_layout')({
beforeLoad({ context, location }) {
unauthenticated(context.auth, location);
},
component: AuthLayout,
});

//Filename: authUtils.ts
...
export function unauthenticated(auth: AuthContextType, location: ParsedLocation) {
    if (!auth.isAuthenticated) {
        throw redirect({
            to: appConfig.LOGIN_PAGE,
            search: {
                redirect: location.href
            }
        })
    }
}

export function authenticated(auth: AuthContextType) {
    if (auth.isAuthenticated) {
        throw redirect({
            to: appConfig.DEFAULT_PAGE
        })
    }
}

huynhducduy commented 2 weeks ago

While waiting for the fix, downgrade to @tanstack/react-router@1.28.1 as it was the latest version with the redirect working properly.

callumbooth commented 2 weeks ago

I'm facing the same issue, I've also updated to 1.31.3 but no luck

alexhanga commented 2 weeks ago

Left a comment in another thread with reproducible demo of the bug

TanStack / router