react-navigation/react-navigation · error

Couldn't find a route at index ${state.index}.

Error message

Couldn't find a route at index ${state.index}.

What it means

useFocusEvents derives the currently focused route as state.routes[state.index]. If that slot is undefined, the state is structurally invalid (index out of bounds or empty routes) and the hook throws rather than operating on a nonexistent route.

Source

Thrown at packages/core/src/useFocusEvents.tsx:26

type Options<State extends NavigationState> = {
  state: State;
  emitter: NavigationEventEmitter<EventMapCore<State>>;
};

/**
 * Hook to take care of emitting `focus` and `blur` events.
 */
export function useFocusEvents<State extends NavigationState>({
  state,
  emitter,
}: Options<State>) {
  const navigation = React.use(NavigationContext);
  const lastFocusedKeyRef = React.useRef<string | undefined>(undefined);

  const currentFocusedRoute = state.routes[state.index];

  if (currentFocusedRoute == null) {
    throw new Error(`Couldn't find a route at index ${state.index}.`);
  }

  const currentFocusedKey = currentFocusedRoute.key;

  // When the parent screen changes its focus state, we also need to change child's focus
  // Coz the child screen can't be focused if the parent screen is out of focus
  React.useEffect(
    () =>
      navigation?.addListener('focus', () => {
        lastFocusedKeyRef.current = currentFocusedKey;
        emitter.emit({ type: 'focus', target: currentFocusedKey });
      }),
    [currentFocusedKey, emitter, navigation]
  );

  React.useEffect(
    () =>
      navigation?.addListener('blur', () => {

View on GitHub (pinned to ab1319d6bb)

Solutions

1. Fix state so index points to an existing route: 0 <= index < routes.length
2. Ensure navigation.reset is called with at least one route and correct index
3. Validate persisted state before passing as initialState (check routes/index shape)
4. If writing a custom navigator, guarantee every state update maintains a valid index

Example fix

// before
navigation.reset({ index: 2, routes: [ { name: 'Home' } ] }); // index out of bounds
// after
navigation.reset({ index: 0, routes: [ { name: 'Home' } ] });

function assertValidState(state) {
  if (!Array.isArray(state.routes) || state.routes.length === 0 ||
      state.index < 0 || state.index >= state.routes.length) {
    throw new Error('Invalid navigation state: bad index or empty routes');
  }
}
// run before passing initialState or calling reset

function hasFocusedRoute(state) {
  return state.routes[state.index] != null;
}

try {
  navigation.reset(restoredState);
} catch (e) {
  if (e.message.startsWith("Couldn't find a route at index")) {
    navigation.reset({ index: 0, routes: [{ name: 'Home' }] });
  }
}

When it happens

Trigger: Passing a navigation state to a navigator whose `routes` array is empty or whose `index` exceeds routes.length - 1 — typically via initialState, navigation.reset with hand-built state, or custom navigators producing invalid state.

Common situations: Custom navigator implementations computing index incorrectly; resetting with an empty routes array; restoring persisted/crafted state with a bad index after screens were removed.

Related errors

• Couldn't find a route at index ${index}.
• The path pattern '${segment}' does not allow null for param
• The path pattern '${segment}' requires a string for param '$
• The path pattern '${segment}' requires at least one value fo
• The path pattern '${segment}' does not allow empty values fo

AI-assisted analysis of react-navigation/react-navigation@ab1319d6bb (2026-08-31). Data as JSON: /api/errors/12f1c7a7fd5507cc. Report an issue: GitHub.