Expo Router页面无法找到问题：从[venue]跳转至offer/[offer]失败

文件结构包含app/venue/[venue]、app/offer/[offer]等路径，当前处于venue/[venue]页面，尝试导航至offer/[offer]页面，用了两种router.push写法：

router.push({
  pathname: "/offer/",
  params: {
    id: id,
  },
});

router.push({
  pathname: `/offer/${id}`,
  params: {
    id: id,
  },
});

结果都弹出「Page could not be found」错误。

相关布局代码如下：

OFFER/_LAYOUT #

return (
  <Stack.Screen
    name="[offer]"
    options={{
      headerTitle: "",
      presentation: "modal",
      headerRight: () => (
        <TouchableOpacity onPress={() => router.back()}>
          <Icon name="close-line" size={24} color={textColor} />
        </TouchableOpacity>
      ),
    }}
  />
);

VENUE/_LAYOUT #

return (
    <Stack
      screenOptions={{
        headerStyle: {
          backgroundColor: backgroundColor,
        },
        headerTintColor: textColor,
      }}
    >
      <Stack.Screen
        name="[venue]"
        options={{
          headerShown: false,
          headerTransparent: true,
          headerTitle: "",
          headerLeft: () => (
            <TouchableOpacity onPress={() => router.back()}>
              <Icon name="arrow-left-line" size={24} color={textColor} />
            </TouchableOpacity>
          ),
        }}
      />
    </Stack>
);

1. 修正路由参数和路径写法 #

你的动态路由页面是offer/[offer]，参数名必须和路由文件名里的[offer]一致，而不是id。同时路径要正确指向动态路由：

// 写法一：通过pathname和params传参
router.push({
  pathname: "/offer/[offer]",
  params: {
    offer: id, // 参数名对应[offer]
  },
});

// 写法二：直接拼接完整路径（无需额外传params）
router.push(`/offer/${id}`);

2. 补全Offer布局的外层Stack标签 #

当前OFFER/_LAYOUT代码缺少外层的<Stack>包裹，这会导致路由无法正确识别页面结构，修改后的完整布局应该是：

import { Stack } from 'expo-router';

export default function OfferLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="[offer]"
        options={{
          headerTitle: "",
          presentation: "modal",
          headerRight: () => (
            <TouchableOpacity onPress={() => router.back()}>
              <Icon name="close-line" size={24} color={textColor} />
            </TouchableOpacity>
          ),
        }}
      />
    </Stack>
  );
}

3. 确认路由文件名匹配 #

确保app/offer/目录下的动态页面文件名为[offer].js（或.tsx），和布局中name="[offer]"完全对应，大小写也要一致。

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