No viable solution for web routing to be found

Our team is trying to get up and running with a real-world app, and we haven’t found any robust and viable routing solution (that works).

There is a project called React Native Router Flux (which builds on top of React Navigation) but we have not been able to get it working in conjunction with state management such as redux. If anyone is interested in this topic and can possibly help, I have sample repository here:

The redux navigation action doesn’t work (if anyone can spot the problem help is appreaciated).

1 Like

for now you should use react-router for web. you can share a lot of your components and code but react-native navigation libraries do not currently support web very well

Thanks, but it feels like we are almost there!

We could get our app almost working, but whenever we dispatch an action that changes global state it resets the navigation and puts us back on the home screen. So close yet so far :joy:

Actually, I am using @react-navigation/web in my app like this and works like a charm :

import { Platform } from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { createBrowserApp } from '@react-navigation/web';

import HomeScreen from '../screens/HomeScreen';
//import your other pages

const createApp = Platform.select({
	web: config => createBrowserApp(config),
	default: config => createAppContainer(config),
});

export default createApp(
	createSwitchNavigator({
		HomeScreen : {screen: HomeScreen, path: ''},
//etc
	},{
		initialRouteName:'HomeScreen',
	})
);

And just use this component in app.js.

Hope I did not just miss the point :sweat_smile:

3 Likes

I’d like to thank you for this comment. I tried 6-8 times to get this to work over the last few months and kept stopping to work on other pressing issues. I kept thinking that web platform fixes were coming and was just waiting for it. This is the post that finally made things click for me. While I didn’t use this exact solution I wanted to add in a few resources to help others in this transition period.

Specifically, this points out that you can add the .native.js file extensions and React Native handles it automatically. I was able to leave all of my routing in place and simply create a new screen to handle the weird navigators.

Also, I had to rip the content out of my drawer component and save it as a separate component that I use exclusively for web.

Hope that helps.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.