Navigation and Interaction Patterns in React Web and Native Apps

Building applications with React means solving two distinct problems: how users move between screens (navigation) and how they interact with elements (gestures). The packages in this comparison split cleanly between web and mobile environments. react-router and react-router-dom handle the browser's address bar and history. react-navigation, react-native-navigation, and react-native-gesture-handler handle mobile stacks, tabs, and touch physics. Let's look at how they solve these problems differently.

🗂️ Setting Up the Root Provider

Every app needs a top-level wrapper to manage state. On the web, this wraps the browser history. On mobile, it wraps the native navigation container.

react-router-dom uses a router component to wrap your app.

• It listens to browser URL changes.
• It must be at the top of your component tree.

// react-router-dom: Web setup
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>...</Routes>
    </BrowserRouter>
  );
}

react-router is the core logic package.

• It does not have DOM components like BrowserRouter.
• You usually import hooks from here if building custom routers.

// react-router: Core hooks usage
import { useLocation } from 'react-router';

function Debug() {
  const location = useLocation();
  return <div>{location.pathname}</div>;
}

react-navigation uses a container for mobile stacks.

• It manages the navigation state in JavaScript.
• It requires linking with native modules.

// react-navigation: Mobile setup
import { NavigationContainer } from '@react-navigation/native';

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>...</Stack.Navigator>
    </NavigationContainer>
  );
}

react-native-navigation uses a static API to set roots.

• It does not use a React component wrapper.
• It registers screens before setting the root.

// react-native-navigation: Native setup
import { Navigation } from 'react-native-navigation';

Navigation.setRoot({
  root: {
    stack: {
      children: [{ component: { name: 'Home' } }]
    }
  }
});

react-native-gesture-handler requires a root view wrapper.

• It ensures gestures are recognized before JS thread interference.
• It must wrap the entire app, often inside the navigation container.

// react-native-gesture-handler: Gesture setup
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>...</NavigationContainer>
    </GestureHandlerRootView>
  );
}

🛣️ Defining Routes and Screens

How you map URLs or screen names to components varies by platform philosophy.

react-router-dom uses declarative route components.

• You write <Route> elements inside <Routes>.
• Paths match browser URLs directly.

// react-router-dom: Route definition
<Routes>
  <Route path="/users/:id" element={<UserProfile />} />
</Routes>

react-router provides the matching logic.

• It powers the matching but lacks DOM-specific route elements.
• Used internally by react-router-dom.

// react-router: Match logic (simplified)
// Typically used via hooks like useMatch in custom implementations
import { useMatch } from 'react-router';
const match = useMatch('/users/:id');

react-navigation uses a navigator component configuration.

• You pass screen components as children to a Stack.
• Names are strings, not URL paths (though deep linking maps them).

// react-navigation: Stack definition
<Stack.Navigator>
  <Stack.Screen name="UserProfile" component={UserProfile} />
</Stack.Navigator>

react-native-navigation registers components globally.

• You register screens by string name before using them.
• The layout tree defines the structure.

// react-native-navigation: Registration
Navigation.registerComponent('UserProfile', () => UserProfile);

// Usage in setRoot
children: [{ component: { name: 'UserProfile' } }]

react-native-gesture-handler does not define routes.

• It defines interactive areas within screens.
• You wrap components that need touch handling.

// react-native-gesture-handler: Interactive area
<PanGestureHandler onGestureEvent={onPan}>
  <View><Text>Swipe Me</Text></View>
</PanGestureHandler>

🔄 Navigating Between Screens

Moving from one view to another is the core job of navigation libraries.

react-router-dom uses a hook or component for navigation.

• useNavigate allows programmatic changes.
• <Link> creates anchor tags.

// react-router-dom: Programmatic nav
import { useNavigate } from 'react-router-dom';

function Button() {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/home')} />;
}

react-router exposes the history interface.

• It allows pushing states without DOM specifics.
• Useful for custom navigation implementations.

// react-router: History interface
import { useNavigate } from 'react-router';
// Same hook, but core logic is platform independent

react-navigation uses a navigation prop or hook.

• navigation.navigate pushes to the stack.
• It handles animation and history internally.

// react-navigation: Programmatic nav
import { useNavigation } from '@react-navigation/native';

function Button() {
  const navigation = useNavigation();
  return <button onPress={() => navigation.navigate('Home')} />;
}

react-native-navigation uses static navigation commands.

• Navigation.push takes a component ID and props.
• It triggers true native transitions.

// react-native-navigation: Programmatic nav
import { Navigation } from 'react-native-navigation';

Navigation.push('componentId', {
  component: { name: 'Home' }
});

react-native-gesture-handler triggers actions via gestures.

• It does not navigate directly but enables swipe-back.
• Often configured within the navigation library settings.

// react-native-gesture-handler: Gesture action
onEnded={() => {
  if (translationX < -100) navigation.goBack();
}}

🖐️ Handling Touch and Interaction

Mobile apps rely heavily on touch gestures, while web apps rely on clicks and hovers.

react-router-dom handles click events on links.

• It intercepts <a> tags to prevent full page reloads.
• No touch gesture support built-in.

// react-router-dom: Link interaction
<Link to="/settings">Settings</Link>
// Renders an <a> tag that uses JS navigation

react-router has no interaction components.

• It focuses purely on location state.
• Interaction is handled by the platform layer (DOM or Native).

// react-router: State check
// No direct interaction components

react-navigation includes basic gesture support.

• Swipe-to-go-back is enabled by default on iOS.
• Custom gestures require react-native-gesture-handler.

// react-navigation: Default gesture
// Enabled via screenOptions
<Stack.Screen options={{ gestureEnabled: true }} />

react-native-navigation uses native touch drivers.

• Gestures feel identical to non-React apps.
• Less customizable via JavaScript than react-navigation.

// react-native-navigation: Native gesture
// Configured via native options object
options: {
  gestures: {
    enabled: true
  }
}

react-native-gesture-handler provides granular touch control.

• You can detect taps, swipes, pinsches, and forces.
• Essential for custom interactive UI elements.

// react-native-gesture-handler: Custom tap
<TapGestureHandler numberOfTaps={2} onActivated={onDoubleTap}>
  <View><Text>Double Tap</Text></View>
</TapGestureHandler>

🤝 Similarities: Shared Ground Across Platforms

Despite the platform split, these libraries share core React concepts.

1. ⚛️ Component-Driven Architecture

• All libraries (except react-native-navigation static API) use React components to define structure.
• State is managed through hooks or context providers.

// Shared pattern: Provider wrapping
// Web
<BrowserRouter>...</BrowserRouter>
// Native
<NavigationContainer>...</NavigationContainer>

2. 🔗 Declarative Configuration

• Routes and screens are defined in a tree structure.
• Changing the tree updates the UI automatically.

// Web
<Route path="/" element={<Home />} />
// Native
<Stack.Screen name="Home" component={Home} />

3. 🪝 Hook-Based Data Access

• Accessing current location or navigation state uses hooks.
• Reduces prop-drilling in large component trees.

// Web
const { pathname } = useLocation();
// Native
const navigation = useNavigation();

4. 🚀 Lazy Loading Support

• All support code-splitting to reduce initial bundle size.
• Screens load only when visited.

// Web
const About = lazy(() => import('./About'));
// Native
// Supported via getComponent in screen options

5. 🔗 Deep Linking Capabilities

• All allow external links to open specific screens.
• Critical for push notifications and web-to-app handoffs.

// Web
// Handled by browser URL bar
// Native
// Configured via linking prop in NavigationContainer

📊 Summary: Key Differences

💡 The Big Picture

react-router-dom is the standard for web. If you are building a website, this is your starting point. It integrates perfectly with browser history and SEO requirements.

react-navigation is the standard for React Native. It offers the best balance of ease-of-use and power. It feels like React, which makes it easy for web developers to transition to mobile.

react-native-navigation is for teams that need maximum native performance. It is stricter and requires more native knowledge, but it delivers the most "native" feel.

react-native-gesture-handler is a utility for mobile. You will likely use it alongside react-navigation to unlock advanced touch features that the default system cannot handle.

react-router is the engine under the hood for web routing. You rarely install it alone, but understanding it helps when debugging complex routing logic.

Final Thought: Do not try to force web patterns onto mobile or vice versa. Respect the platform. Use react-router-dom for the browser and react-navigation for mobile apps to ensure your users get the experience they expect on their device.