Using React Router for web+native

[dohomi]

Hey Guys,

would it not be a good idea to use React Router for web and native, as that might reduce overhead? I just don't know how nicely the Stack would run on expo but I assume it should work?

It would make it easy to have a router.tsx => importing react-router-native router.web.tsx => importing react-router-dom

[redbar0n]

You might want to check out https://github.com/Lomray-Software/vite-ssr-boost which integrates Vite with React Router.

[dohomi]

thanks for the heads up, I search for an integration with React Native + Vite + React Router

[redbar0n]

See also: https://github.com/oedotme/generouted

https://omarelhawary.me/blog/file-based-routing-with-react-router

Could maybe be used to import the filesystem dir that Expo Router uses, and if you’d align the conventions on how to interpret those filesystem routes, then it could potentially work.

[natew]

Right now theres the expo-router example, something broke when I extracted it out into this new repo but i think its just a single bug away from running. It uses import.meta.glob.

Seems like you could probably replace it with many routers. I went with Expo since they have a working native example built on top of react-native navigation which is in itself a router and probably the only good one that works with RN.

Would be a huge help if anyone wants to try getting expo-router example running. I'll try and find time but it may be a bit.

[redbar0n]

FWIW, seems like this line:

const modules = import.meta.glob('../app/**/*.tsx')

should be:

const modules = import.meta.glob('../app/*.tsx')

since the tsx files are stored directly under the app folder.

[dohomi]

I agree that expo-router would be probably the best solution for a router which serves RN and web. As far as I understand it uses @react-navigation/* under the hood, I will experiment with Vite + react-navigation and see how far that works.

Seems this will be a good starting point: https://github.com/vitejs/vite/discussions/8195#discussioncomment-7486561

[natew]

Thanks @redbar0n

@dohomi Thanks. I've already got it working actually using many of the same settings form that gist in this repo. See examples/expo-router. Just needs some cleanup.

[TheUltDev]

@dohomi yes, I use a custom React Router for this reason, it's actually quite easy: https://github.com/kat-tax/exo/tree/master/library/src/layout/navigation

For advanced apps I'm looking into generating a react-native-router config for native, and either React Router, Wouter, or similar for web based on a single config. (I'm not a fan of file based routing as code is more flexible and I don't like the directory structure to be enforced and coupled to routing.)