xref: /expo/docs/pages/routing/create-pages.mdx (revision 72552f4c) 
1---
2title: Create pages with Expo Router
3description: Learn about the file-based routing convention used by Expo Router.
4sidebar_title: Create pages
5---
6
7import { BoxLink } from '~/ui/components/BoxLink';
8import { BookOpen02Icon } from '@expo/styleguide-icons';
9import { Tabs, Tab } from '~/ui/components/Tabs';
10
11When a file is created in the **app** directory, it automatically becomes a route in the app. For example, the following files will create the following routes:
12
13- **app/index.js** matches `/`
14- **app/home.js** matches `/home`
15- **app/settings/index.js** matches `/settings`
16- **app/[user].js** matches dynamic paths like `/expo` or `/evanbacon`
17
18## Pages
19
20Pages are defined by exporting a React component as the default value from a file in the **app** directory. The file they are exported from must use one of the `.js`, `.jsx`, `.tsx`, `.ts` extensions.
21
22For example, create the **app** directory in your project and then create a file **index.js** inside it. Then, add the following snippet:
23
24<Tabs>
25
26<Tab label="Universal">
27
28    Render text on any platform with the `<Text>` component from React Native.
29
30    ```js app/index.js
31    import { Text } from 'react-native';
32
33    export default function Page() {
34      return <Text>Home page</Text>;
35    }
36    ```
37
38</Tab>
39
40<Tab label="Web-only">
41
42    Alternatively, you can write web-only React components such as `<div>`, `<p>`, and so on. However, these won't render on native platforms.
43
44    ```js app/index.js
45    export default function Page() {
46      return <p>Home page</p>;
47    }
48    ```
49
50</Tab>
51
52</Tabs>
53
54The above example matches the `/` route in the app and the browser. Files named **index** match the parent directory and do not add a path segment. For example, **app/settings/index.js** matches `/settings` in the app.
55
56> Platform extensions (for example, **.ios.js**, **.native.ts**) are not supported in the **app** directory. See [Platform-specific modules](/router/advanced/platform-specific-modules), for more information.
57
58## Dynamic routes
59
60Dynamic routes match any unmatched path at a given segment level.
61
62| Route                     | Matched URL          |
63| ------------------------- | -------------------- |
64| **app/blog/[slug].js**    | `/blog/123`          |
65| **app/blog/[...rest].js** | `/blog/123/settings` |
66
67Routes with higher specificity will be matched before a dynamic route. For example, `/blog/bacon` will match **blog/bacon.js** before **blog/[id].js**.
68
69Multiple slugs can be matched in a single route by using the rest syntax (`...`). For example, **app/blog/[...id].js** matches `/blog/123/settings`.
70
71Dynamic segments are accessible as [search parameters](/router/reference/search-parameters) in the page component.
72
73{/* prettier-ignore */}
74```js app/blog/[slug].js
75/* @info Import the <b>useLocalSearchParams</b> React hook */
76import { useLocalSearchParams } from 'expo-router';
77/* @end */
78import { Text } from 'react-native';
79
80export default function Page() {
81  /* @info Access the query parameter named <b>slug</b> */
82  const { slug } = useLocalSearchParams();
83  /* @end */
84
85  return <Text>Blog post: {slug}</Text>;
86}
87```
88
89## Next steps
90
91<BoxLink
92  title="Navigate between pages"
93  Icon={BookOpen02Icon}
94  description="Learn how to use Expo Router library to navigate between different pages."
95  href="/routing/navigating-pages/"
96/>
97