expo-router

What is expo-router?

The expo-router package is designed to provide a routing solution for React Native applications built with Expo. It allows developers to define and manage navigation within their apps using a file-based routing system, similar to Next.js for web applications.

What are expo-router's main functionalities?

File-based Routing

This feature allows developers to define routes based on the file structure of their project. The useRouter hook is used to navigate between different screens.

import { useRouter } from 'expo-router';

export default function HomeScreen() {
  const router = useRouter();

  return (
    <View>
      <Button title="Go to Profile" onPress={() => router.push('/profile')} />
    </View>
  );
}

Dynamic Routing

Dynamic routing allows for routes that can change based on parameters. This is useful for user profiles or any other content that is dynamically generated.

import { useRouter } from 'expo-router';

export default function UserScreen({ route }) {
  const { userId } = route.params;
  const router = useRouter();

  return (
    <View>
      <Text>User ID: {userId}</Text>
      <Button title="Go to Home" onPress={() => router.push('/')} />
    </View>
  );
}

Nested Routing

Nested routing allows for more complex navigation structures, where routes can have sub-routes. This is useful for settings pages or any other hierarchical content.

import { useRouter } from 'expo-router';

export default function SettingsScreen() {
  const router = useRouter();

  return (
    <View>
      <Button title="Go to Account Settings" onPress={() => router.push('/settings/account')} />
      <Button title="Go to Privacy Settings" onPress={() => router.push('/settings/privacy')} />
    </View>
  );
}

Other packages similar to expo-router

react-navigation

React Navigation is a popular library for routing and navigation in React Native applications. It provides a wide range of navigators, including stack, tab, and drawer navigators. Compared to expo-router, React Navigation offers more flexibility and customization options but requires more setup and configuration.

react-native-navigation

React Native Navigation by Wix is another powerful navigation library for React Native. It provides a native navigation experience and is highly customizable. It is more complex to set up compared to expo-router but offers better performance and native feel.

react-router-native

React Router Native is a version of React Router that works with React Native. It provides a similar API to React Router for web applications, making it easy to use for developers familiar with React Router. It is less opinionated than expo-router and allows for more flexibility in defining routes.

README

expo-router

Check out the Expo Router documentation for more information.