动态路由

了解动态路由以及如何使用 Expo Router 库创建它们。

动态路由允许根据 URL 中嵌入的动态段匹配一个或多个路径。此段采用变量的形式，例如唯一标识符，并且你的应用事先不知道确切的段。

¥A dynamic route allows matching one or multiple paths based on a dynamic segment embedded in the URL. This segment is in the form of a variable, such as a unique identifier, and your app doesn't know the exact segment ahead of time.

本指南介绍如何使用 Expo Router 处理动态路由。

¥This guide explains how to handle dynamic routes with Expo Router.

本指南继续在上一个 基于文件的路由 中使用的示例和应用目录结构的基础上构建。

¥This guide continues to build on top of the example and the app directory structure used in the previous File-based routing.

动态路由约定

¥Dynamic route convention

通过将文件名称括在方括号中来创建路由的动态段。例如，[id].tsx。

¥A dynamic segment of a route is created by wrapping a file's name in square brackets. For example, [id].tsx.

什么是动态段？URL 中路径的任何部分都是动态的。例如，在显示用户列表的应用屏幕中，你可能有一个路径，例如 /details/[id]，其中 [id] 是动态段，并根据用户的 id 显示详细信息。

¥What is a dynamic segment? Any segment of a path in a URL that is dynamic. For example, in an app screen where it displays a users list, you might have a path such as /details/[id] where the [id] is the dynamic segment and displays details based on the id of the user.

创建动态路由

¥Create a dynamic route

让我们考虑以下应用目录结构：

¥Let's consider the following app directory structure:

在上面的文件结构中，[id] 用于显示路由 details/[id].tsx 的信息。相同的路由将根据 id 的值显示唯一信息：

¥In the above file structure, the [id] is used to display information for the route details/[id].tsx. The same route will display unique information based on the value of the id:

此动态段约定确保当应用用户从主屏幕导航到详细信息屏幕时，他们会看到路由动态段的正确信息。

¥This dynamic segment convention makes sure that when an app user navigates from the home screen to the details screen, they view the correct information for the dynamic segment of the route.

使用 Link 导航到动态路由

¥Use Link to navigate to a dynamic route

通过静态或使用 href 对象向 Link 组件提供查询参数，可以从一条路由导航到一条动态路由。

¥Navigating from one route to a dynamic route is done by providing query parameters to the Link component either statically or using the href object.

例如，以下代码允许你使用查询参数静态导航到动态路由：

¥For example, the following code allows you to navigate to the dynamic route statically using query parameters:

import { Link } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <Link href="/details/1">View first user details</Link>
      <Link href="/details/2">View second user details</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

你还可以使用 href 对象提供一个 pathname，它获取动态路由的值并传递 params：

¥You can also use the href object to provide a pathname which takes the value of the dynamic route and passes params:

import { Link } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <Link
        href={{
          pathname: '/details/[id]',
          params: { id: 'bacon' },
        }}>
        View user details
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

从动态段访问参数

¥Access parameters from dynamic segments

URL 的动态段可以通过路由组件中的 路由参数 访问。例如，你可以使用 useLocalSearchParams 钩子，它返回所选路由的 URL 参数。

¥Dynamic segments of a URL are accessible with a route parameter in the route component. For example, you can use the useLocalSearchParams hook which returns the URL parameters for the selected route.

import { useLocalSearchParams } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';

export default function DetailsScreen() {
  const { id } = useLocalSearchParams();

  return (
    <View style={styles.container}>
      <Text>Details of user {id} </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

当 / 推送 /details/1 时，useLocalSearchParams 返回 { id: '1' }，因为 /details/1 是选定的路由。

¥When / pushes /details/1, the useLocalSearchParams returns { id: '1' } because /details/1 is the selected route.