Setting the file. One moment.
Subchapter 18.2
references/route-structure.mdMarkdown5 KBView on GitHub
app directory[] for dynamic routes, e.g. [id].tsx(foo).tsx - use (foo)/index.tsx instead(group) routes to simplify the public URL structurecomponents/, utils/, etc._layout files; every file should export a default component_layout.tsx files to define stacksUse square brackets for dynamic segments:
app/
users/
[id].tsx # Matches /users/123, /users/abc
[id]/
posts.tsx # Matches /users/123/postsUse [...slug] for catch-all routes:
app/
docs/
[...slug].tsx # Matches /docs/a, /docs/a/b, /docs/a/b/cAccess query parameters with the useLocalSearchParams hook:
import { useLocalSearchParams } from "expo-router";
function Page() {
const { id } = useLocalSearchParams<{ id: string }>();
}For dynamic routes, the parameter name matches the file name:
[id].tsx → useLocalSearchParams<{ id: string }>()[slug].tsx → useLocalSearchParams<{ slug: string }>()Access the current pathname with the usePathname hook:
import { usePathname } from "expo-router";
function Component() {
const pathname = usePathname(); // e.g. "/users/123"
}Use parentheses for groups that don’t affect the URL:
app/
(auth)/
login.tsx # URL: /login
register.tsx # URL: /register
(main)/
index.tsx # URL: /
settings.tsx # URL: /settingsGroups are useful for:
When an app has tabs, the header and title should be set in a Stack that is nested INSIDE each tab. This allows tabs to have their own headers and distinct histories. The root layout should often not have a header.
Example structure:
app/
_layout.tsx — <Tabs />
(home)/
_layout.tsx — <Stack />
index.tsx — <ScrollView />
(settings)/
_layout.tsx — <Stack />
index.tsx — <ScrollView />
(home,settings)/
info.tsx — <ScrollView /> (shared across tabs)Use array routes ‘(index,settings)’ to create multiple stacks. This is useful for tabs that need to share screens across stacks.
app/
_layout.tsx — <Tabs />
(index,settings)/
_layout.tsx — <Stack />
index.tsx — <ScrollView />
settings.tsx — <ScrollView />This requires a specialized layout with explicit anchor routes:
// app/(index,settings)/_layout.tsx
import { useMemo } from "react";
import Stack from "expo-router/stack";
export const unstable_settings = {
index: { anchor: "index" },
settings: { anchor: "settings" },
};
export default function Layout({ segment }: { segment: string }) {
const screen = segment.match(/\((.*)\)/)?.[1]!;
const options = useMemo(() => {
switch (screen) {
case "index":
return { headerRight: () => <></> };
default:
return {};
}
}, [screen]);
return (
<Stack>
<Stack.Screen name={screen} options={options} />
</Stack>
);
}app/
_layout.tsx — <NativeTabs />
(index,search)/
_layout.tsx — <Stack />
index.tsx — Main list
search.tsx — Search view
i/[id].tsx — Detail page
components/
theme.tsx
list.tsx
utils/
storage.ts
use-search.tsEvery directory can have a _layout.tsx file that wraps all routes in that directory:
// app/_layout.tsx
import { Stack } from "expo-router/stack";
export default function RootLayout() {
return <Stack />;
}// app/(tabs)/_layout.tsx
import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
export default function TabLayout() {
return (
<NativeTabs>
<NativeTabs.Trigger name="index">
<Label>Home</Label>
<Icon sf="house.fill" />
</NativeTabs.Trigger>
</NativeTabs>
);
}Export unstable_settings to configure route behavior:
export const unstable_settings = {
anchor: "index",
};initialRouteName was renamed to anchor in v4Create a +not-found.tsx file to handle unmatched routes:
// app/+not-found.tsx
import { Link } from "expo-router";
import { View, Text } from "react-native";
export default function NotFound() {
return (
<View>
<Text>Page not found</Text>
<Link href="/">Go home</Link>
</View>
);
}