Weird bug that cannot be reproduced in stackblitz and wasn't happening with react-router-dom
I have a weird bug that it wasn't happending with react-router-dom. I have two routes that the first is the
tasks list and the second is /tasks/$taskId.
$taskId is the child of /tasks route.
When going DIRECTLY within the URL for example /tasks/4 and press the X button to close the sheet i see the network that refetches data for this route, like the component remounts on close.
I'm using file-based routing for this. Can someone test it in their local to see if its happening? I use react-query inside the /tasks/$taskId route.9 Replies
genetic-orangeOP•2y ago
Also if you go WITHIN the app and navigate to
/posts/4 by Link and just click the close button that navigates you back to /posts it works as expected.
this thing is happening only when going directly to a URL with params OR searchParamslike-gold•2y ago
can you share the example?
genetic-orangeOP•2y ago
I couldn't reproduce it in stackblitz cause I had hard time setting up the file based routing there. I will try to create a GitHub repo with the case
like-gold•2y ago
can't you modify one of the existing examples with file based routing on Stackblitz?
genetic-orangeOP•2y ago
i don't think the problem is the file-based routing. I found the problem is the
defaultPendingComponent that causes this. I commented out line by line to debug it. I will send you a stackblitz example
https://stackblitz.com/~/edit/github-844nb4?file=src%2Fmain.tsx&view=editor
take a look at this steps to reproduce it:
1. go directly to https://blitz-og5k-85znmkee--3001--26ebe8bf.local-credentialless.webcontainer.io/posts/1
2. open the network tab
3. tap the close button
4. watch that the componet is mounts again before closing
removing defaultPendingComponent solves the problem but i think i had to add it because of a problem with router dev tools
yeah removing defaultPendingComponent which is my loading placeholder causes this
A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.like-gold•2y ago
can you please create a github issue so this is not lost here?
genetic-orangeOP•2y ago
GitHub
defaultPendingComponent causes weird behavior in some cases · Issue...
Describe the bug I have a weird bug. I have two routes that the first is the posts list and the second is /posts/$postId. $postId is the child of /posts route. When going DIRECTLY within the URL fo...
genetic-orangeOP•2y ago
I already have one
broad-brown•2y ago
I have the same problem and I spent a few hours already while trying to google a solution. The
wrapInSuspense on the root route partially solved the problem (see https://github.com/TanStack/router/issues/1109), but now my whole app loads in a suspense, and I just can't find a way to wrap just what I need. As a result, instead of instantly loading the layout and then loading slower parts, everything loads slowly on the first load.
Even if I wrapInSuspense only the slow part or its parent route, still my whole app loads slowly.GitHub
Issues · 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. - Issues · TanStack/router