Hooks API

useFocusEffect

Given a function, the useFocusEffect hook will invoke the function whenever the route is "focused".

import { useFocusEffect } from 'expo-router';
import { useCallback } from 'react';

export default function Route() {
  useFocusEffect(
    useCallback(() => {
      console.log('Hello')
    }, []);
  );

  return </>;
}

useGlobalSearchParams

Returns the URL search parameters for the globally selected route. For example, /acme?foo=bar -> { foo: "bar" }.

Refer to the local vs global search params guide for more info.

import { Text } from 'react-native';
import { useGlobalSearchParams } from 'expo-router';

export default function Route() {
  const { user, extra } = useGlobalSearchParams();

  return <Text>User: {user}</Text>;
}

useLocalSearchParams

Returns the URL search parameters for the contextually selected route. Refer to the local versus global search params guide for more information.

When /abc/home pushes /123/shop, useGlobalSearchParams returns { first: undefined, second: '123' } on /app/[first]/home.tsx because the global URL has changed. However, you may want the params to remain { first: 'abc' } to reflect the context of the screen. In this case, you can use useLocalSearchParams to ensure the params { first: 'abc' } are still returned in /app/[first]/home.tsx.

import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

export default function Route() {
  const { user, extra } = useLocalSearchParams();

  return <Text>User: {user}</Text>;
}

useNavigation

Access the underlying React Navigation navigation prop to imperatively access layout-specific functionality like navigation.openDrawer() in a Drawer layout. Learn more.

import { useNavigation } from 'expo-router';

export default function Route() {
  const navigation = useNavigation();

  return (
    <View>
      <Text
        onPress={() => {
          navigation.openDrawer();
        }}>
        Open Drawer
      </Text>
    </View>
  );
}

When using nested layouts, you can access higher-order layouts by passing a secondary argument denoting the layout route. For example:

import { useNavigation } from 'expo-router';

export default function MenuRoute() {
  const rootLayout = useNavigation('/');

  const ordersLayout = useNavigation('/orders');

  // Same as the default results of `useNavigation()` when invoked in this route.
  const parentLayout = useNavigation('/orders/menu');

  %%placeholder-start%%... %%placeholder-end%%
}

If you attempt to access a layout that doesn't exist, an error such as Could not find parent navigation with route "/non-existent". is thrown.

usePathname

Returns the currently selected route location without search parameters. For example, /acme?foo=bar -> /acme. Segments will be normalized: /[id]?id=normal -> /normal

import { Text } from 'react-native';
import { usePathname } from 'expo-router';

export default function Route() {
  const pathname = usePathname();

  return <Text>User: {user}</Text>;
}

useSegments

Returns a list of segments for the currently selected route. Segments are not normalized so that they will be the same as the file path. For example, /[id]?id=normal -> ["[id]"].

import { Text } from 'react-native';
import { useSegments } from 'expo-router';

export default function Route() {
  const segments = useSegments();

  return <Text>Hello</Text>;
}

This function can be typed using an abstract of string arrays:

import { useSegments } from 'expo-router';

export default function Route() {
  const segments = useSegments<['profile'] | ['profile', '[user]']>();

  return </>
}

Href

The Href type is a union of the following types:

• string: A full path like /profile/settings or a relative path like ../settings.
• object: An object with a pathname and optional params object. The pathname can be a full path like /profile/settings or a relative path like ../settings. The params can be an object of key/value pairs.