Discuss: Improvements to Navigation

Currently, we are using React Router together w/ Ion (our prototype global state management solution) to handle site navigation. There are a couple of potential issues with this that I wanted to discuss…

Avoid Tightly Coupling React Router w/ Ion (or any other global state)

At the moment, we can “redirect” to another screen in the app by setting a key in Ion. This seems convenient, but I wonder if it’s actually necessary and can’t think of any great reasons why we should do this. If we are sticking with React Router then we already more or less get global app navigation for free (while inside components at least) - see withRouter HOC.

While working through some bugs in the codebase I found it very confusing to tell what sorts of things would cause a redirect and we should try to be as predictable as possible when it comes to redirects that are side effects of making API calls etc.

As far as I can tell there is no use case for storing a redirect direction in a persistent way. And in my opinion site redirects should be instant (e.g. this.props.history.push() or a <Link/>) and not need to touch Ion code at all.

Ultimately I think our site navigation strategies need to be:

1. Well documented
2. Predictable
3. Easy for engineers to follow and implement

If we don’t do this then we will likely find ourselves chasing down bugs or introducing hacks to overcome poorly understood redirect logic. Which will translate to a more brittle system that can easily be broken and possibly not caught in regressions tests. Which is obviously bad for the user.

Using React Navigation

This might require further investigation but I believe by using React Router on native mobile we are losing some of the features of native app navigation. I’m thinking of things like tab navigators, drawers, Android back button, etc. In the prototype, we get around this by using some simple views and animations to create a slide out drawer navigator. Based on this I believe it would be possible to integrate something like react-navigation with RN4W (React Native for Web).

Don’t hate me. I haven’t quite done this research yet to see how feasible it would be to combine React Navigation with RN4W but my rough hypothesis here is… we should explore using React Navigation because it takes advantage of existing native app navigation patterns and will feel more natural + possibly have better performance than React Router when run on mobile apps - which are arguably the most important platform we have.

https://reactnavigation.org

[AndrewGable]

From what I can tell… Yes we can still have URL routes: https://reactnavigation.org/docs/configuring-links

[Julesssss]

Hmm, perhaps I should have opened the internal issue instead.