Router Hooks
Router hooks in React Native are powerful utility functions that provide direct access to navigation state and functionality within your components. These hooks enable seamless interaction with the router's navigation system, allowing you to programmatically access current route information, navigate between screens, manage navigation history, and respond to navigation state changes throughout your application.
Key Terms
| Term | Definition |
|---|---|
useFocusEffect | A hook that runs an effect whenever a route is focused, similar to React.useEffect. Used for side-effects like data fetching. The callback should be wrapped in useCallback. |
useGlobalSearchParams | Returns URL parameters for globally selected route, including dynamic path segments. Updates even when route is not focused. Useful for background operations. |
useLocalSearchParams | Returns URL parameters for the contextually focused route. Useful for stacks where pushing new screens changes query parameters. |
useNavigation | Returns the React Navigation navigation prop to access layout-specific functionality like navigation.openDrawer(). Can access higher-order layouts. |
usePathname | Returns the currently selected route location without search parameters, with normalized segments. |
useRouter | Returns the Router object for imperative navigation between routes. |
useSegments | Returns a list of selected file segments for the current route. Segments are not normalized and match the file path. |
Resources
- Expo Docs - Router Hooks