Expo 路由

Returns route info for a screen it is called from.

Hook to run an effect whenever a route is focused. Similar to React.useEffect, but the effect re-runs each time the screen comes into focus, and the optional cleanup function runs when the screen loses focus — not on unmount. This makes it the right primitive for refetching data, restarting subscriptions, or resetting transient screen state every time a user returns to the route.

The passed callback should be wrapped in React.useCallback to avoid running the effect too often.

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

export default function Route() {
  useFocusEffect(
    // Callback should be wrapped in `React.useCallback` to avoid running the effect too often.
    useCallback(() => {
      // Invoked whenever the route is focused.
      console.log("Hello, I'm focused!");

      // Return function is invoked whenever the route gets out of focus.
      return () => {
        console.log('This route is now unfocused.');
      };
    }, []),
   );

 return </>;
}

Returns URL parameters for globally selected route, including dynamic path segments. This function updates even when the route is not focused. Useful for analytics or other background operations that don't draw to the screen.

Route URL example: acme://profile/baconbrix?extra=info.

When querying search params in a stack, opt-towards using useLocalSearchParams because it will only update when the route is focused.

Note: For usage information, see Local versus global search parameters.

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

export default function Route() {
  // user=baconbrix & extra=info
  const { user, extra } = useGlobalSearchParams();

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

Hook to get the current focus state of the screen. Returns a true if screen is focused, otherwise false. This can be used if a component needs to render something based on the focus state.

Returns the result of the loader function for the calling route.

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

export function loader() {
  return Promise.resolve({ foo: 'bar' }};
}

export default function Route() {
 const data = useLoaderData<typeof loader>(); // { foo: 'bar' }

 return <Text>Data: {JSON.stringify(data)}</Text>;
}

Returns the URL parameters for the contextually focused route. Useful for stacks where you may push a new screen that changes the query parameters. For dynamic routes, both the route parameters and the search parameters are returned.

Route URL example: acme://profile/baconbrix?extra=info.

To observe updates even when the invoking route is not focused, use useGlobalSearchParams.

Note: For usage information, see Local versus global search parameters.

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

export default function Route() {
 // user=baconbrix & extra=info
 const { user, extra } = useLocalSearchParams();

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

Returns the navigation object for the current route. Mirrors the React Navigation navigation object. Use it to imperatively access layout-specific functionality like navigation.openDrawer() in a Drawer layout.

See: The full navigation API is available directly from expo-router — no @react-navigation/* install required. For the navigator-dependent functions reference, see navigation dependent functions.

import { useNavigation } from 'expo-router';

export default function Route() {
  // Access the current navigation object for the current route.
  const navigation = useNavigation();

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

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');
}

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

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

export default function Route() {
  // pathname = "/profile/baconbrix"
  const pathname = usePathname();

  return <Text>Pathname: {pathname}</Text>;
}

Returns the navigation state of the root navigator — the top-level navigator that contains the current screen.

See: React Navigation's navigation state reference for the shape of the returned object.

import { useRootNavigationState } from 'expo-router';

export default function Route() {
 const { routes } = useRootNavigationState();

 return <Text>{routes[0].name}</Text>;
}

Hook to access the route prop of the parent screen anywhere.

Hook to get the path for the current route based on linking options.

Returns the Router object for imperative navigation.

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

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

 return (
  <Text onPress={() => router.push('/home')}>Go Home</Text>
 );
}

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

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

export default function Route() {
  // segments = ["profile", "[user]"]
  const segments = useSegments();

  return <Text>Hello</Text>;
}

- app
  - [user]
    - index.tsx
    - followers.tsx
  - settings.tsx

const [first, second] = useSegments<['settings'] | ['[user]'] | ['[user]', 'followers']>()

Returns the server document data for server-side rendering, including <html>/<body> attributes and additional nodes to add to <head>/<body> for metadata and assets.

import { useServerDocumentContext } from 'expo-router/html';

export default function Root({ children }) {
  const { htmlAttributes, bodyAttributes, headNodes, bodyNodes } = useServerDocumentContext();
  return (
    <html {...htmlAttributes}>
      <head>{headNodes}</head>
      <body {...bodyAttributes}>
        {children}
        {bodyNodes}
      </body>
    </html>
  );
}

Returns a navigator that automatically injects matched routes and renders nothing when there are no children. Return type with children prop optional.

Enables use of other built-in React Navigation navigators and other navigators built with the React Navigation custom navigator API.

import { ParamListBase, TabNavigationState } from "@react-navigation/native";
import {
  createMaterialTopTabNavigator,
  MaterialTopTabNavigationOptions,
  MaterialTopTabNavigationEventMap,
} from "@react-navigation/material-top-tabs";
import { withLayoutContext } from "expo-router";

const MaterialTopTabs = createMaterialTopTabNavigator();

const ExpoRouterMaterialTopTabs = withLayoutContext<
  MaterialTopTabNavigationOptions,
  typeof MaterialTopTabs.Navigator,
  TabNavigationState<ParamListBase>,
  MaterialTopTabNavigationEventMap
>(MaterialTopTabs.Navigator);

export default function TabLayout() {
  return <ExpoRouterMaterialTopTabs />;
}

The page rendered as part of a preload (e.g. router.prefetch()) and is not currently focused. If the user later navigates to this route, the matching pageFocused will fire then; the preload may also be invalidated or the route unmounted (pageRemoved) without a focus.