---
modificationDate: February 28, 2026
title: Typed routes
description: Learn how to use statically typed links and routes in Expo Router.
---
## Submitting Feedback
If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/router/reference/typed-routes/","feedback":"🤖 Agent feedback: "}'
Only submit when you have something specific and actionable to report.
# Typed routes
Learn how to use statically typed links and routes in Expo Router.
> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.
> Available when using TypeScript in your project. Expo Router supports standard TypeScript out of the box. See the [TypeScript](/guides/typescript) guide for more information on how to set it up.
Expo Router supports generating TypeScript types automatically with Expo CLI. This enables ``, and the [hooks API](/versions/latest/sdk/router#hooks) to be statically typed. This feature is currently in beta and is not enabled by default.
## Get started
### Quick start
If you created your project using the [Expo Router quick start guide](/router/introduction#quick-start) then your project is already configured to use typed routes. The Expo CLI will generate the required type file the first time you run `npx expo start`. Then, you can use autocomplete for `href` props whenever you use an Expo Router `` component in a **.tsx** file.
### Manual configuration
While the feature is in beta, you can enable it by setting `experiments.typedRoutes` to `true` in your **app.json**:
```json
{
"expo": {
"experiments": {
"typedRoutes": true
}
}
}
```
Run `npx expo customize tsconfig.json` to configure your **tsconfig.json** to add the required `includes` fields.
Then, start the development server by running `npx expo start`. You can now use autocomplete in the Expo Router `` component's `href` prop.
## Type generation
Typed routes in Expo Router are automatically generated when the development server starts. By default, these generated types are configured to be untracked by Git and will be added to the local **.gitignore** file. This ensures that autogenerated files do not clutter your version control system.
If you find yourself in a situation where you need to generate these types without initiating the development server, such as during type checking on a Continuous Integration (CI) server. To do this, run the command `npx expo customize tsconfig.json` on the CI.
## Statically typed routes
Components and functions that use `Href` will now be statically typed and have a much stricter definition. For example:
```tsx
✅
✅
✅
✅
// TypeScript errors if href is not a valid route
❌
```
> **Note**: A [`Route` type](/versions/latest/sdk/router#route) is also made available by `expo-router`, which matches all valid routes in a project automatically.
For dynamic routes, Href's need to be objects and their parameters are strictly typed:
```tsx
✅
// TypeScript errors as href is valid, but it should be a HrefObject with params
❌
// TypeScript errors as params contain invalid keys
❌
// TypeScript errors as params contain unknown keys
❌
```
### Relative paths
Statically typed routes do not support relative paths. You'll need to use absolute paths for all routes:
```tsx
✅
// Relative paths are not supported
❌
```
You can leverage the `useSegments()` hooks from `expo-router` to create complex relative paths. Consider the following structure:
`src`
`app`
`(feed)`
`_layout.tsx`
`feed.tsx`
`search.tsx`
`profile.tsx`
`(search)`
`profile.tsx`
`components`
`button.tsx`
You can ensure that you push to the same tab by using the `useSegments()` hook to get the first segment of the current route.
```tsx
import { Link, useSegments } from 'expo-router';
export function Button() {
const [
// This will be either `(feed)` or `(search)` depending on the current tab.
first,
] = useSegments();
return Push profile;
}
```
Now, you can leverage `` from both **src/app/(feed)/feed.tsx** and **src/app/(search)/search.tsx** to push `./profile` while preserving the current tab.
If you require the segments for a specific use, you can pass the full route to `useSegments`:
```tsx
import { Link, useSegments } from 'expo-router';
export function useMySegments() {
const segments = useSegments<'/(search)/profile'>();
// ^? segments = ['(search)', 'profile']
return segments;
}
```
## Imperative navigation
You can use the typed `router` object to navigate imperatively:
```tsx
import { router } from 'expo-router';
router.push('/about');
```
Or with the typed `useRouter()` hook:
```tsx
import { useRouter } from 'expo-router';
function Page() {
const router = useRouter();
router.push('/about');
// ...
}
```
## Route parameters
For strongly typed route parameters, you can pass a full href to the `useLocalSearchParams` and `useGlobalSearchParams` hooks. For example:
```tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
export default function Page() {
const {
profile, // string
search, // string[]
} = useLocalSearchParams<'/(search)/[profile]/[...search]'>();
return (
<>
Profile: {profile}Search: {search.join(',')}
);
}
```
## Query parameters
Most query parameters will not be represented in the file system and therefore cannot be typed automatically. You can type query parameters manually by passing a generic to the `useLocalSearchParams` and `useGlobalSearchParams` hooks. For example:
```tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
export default function Page() {
const { query } = useLocalSearchParams<{ query?: string }>();
return Search: {query ?? 'unset'};
}
```
If you need a combination of route and query parameters, pass the route as the first generic and then the query parameters:
```tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
export default function Page() {
const { query, profile, search } = useLocalSearchParams<
'/[profile]/[...search]',
{ query?: string }
>();
return Search: {query ?? 'unset'};
}
```
## Changes made to the environment
When typed routes is enabled, Expo CLI will generate a git ignored **expo-env.d.ts** file in your project's root directory, update the **.gitignore** to ignore the new root **expo-env.d.ts** file, and modify the **tsconfig.json** to include the new **expo-env.d.ts** file.
The `includes` field in your **tsconfig.json** gets updated to include **expo-env.d.ts** and a hidden **.expo** directory. These entries are required and should not be removed from the file.
The generated **expo-env.d.ts** should not be removed or changed at any time. It should not be committed and should be ignored by version control.
### Global types
Expo CLI will add the following global types to your project when typed routes is enabled:
- Sets `process.env.NODE_ENV = "development" | "production" | "test"`
- Allows the importing of `.[css|sass|scss]` files
- Sets the exports of `*.module.[css|sass|scss]` to be `Record`
- Add types for Metro's `require.context`. This is enabled by `expo/metro-config` and used for static route generation.
### React Native Web
With typed routes enabled, Expo CLI also augments the `react-native` types to support React Native Web. The following changes are made:
- Add additional web-only styles for `ViewStyle`, `TextStyle`, `ImageStyle`
- Add `tabIndex`, `aria-level`, `lang` to `TextProps`
- Add `hovered` to Pressable's `children` and `style` state callback function
- Add `className` elements