Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout Route Contexts NOT being set on non-initial redirects in beforeLoad() #1618

Closed
cpakken opened this issue May 18, 2024 · 4 comments
Closed
Labels
information needed Further information is requested

Comments

@cpakken
Copy link

cpakken commented May 18, 2024

Describe the bug

Layout Route Contexts NOT being set on non-initial redirects in beforeLoad()

Repo reproduction
https://github.com/cpakken/issue-tanstack-router-layout-route-context
"@tanstack/react-router": "^1.32.13",

On non-initial loads, when a _layout route's beforeLoads() is triggered by navigation, router.invalidate(), the route's contex returns undefined

Please run vite dev and use Auth Dev Controls to toggle auth state changes and observe the _LAYOUT/context returns undefined

Note:

  • the routes of the _layout returns the context correctly
  • the root router's context has the returns context correctly
export const Route = createFileRoute('/_not_authed')({
  beforeLoad: ({ context: { auth } }) => {
    //If the user is already authenticated, redirect them to the main dashboard
    if (auth.get()) {
      console.log('redirecting to /')
      throw redirect({ to: '/' })
    }
  },
  component: memo(Component),
})

function Component() {
  const context = Route.useRouteContext() //this returns undefined on non-initial redirect
  const rootContext = useRouteContext({ from: '__root__' }) //this seems to resolve
  console.log('_not_authed/context:', context, rootContext)

  return (
    <div className="bg-gray-300">
    ...
    </div>
  )
}

No context in _auth

image

root has context
image

└── 📁routes
    └── 📁_authed 
        └── index.lazy.tsx
        └── user-settings.lazy.tsx
    └── _authed.tsx
    └── 📁_not_authed
        └── login.lazy.tsx
        └── signup.lazy.tsx
    └── _not_authed.tsx
    └── __root.tsx

Your Example Website or App

https://github.com/cpakken/issue-tanstack-router-layout-route-context

Steps to Reproduce the Bug or Issue

See readme.

Expected behavior

Route.useRouteContext() should return the context instead of undefined on non-initial redirects

Screenshots or Videos

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response

@cpakken
Copy link
Author

cpakken commented May 18, 2024

Maybe same error as #1604

@cpakken
Copy link
Author

cpakken commented May 18, 2024

Also: #1531

@SeanCassiere
Copy link
Contributor

@cpakken I tried out your setup on 1.32.16 and either the issue has been fixed or I'm simply not seeing the issue.

Screen.Recording.2024-05-18.at.17.08.57.mp4
Screenshot 2024-05-18 at 17 11 10

https://stackblitz.com/edit/github-5eojgx?file=src%2Fmain.tsx

If the issue still persists, you'll need to detail the exact steps needed to be taken to recreate scenario.

Eg:

  1. Go to ...
  2. When on ... reload.
  3. ...

@SeanCassiere SeanCassiere added the information needed Further information is requested label May 18, 2024
@cpakken
Copy link
Author

cpakken commented May 18, 2024

@SeanCassiere @tannerlinsley just released v1.32.16 30 minutes ago and fixes the issue. Thanks so much! ♥

@cpakken cpakken closed this as completed May 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
information needed Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants