Ionic-react - so many render issues related to routing

This is a very general question, but I’m wondering if there’s someone actively working on the Ionic-React library? And if so, are there plans to improve the integration with react-router?

The amount of frustration from poor documentation and bugs within this part of Ionic makes me want to drop this framework as a whole. The bugs are always difficult to troubleshoot because documentation is extremely vague and although sometimes working around Ionic has been okay, on numerous other occasions it just causes more bugs. I also tried to do the tiniest commit ever to some Ionic documentation a few months ago, I submitted a pull request, but it’s never been looked at, so I’m wondering if the Ionic-React library is just dead or what.

I’d really love this framework to work for me. There’s a lot I like about Ionic. Please someone restore my faith lol.

I started using Ionic last year, and lack of documentation for the router specifically caused me a lot of pain.

That said, I think part of the problem is that react-router itself is a bit buggy, as the team that built it basically moved on to remix for a couple years and then came back with react router 6, which Ionic doesn’t support yet (feature request for react router 6 support here).

The Ionic React library certainly isn’t dead; the v6 upgrade this year delivered all the same features to Ionic Angular, Vue, and React. I think it’s mainly the router that needs some love-- if you check the commit history for the router, you’ll see that the core code hasn’t changed in about a year.

I think the huge advantage of Ionic and why I’m sticking with it despite the pain is that the team places great focus on running everywhere-- iOS, Android, and PWA. And the fact that you can do this with your choice of framework is really fantastic.

As for the bugs, I have found the Ionic team really responsive when posting an issue in GitHub in the cases where I can provide a sample repo to reproduce the issue. Without the sample repo, your issue is probably not going to be prioritized, but if you can show an obvious failure in the code, it will be fixed pretty quickly, much faster than with other projects I have worked with.

As the other commenter said, it is better to be specific… it sounds like you are just commenting here which doesn’t solve anything at all. Since there are probably a few developers finding success using Ionic React Router I suspect it isn’t quite as bad as you make it out to be due to your frustration in finding answers you want and need I can understand the pain.

So if you have a specific problem, with a sample project demonstrating the issue, I have found the community and the Ionic Team to be extremely responsive

Well, I did post a specific problem here. I ended up moving my state up to fix the problem.

I was also struggling with this issue. It was very discouraging to see an Ionic employee directly contradict the documentation and then be dismissive of the problem after realizing his mistake.

I was also struggling with this issue. It turns out it was caused by trying to use a Route component within a fragment. I was trying to do code-splitting with my routes, but I guess I have to use just one big file because use fragments breaks it and using multiple IonRouterOutlets breaks it.

Then my current bugs are… First, it seems if I trigger multiple re-renders from multiple useEffects loading async data, it causes the transition animation to trigger multiple times. It looks pretty jank.

And then second I wish IonBackButton had more options for manipulating the history stack, because if I use a link to switch between IonPages in IonTabBar, I want the back button to go up a level in the routes for that Tab, not to go back to the previous page.

The documentation around all of these is so unhelpful. Like for IonBackButton it says “It is smart enough to know what to render based on the mode and when to show based on the navigation stack.” Which is fine if it does what I want, but when it’s not working and I’m trying to apply some hack to fix it, I’d love something more clear than “It is smart enough to know” … And all the documentation is like this. I want to know more about what’s happening and better sample code.

I’m sure all of these problems are solvable. I’m sure I could provide a repo to reproduce these issues and after lots of discussion get some fix put in place. But it’s so many bugs, the documentation is often wrong and doesn’t get corrected, implementation details are black boxed but then I need to know them to get my things to work… Honestly I’m just not invested enough in this framework to go through the trouble.

@ptmkenny Okay though. It’s true, I am loving how simple and good looking Ionic is for PWA when it actually works. Most of my bugs are with the routing so it makes sense for me to wait for this update at least… If I have to move everything off Ionic it’s gonna be quite a pain…

Nested routes do work, but for some reason require <IonPage> as a wrapper. I made an update on that post.

Code splitting definitely works; I have it working in the app I am building on the latest release of Ionic (6.0.14).

As for transitions being triggered multiple times, I’ve avoided such issues by using react-query, <Suspense>, and <IonLoading>. Basically I load the data I need async with react-query and use <Suspense> to show an <IonLoading> component until I’m ready to do the render, which gives me nice transitions and avoids a whole lot of other kinds of errors.

As I said, I’ve found all the bugs I reported to Ionic that included a sample repo got fixed pretty quick, and the ones that didn’t have a repo attached generally got ignored. So the way forward to get fixes is to actually demonstrate the bug and file a formal issue. If all of us take a little time here and there to do so, a lot of bugs will get fixed and we’ll all be much happier using Ionic.

1 Like

Hi, Please can you explain and give an answer to this post? it is regarding react-query, axios, and ionic

Ionic 6 react with react-query fetching API does not work on real android device but works on emulator and browser - Ionic Framework / Ionic React - Ionic Forum

This sums it up pretty well, put the effort in and you get better outcomes