Mobile stack routing
- Support stack (and thus swipe-back) navigation for mobile that retains state of below components
- The way ionic supports stack navigation is to have a special IonNavLink accept a JSX component which is rendered on click
- To keep current link navigation, I changed the router config from the JSX-based implementation to a JSON config, so that a new link component, if in mobile mode, can match the proper component from the path and render it
- For this, I created a custom Link component that either routes by stack or router depending on if the user is on mobile, still using links params for state
- Each menu "tab" has its own stack, so moving tabs clears the stack (intended behavior). To navigate tab-like, routerDirection should be "root".
- As we're using fake "links" on mobile, we don't have a URL or memory-router URL we can look at to glean page props. For this, all Pages support an optional memoryPath prop which dictates whether to use react router's path or the one passed to it, and a custom
useParams
hook that uses either the router or the stack depending on if we're on mobile. - This could (and maybe should) be replaced with a context in the future, but this approach is simpler.
Edited by Aidan