Do not "aggressively render only 1 screen at a time in the DOM"?

[oliveryasuna]

The most popular feature request on ionic-framework is React Router v7 support (ionic-team/ionic-framework#24177).

There have been multiple attempts to upgrade to React Router v7:

1. https://github.com/ionic-team/ionic-framework/tree/sp/react-router-v6
2. https://github.com/ionic-team/ionic-framework/tree/sp/react-router-6-take-2 <-- @nadavhalfon

I think @nadavhalfon put it very well:

Ok after forking the repo and trying the react router "take-2" branch by @sean-perkins I can see that the main problem with the react router v6 and above is that it aggressively renders only 1 screen at a time in the DOM. So the ionic router can't manage animations and gestures. Wondering if there is a solution, I don't mind contributing but I'll need some help from the team ✌️

ionic-team/ionic-framework#24177 (comment)

After viewing the changes, it is pretty clear what he means.

So, what I am asking, is there any way to modify or circumvent this behavior?

Further reading:

I'd like to describe a related use case, that of Ionic mobile apps running on Capacitor.

The Ionic framework provides components for building mobile apps using Angular, React, and Vue. Ionic apps generally run on top of Capacitor, which provides integration with iOS and Android. Ionic components include things like form widgets, tabs, and a mobile router.

Ionic's mobile router component wraps the framework's router. For example, Ionic Angular uses the Angular router, while Ionic Vue uses the Vue router. React, however, doesn't have an "official" router (the Facebook team that releases React does not maintain a router). So, Ionic React is currently using react-router v5. The feature request to add React Router v6/v7 support is the most upvoted request in the ionic-framework issue queue.

Over the past few years, there have been various attempts to update Ionic's React router (built on top of React Router v5) to use v6, but these attempts have failed partly because of react-router's increasing focus on moving everything to SSR.

It seems that Tanstack Router is still providing a non-SSR option, and if I understand correctly, this RFC is attempting to make client-side non-SSR routing even better. So, in addition to the SPA use case, I would like to briefly outline the mobile app use case. If Tanstack Router has first-class support for client-side routing without any SSR, perhaps Ionic React could migrate to using it instead of react-router.

Some background: Capacitor-based mobile apps (and Cordova-based mobile apps) basically package a website that is loaded in a webview on the mobile OS that (unlike a PWA) has access to device features like file storage, push notifications, and in-app purchases. Such apps need a router, but they can't use SSR at all (because the app files are bundled in the app installer distributed through the mobile app store).

Also, mobile routing has some important differences from regular SPA routing.

This comment from one of the Ionic developers explains it well:

So one of the big differences between web apps and mobile apps is with state management. In a mobile app, previous views are typically persisted so users can go back to them. For example, imagine you had a long form on PageA. You entered your email and other information, changed the scroll position, and then pressed a button to go to PageB. Many users expect that when they return to PageA that the page will be exactly how they left it. This means that the scroll position should be preserved, the text they entered into the form should be preserved, etc.
...
The other reason is for swipe to go back on iOS. While on PageB, users should be able to partially swipe back to reveal the contents of PageA. The swipe could happen at any time, so PageA needs to be ready to be shown at any time.

So I'd like to propose this "router run completely client-side in a mobile app" as another use case that could (hopefully, possibly?) be served by an "SPA mode."

TanStack/router#3394