Relative routes with ./ and ../
Routes can be specified relative to the current location using ./ for the current directory (e.g., './article') or ../ for the parent directory. Relative URLs are resolved relative to the current rendered screen.
navigation/routes
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Query parameters in navigation
Query parameters can be specified in the link URL itself (e.g., '/users?limit=20') or as additional parameters in the params object. Any parameters that don't match the name of a dynamic route variable are treated as query parameters.
useLocalSearchParams hook for accessing URL parameters
The useLocalSearchParams hook from 'expo-router' returns an object with all URL parameters, including both dynamic route variables and query parameters. Import it with: import { useLocalSearchParams } from 'expo-router'.
Updating query parameters without navigation
Query parameters can be updated without navigating to a new page using either a Link with the same URL but updated query parameters, or imperatively with router.setParams({ limit: 50 }).
Expo Router supports typed routes with static type checking
Expo Router has the ability to statically type routes automatically, ensuring you can only link to valid routes and cannot link to a route that doesn't exist. Typed Routes also improve refactoring as you get type errors if links are broken.
Search parameters must be serializable top-level values
In Expo Router, search parameters can only serialize top-level values such as number, boolean, and string. React Navigation doesn't have these restrictions and allows invalid parameters like Functions, Objects, and Maps. Refactor screens to use only serializable top-level query parameters before migrating.
Replace route prop with useLocalSearchParams hook
Migrate from the route prop passed by React Navigation to the useLocalSearchParams hook to access the current route's parameters.
Replace getCurrentOptions with useLocalSearchParams hook
Use the useLocalSearchParams() hook to get the current route's query parameters, replacing the NavigationContainer ref's getCurrentOptions method.
Replace onUnhandledAction with dynamic routes and 404 screens
Actions are always handled in Expo Router. Use dynamic routes and 404 screens instead of the NavigationContainer's onUnhandledAction prop.
Generate typed routes from Expo Router for type safety
Expo Router can automatically generate statically typed routes, ensuring you can only navigate to valid routes. This replaces manually maintaining TypeScript types when migrating from React Navigation.
Test native deep links with uri-scheme CLI
Use the uri-scheme npm package CLI to test opening native links on a device. For example, to launch Expo Go on iOS to a specific route, run: npx uri-scheme open exp://192.168.87.39:19000/--/form-sheet --ios. Replace the IP address and port with the address shown when running npx expo start.
Test deep links in browser for physical devices
Deep links can be tested by searching for links directly in a browser like Safari or Chrome on physical devices, without requiring native CLI tools.
Route parameters definition and usage
Route parameters are dynamic segments defined in a URL path, such as `/profile/[user]`, where `user` is a route parameter. They are used to match a route. Route parameters are never nullish when a route is matched.
Search parameters definition and usage
Search parameters, also known as query params, are serializable fields that can be appended to a URL, such as `/profile?extra=info`, where `extra` is a search parameter. They are commonly used to pass data between pages.
useLocalSearchParams hook
useLocalSearchParams returns the URL parameters for the current component. It only updates when the global URL conforms to the route. This hook provides component-specific parameter access and prevents background screens from re-rendering when URL parameters change.
useGlobalSearchParams hook
useGlobalSearchParams returns the global URL regardless of the component. It updates on every URL parameter change and might cause components to update extraneously in the background. This can cause performance issues if overused.
Typing URL parameters with generics
Both useLocalSearchParams and useGlobalSearchParams can be statically typed using a generic. Example: `useLocalSearchParams<{ user: string }>()` for required parameters and `useLocalSearchParams<{ user: string; query?: string }>()` for optional search parameters.
Rest syntax with route parameters
When used with the rest syntax (`...`), route parameters are returned as a string array. For example, in `src/app/[...everything].tsx`, the `everything` parameter will be an array of path segments, even if there is only one. Search parameters continue to be returned as individual strings.
Example: Rest syntax with route and search parameters
```tsx src/app/[...everything].tsx import { Text } from 'react-native'; import { useLocalSearchParams } from 'expo-router'; export default function Route() { const { everything } = useLocalSearchParams<{ everything: string[]; query?: string; query2?: string; }>(); const user = everything[0]; return <Text>User: {user}</Text>; } // Given the URL: `/evanbacon/123?query=hello&query2=world` // The following is returned: { everything: ["evanbacon", "123"], query: "hello", query2: "world" } ```
Route parameters re-mount component
Whenever a route parameter is changed, the component will re-mount. This is different from search parameters, which do not cause re-mounting.
Route parameters versus search parameters difference
Route parameters are used to match a route and never have nullish values, while search parameters are used to pass data between routes and are optional. Both can be accessed with useLocalSearchParams and useGlobalSearchParams hooks.
Example: Route and search parameters together
```tsx src/app/[user].tsx import { useLocalSearchParams } from 'expo-router'; export default function User() { const { user, tab, } = useLocalSearchParams<{ user: string; tab?: string }>(); console.log({ user, tab }); // Given the URL: `/bacon?tab=projects`, the following is printed: // { user: 'bacon', tab: 'projects' } // Given the URL: `/expo`, the following is printed: // { user: 'expo', tab: undefined } } ```
Hash support in URLs
The URL hash is a string that follows the `#` symbol in a URL. Expo Router treats the hash as a special search parameter using the name `#`. It can be accessed and modified using the same hooks and APIs as search parameters.
Example: Accessing and modifying hash
```tsx src/app/hash.tsx import { Text } from 'react-native'; import { router, useLocalSearchParams, Link } from 'expo-router'; export default function User() { const { '#': hash } = useLocalSearchParams<{ '#': string }>(); return ( <> <Text onPress={() => router.setParams({ '#': 'my-hash' })}>Set a new hash</Text> <Text onPress={() => router.push('/#my-hash')}>Push with a new hash</Text> <Link href="/#my-hash">Link with a hash</Link> </> ); } ```
Reserved URL parameters
The following URL parameters are reserved for internal use by Expo Router and React Navigation and should not be used for custom parameters: `screen`, `params`, `initial`, `state`.
Performance impact of useGlobalSearchParams
useGlobalSearchParams causes background screens to re-render when URL parameters change. This can cause performance issues if overused. useLocalSearchParams should be preferred when background screen data needs to remain available during navigation.
Example: Comparing useLocalSearchParams and useGlobalSearchParams behavior
When navigating through nested routes with different route parameters, useGlobalSearchParams causes all mounted screens in the stack to re-render with the new URL parameters, while useLocalSearchParams only reflects the parameters matching the current route. This is demonstrated by pushing new instances of the same route with different user parameters and observing console logs from both old and new screens.
Ways to change route parameters
There are three ways to change a route parameter: using `router.setParams({ user: 'evan' })` to update the parameter without pushing new history, using `router.push('/mark')` to push a new route to the stack, or using `<Link href="/charlie">` to navigate to a new route.