fix(react-router): ResolvedSuspense to always use React.Suspense never the SafeFragment

[mta-trackunit]

If you create any hook that relies on a tanstack router hook - it becomes hard to test since the rerender recreates the elements again, I traced it down to this part in matches.tsx
const ResolvedSuspense = !router.state.matches.length ? React.Suspense : SafeFragment
It makes state changes with only the React.Suspense it works, dont really know if its intended or not? if so please explain how we could get around it for testing.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 0e8f975. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx affected --targets=test:format,test:eslint,test:unit,test:build,build --parallel=3

✅ Successfully ran 3 targets

• nx run-many --target=test:e2e:replay
• nx affected --target=build --exclude=examples/**
• nx affected --target=test:types --exclude=examples/**

---

Sent with 💌 from NxCloud.

[SeanCassiere]

This uses Object.is which will never return true since React 😅. Could you push a change with expect(original).toEqual(updated) please.

[mta-trackunit]

yep I will do that, thanks for replying

[mta-trackunit]

'toBe' is actually what I expect to be true here - If I have a hook and memorise a value I expect it not to change on a rerender - if I change to toEqual it will work here - but not verify that I did not get a stateChange. Testing that way will ensure the base of the hook is stabile and not causing state changes.. what do you think ?

[SeanCassiere]

🚨 Tested this out locally using the kitchen-sink-file-based example.

This change breaks that example where, when on/dashboard, you click "Invoices" and navigate to /dashboard/invoices, and then try clicking on "Users" to navigate to /dashboard/users, the navigation never resolves.

Edit: This breakage is weird, since now when I retested it, the above case works, but this new one breaks.

• Load localhost:3000
• Go to dashboard
• Go to invoices
• Go to users
• Go to a user from the list
• Go to invoices
• Try going to an invoice and notice the navigation doesn't actually resolve.

[mta-trackunit]

So navigating from http:https://localhost:5173/dashboard/invoices
to (using menu) http:https://localhost:5173/dashboard/users
It navigates to
http:https://localhost:5173/dashboard/invoices?usersView=%7B%7D

So it seems like tanstack router is behind 1 "tick" ... any idea how to debug that?

In examples/react/kitchen-sink-file-based/src/routes/dashboard.users.tsx

  React.useEffect(() => {
    navigate({
      search: (old) => {
        return {
          ...old,
          usersView: {
            ...old?.usersView,
            filterBy: filterDraft || undefined,
          },
        }
      },
      replace: true,
    })
  }, [filterDraft])

That seems to navigate - so it feels like tanstack router is behind and redirects so updating search on first render here navigates back to previous route (invoices).

A solution is to add to navigate function

 to: "/dashboard/users",

but it clearly hides some other bug...

[mta-trackunit]

This change made the kitchensink app work - but dont know what other consequence it will have? maybe my change is not the right solution - but it solves the kitchensink app navigate from invoices to users