Redirect Not Working as Expected in @tanstack/react-router v1.31.1
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
beforeLoadmethod. - Use the
redirectfunction 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