You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The crux of the bug is that, in the right conditions, when visiting a route directly (via the URL bar) the user will only see a white/blank screen with the beforeLoad not being properly awaited.
This bug only occurs when directly visiting a URL. It doesn't occur if you navigate to the page once the application is already loaded in.
It requires the 3 following conditions to be met.
React.StrictMode must be ON.
Router.trailingSlash must be set to always or never.
An async beforeLoad function is set with some wait period (i.e. sleep(500)).
When these 3 conditions have been met and a user then directly visits a route, its beforeLoad function resolves, but the user is only shown a white/blank screen.
When React.StrictMode is turned OFF, everything works correctly. But of course, this is not a solution.
Visit /posts/ and see the URL then get rewritten to /posts.
Observe, the loader which instantly resolves, but the beforeLoad call finishes after.
Observe, a white/blank screen is then shown.
When trailingSlash is set to always.
Visit /posts and see the URL then get rewritten to /posts/.
However, a loader which instantly resolves, finishes before the beforeLoad call.
Observe, a white/blank screen is then shown.
Expected behavior
All three trailingSlash behaviours in their loading patterns should be the same, when React.StrictMode is ON versus when it is turned off.
Currently, React.StrictMode OFF yields the expected behaviours, as opposed to when ON, the beforeLoad call is not correctly awaited and a white/blank screen is shown.
Platform
OS: macOS
Browser: Chrome, Arc
TSR Version: 1.32.5
The text was updated successfully, but these errors were encountered:
SeanCassiere
changed the title
beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' triggers a white screen
blank screen triggered by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always'
May 15, 2024
SeanCassiere
changed the title
blank screen triggered by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always'
blank screen triggered on direct visit by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always'
May 15, 2024
Describe the bug
This bug was found when retesting #1553.
The crux of the bug is that, in the right conditions, when visiting a route directly (via the URL bar) the user will only see a white/blank screen with the
beforeLoad
not being properly awaited.This bug only occurs when directly visiting a URL. It doesn't occur if you navigate to the page once the application is already loaded in.
It requires the 3 following conditions to be met.
React.StrictMode
must be ON.Router.trailingSlash
must be set toalways
ornever
.beforeLoad
function is set with some wait period (i.e.sleep(500)
).When these 3 conditions have been met and a user then directly visits a route, its
beforeLoad
function resolves, but the user is only shown a white/blank screen.When
React.StrictMode
is turned OFF, everything works correctly. But of course, this is not a solution.Reproduction
https://stackblitz.com/edit/github-h31abz-yta2mu?file=src%2Fmain.tsx
Steps to Reproduce the Bug or Issue
When
trailingSlash
is set tonever
./posts/
and see the URL then get rewritten to/posts
.When
trailingSlash
is set toalways
./posts
and see the URL then get rewritten to/posts/
.Expected behavior
All three trailingSlash behaviours in their loading patterns should be the same, when
React.StrictMode
is ON versus when it is turned off.Currently,
React.StrictMode
OFF yields the expected behaviours, as opposed to when ON, thebeforeLoad
call is not correctly awaited and a white/blank screen is shown.Platform
The text was updated successfully, but these errors were encountered: