feat: Ionic 4 / React - Enable use of HashRouter in IonReactRouter

[tpperlman]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
Please allow the IonReactRouter tag to also support HashRouter. As of now, BrowserRouter is hard-coded in as the default router scheme.

Describe Preferred Solution
Please add a parameter to the IonReactRouter tag that allows developers to choose HashRouter instead of the default BrowserRouter.

Describe Alternatives
If adding a parameter to IonReactRouter isn't feasible, a separate IonReactHashRouter tag could be created, but that would require redundant code to be maintained.

Additional Context
In some circumstances, hash-based routing is a better solution than HTML5-based browser routing. Hash routing is also more widely supported on older devices for backward compatibility. The stack overflow post at https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter has some good background on use cases.

[jamesopstad]

Was about to open the same issue because of new behaviour in IOS 13. PWAs in IOS 13 have a popover that appears when the URL changes. This obscures the top content on the page. Pressing 'Done' in the popover returns to the original URL. This has clearly been introduced because a change of URL is considered a move away from the app. Replacing BrowserRouter with HashRouter solves this issue and may therefore be better as the default setting.

[akshatbhargava123]

Can I pick this up?

[elylucas]

@jamesopstad do you know of any documentation (from apple or otherwise), that discusses that popover?

[jamesopstad]

I don't I'm afraid. This was just my experience after upgrading iOS.

[tpperlman]

@jamesopstad I tried one of my dev PWA apps on an iPhone 7 with iOS 13.1.2 and I don't see any popovers when I run it in safari. Perhaps you need to updated your react-router code or open a separate issue if it persists.

Either way, I hope we can get HashRouter added to IonReactRouter.

[jamesopstad]

To clarify, when I say PWA I mean that I've added the app to the home screen and opened it from there. Is that what you did? Also, I'm using an iPad so technically I'm using iPadOS now. Now there is some divergence it's possible the behaviour is different on an iPhone.

[iagobruno]

This can also be useful when we don't have a server and want the app to be mounted on one page. With BrowserRouter if the user shares or reloads the page a 404 error will appear, but with HashRouter this does not happen.

[elylucas]

Coming soon in the 4.11.2 release, there will be an additional that uses react routers HashRouter.

[elylucas]

Hi all,

We've added an IonReactHashRouter (exported from @ionic/react-router) that uses HashRouter and can be used in IonReactRouter's place.

We are also looking into the issue with the popover on iOS as well, as that should not be happening with the regular router.

Thanks

[tpperlman]

Fantastic @elylucas, thank you for the enhancement. I look forward to the next release!

[HeyGarrison]

@elylucas is there an issue that I can track to monitor updates on the popover issue on iOS?

[elylucas]

@GarrisonS its been a couple of weeks since I looked, but I wasn't able to find anything about it then. I'm wanting to check to see if it's still an issue in 13.2.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.