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

[acoBOYZ]

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

1. Set up @tanstack/react-router in a React project.
2. Implement authentication checks in the beforeLoad method.
3. Use the redirect function to redirect unauthenticated users to a login page.
4. 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]

I am having the same issue

[Winterson-Islary]

Same here. The page stays empty unless manually refreshed.

[bhaleraosaurabh]

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

[maksymskuibida]

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]

does this still occur with v 1.31.2?

[StephenSHorton]

does this still occur with v 1.31.2?

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

[j-mcfarlane]

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]

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]

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]

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]

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

[alexhanga]

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