Bolt.new React Router Errors in Expo? Swap the Router
react-router-dom is a web library, so it breaks in a native Expo app. The fix is to swap it for a mobile router, not to patch the web one.
TL;DR
Bolt.new builds web React using react-router-dom, which has no place in a native Expo app and throws errors when you convert. The fix is to replace it with a mobile router, Expo Router or React Navigation, and map each web route to a native screen. Keep your screens and logic, swap the navigation layer, and build screens from a free VP0 reference. The router is the problem; the rest mostly carries over.
Bolt.new app throwing react-router-dom errors when you convert to Expo mobile? The short answer: React Router is a web library, so it has no place in a native app and breaks on conversion. The fix is to swap it for a mobile router, Expo Router or React Navigation, not to patch the web one. Keep your screens and logic, replace the navigation layer, and build screens from a free VP0 design, the free iOS design library for AI builders. The router is the problem; the rest mostly carries over. The stakes are real: about 76% of developers now use or plan to use AI tools in their work.
Who this is for
This is for developers converting a Bolt.new web React app to Expo mobile who hit react-router-dom errors and want to fix the navigation properly.
Why React Router breaks on mobile
react-router-dom is built for the browser: it depends on the DOM and the browser’s history API, neither of which exists in a native Expo app. Bolt.new uses it because it generates web React, so the moment you run that code in React Native, the imports and navigation calls fail. Patching the web router is the wrong instinct; you replace it with a router designed for native navigation. The Expo Router documentation and React Navigation documentation describe the two standard options, and React Native is the runtime.
| You have | Problem | The fix |
|---|---|---|
| react-router-dom | Web-only, breaks natively | Remove it |
| Web routes | No DOM router | Map to native screens |
| Web navigation calls | Wrong API | Use the mobile router’s API |
| Links and history | Browser concepts | Native navigation |
| Screens and logic | Mostly fine | Reuse them |
Build the screens free with a VP0 design
While you swap the router, rebuild any web-flavored screens natively. Build from a VP0 reference:
Build this Expo React Native screen from the VP0 design at [paste VP0 link], using Expo Router (or React Navigation) for navigation, not react-router-dom. Match the layout and components from the reference, and generate clean code.
For related Bolt and Expo conversion fixes, see the Bolt.new export to iOS App Store fix, the Bolt.new iOS Simulator black screen fix, fixing blank white screens in AI-generated Expo apps, and how to make an AI app look native on iOS.
Swap the router, keep the rest
The conversion is mostly mechanical once you see it as a router swap. Remove react-router-dom, choose Expo Router (file-based routing, which feels close to web routing and can ease the move) or React Navigation, and recreate each web route as a native screen. Replace web navigation calls, links and history pushes, with the mobile router’s equivalents. Your screen components and business logic usually carry over unchanged, so reuse them and rebuild only the navigation. Treat the Bolt web app as a blueprint, swap its web router for a native one, and the errors disappear.
Common mistakes
The first mistake is trying to keep react-router-dom working in native. The second is rebuilding screens and logic you could reuse. The third is mixing web and native navigation concepts. The fourth is leaving browser history calls in place. The fifth is not rebuilding web-flavored screens natively, which a free VP0 reference makes fast.
Key takeaways
- react-router-dom is web-only and breaks in a native Expo app.
- Replace it with Expo Router or React Navigation, do not patch it.
- Map each web route to a native screen and use the mobile router’s API.
- Reuse your screens and logic; only the navigation layer must change.
- Build any web-flavored screens natively from a free VP0 reference.
Frequently asked questions
Why does react-router-dom break in my Expo app? It is a web routing library depending on the DOM and browser history, which a native app lacks. Bolt.new uses it for the web, so it breaks on conversion. Replace it with a mobile router.
How do I fix Bolt.new React Router errors in Expo mobile? Remove react-router-dom, adopt Expo Router or React Navigation, map routes to native screens, and replace web navigation calls. Reuse screens and logic.
Should I use Expo Router or React Navigation? Both work. Expo Router’s file-based routing can ease a conversion from react-router-dom; React Navigation is the flexible standard. Pick by preference.
Can I keep my Bolt screens and logic? Mostly yes. The components and logic carry over; swap the web router for a native one and reuse the rest.
Frequently asked questions
Why does react-router-dom break in my Expo app?
Because react-router-dom is a web routing library that depends on the DOM and browser history, which do not exist in a native Expo app. Bolt.new uses it for the web, so converting to mobile throws errors. The fix is to replace it with a mobile router like Expo Router or React Navigation.
How do I fix Bolt.new React Router errors in Expo mobile?
Remove react-router-dom and adopt Expo Router or React Navigation, then map each web route to a native screen and replace web navigation calls with the mobile router's API. Keep your screen components and logic, and build screens from a free VP0 reference. The router is the only part that must change.
Should I use Expo Router or React Navigation?
Both work. Expo Router offers file-based routing that feels close to web routing, which can ease a conversion from react-router-dom. React Navigation is the long-standing, flexible option. Pick by preference; either replaces the web router properly.
Can I keep my Bolt screens and logic?
Mostly yes. The screen components and business logic usually carry over; it is the navigation layer that must be swapped from a web router to a native one. Reuse the rest and rebuild routing.
Part of the React Native & Expo: Mobile Frontend Architecture hub. Browse all VP0 topics →
Keep reading
Fix Jumping Bottom Sheets in AI Reanimated Code
AI-generated Reanimated bottom sheet jumping or stuttering? Here is why the gesture and animation fight, and how to make it smooth, from a free template.
Fix Reanimated Tinder Swipe Card Memory Leaks in RN
AI-generated Tinder swipe stack leaking memory in React Native? Here is why cards and animation values pile up, and how to clean them so it stays smooth.
React Native Deep Linking and the Unhandled URL UI
How to handle deep linking in React Native and Expo, with a graceful unhandled-URL fallback instead of a blank app when a link matches no route.
Custom Fonts Not Loading in React Native Release Build
Custom fonts work in dev but vanish in your React Native release build? Here are the real causes, linking, Info.plist, and naming, and the fixes.
Full-Stack React Native Expo + Supabase Template, Free
Want a full-stack React Native Expo + Supabase starter? Generate your own from a free design plus Supabase auth, database, and storage, with Claude Code or Cursor.
Port Vercel v0 Components to React Native and Expo
v0 outputs React web with Tailwind. Here is how to map its components into a React Native and Expo iOS app with NativeWind, plus the pitfalls to avoid.