Expo SDK 52升级后Router路由参数无法传递求助

1. 修正路由跳转路径 #

你的跳转路径中多余了routes前缀，Expo Router的路由路径基于app目录下的文件结构，需要去掉该前缀。假设当前页面和workoutDetail同属app/routes目录，跳转代码应改为：

onPress={() => router.push(`./workoutDetail?id=${workout.id}`)}

如果当前页面在app/routes的子目录下，需调整相对路径层级，比如从app/routes/sub/page.tsx跳转到app/routes/workoutDetail.tsx，路径应为../workoutDetail?id=${workout.id}。

2. 改用对象式传参（更可靠） #

避免字符串拼接可能带来的编码问题，推荐用对象形式传递参数：

onPress={() => router.push({
  pathname: './workoutDetail', // 根据实际路径调整
  params: { id: workout.id }
})}

3. 正确获取参数 #

方式一：使用useLocalSearchParams（推荐用于查询参数） #

import { useLocalSearchParams } from 'expo-router';

const params = useLocalSearchParams();
const id = params.id; // 返回为字符串类型，如需数字可转换为Number(id)

方式二：使用useRoute（React Navigation原生钩子） #

若坚持使用route.params，需确保路径匹配正确，同时导入useRoute：

import { useRoute } from '@react-navigation/native';
import { useEffect } from 'react';

const route = useRoute();

useEffect(() => {
  const workoutId = route.params?.id;
  if (workoutId) {
    fetchWorkoutDetails(workoutId);
  }
}, [route.params?.id]);

4. 检查路由文件结构 #

确保workoutDetail页面的文件位置与跳转路径对应，例如：

• 若跳转路径是./workoutDetail，文件应位于app/routes/workoutDetail.tsx（或.jsx）
• 文件名避免特殊字符，保证路由能正确匹配

5. 确认依赖版本 #

SDK52对应Expo Router版本为~3.5.20，检查package.json中的依赖是否正确：

{
  "dependencies": {
    "expo-router": "~3.5.20"
  }
}

如果版本不符，运行npx expo install expo-router重新安装适配版本。

内容的提问来源于stack exchange，提问作者masco