Router settings

initialRouteName

When deep linking to a route, you may want to provide a user with a "back" button. The initialRouteName sets the default screen of the stack and should match a valid filename (without the extension).

src

 app

  _layout.tsx

  index.tsx

  other.tsx

import { Stack } from 'expo-router';

export const unstable_settings = {
  // Ensure any route can link back to `/`
  initialRouteName: 'index',
};

export default function Layout() {
  return <Stack />;
}

Now deep linking directly to /other or reloading the page will continue to show the back arrow.

When using array syntax (foo,bar) you can specify the name of a group in the unstable_settings object to target a particular segment.

export const unstable_settings = {
  // Used for `(foo)`
  initialRouteName: 'first',
  // Used for `(bar)`
  bar: {
    initialRouteName: 'second',
  },
};

The initialRouteName is only used when deep-linking to a route. During app navigation, the route you are navigating to will be the initial route. To also load the initialRouteName route below the target route, use the withAnchor prop on the <Link /> component. The imperative APIs accept the same option.

// If this navigates to a new _layout, load the initial route below the target route
<Link href="/route" withAnchor />;

router.push('/route', { withAnchor: true });

Sources

The original Expo docs for this page:

• Router settings (source-of-truth/router/advanced/router-settings.md)