search

TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.43k stars 517 forks source link

beforeLoad doesn't get called #1752

Open nucleartux opened 3 weeks ago

nucleartux commented 3 weeks ago

Describe the bug

I expect that every every time I enter the route beforeLoad will be called

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-94bxv9?file=src%2Froutes%2F_auth.tsx

Steps to Reproduce the Bug or Issue

  1. Click "Go to the auth-only invoices page".
  2. Enter any login and access the authorized part of the site.
  3. Quickly click "Logout".
  4. Quickly click "Go to the auth-only invoices page" again.
  5. You are on the "Invoices" page without any authentication.

(You may need a few tries.)

Expected behavior

On Step 4, loading happens again, and I'm redirected to the login page.

Screenshots or Videos

No response

Platform

    "@tanstack/react-router": "^1.36.3",
    "@tanstack/router-devtools": "^1.36.3",
    "@tanstack/router-vite-plugin": "^1.38.0",

Additional context

If it's expected behavior, how can I avoid it?

schiller-manuel commented 3 weeks ago

I cannot reproduce this, maybe I am too slow :D can you please create a video?

nucleartux commented 3 weeks ago

https://drive.google.com/file/d/1XcXgCSMdGj4KtGS0SAVlp86ZdDQSosIj/view?usp=sharing

(I was unable to upload the video to GitHub due to size restrictions. Sorry.)

You can fast forward the parts of the video where I wait for pages to load, by the way.

schiller-manuel commented 3 weeks ago

is there any way this can be made easier reproducible? do those timeouts affect the behavior ?

nucleartux commented 3 weeks ago

Actually, reproduction is much easier than it seemed.

  1. Hover over 'Go to the auth-only invoices page.'
  2. Move the cursor somewhere else.
  3. Click 'Go to the auth-only invoices page.'

https://github.com/TanStack/router/assets/199706/c3fbb3ef-3be5-4f34-ac2c-f239a64a0d89

If I set defaultPreload to false, everything works as expected.

ViewableGravy commented 4 days ago

I've encountered this same behaviour. In my testing, It seems like the beforeLoad just doesn't run after the actual click if it has been preloaded from a hover and you haven't unhovered and then rehovered.

I think when you unhover and then hover again, because it's already preloaded, the hover doesn't trigger the beforeLoad again and therefore clicking works, but if the hover did trigger the preload and you click it without leaving the hover state, it never runs.

I'll likely be investigating this issue further next week so I'll update this post if I find any further information about what causes the issue.

schiller-manuel commented 2 days ago

this will be fixed by #1907

reproducer with pre-release package: https://stackblitz.com/edit/tanstack-router-v9onbn?file=src%2Froutes%2F_auth.tsx