React Native路由匹配失败：同目录页面跳转报错

核心问题 #

你用了本地文件路径（带./和.js后缀）作为跳转目标，但路由系统识别的是路由名称/路由路径，不是文件路径，所以导致路由不匹配错误。

情况1：使用传统React Navigation（手动配置路由） #

1. 确认路由已注册
   在导航器配置里，确保Instructions组件已被添加为路由项，示例：

   import { createStackNavigator } from '@react-navigation/stack';
   import GetStarted from './components/GetStarted';
   import Instructions from './components/Instructions';
   
   const Stack = createStackNavigator();
   
   function AppNavigator() {
     return (
       <Stack.Navigator>
         <Stack.Screen name="GetStarted" component={GetStarted} />
         {/* 必须注册该路由 */}
         <Stack.Screen name="Instructions" component={Instructions} />
       </Stack.Navigator>
     );
   }
   

2. 修正跳转代码
   用路由名称跳转（推荐，不受路径变化影响）：

   <TouchableOpacity style={styles.button} 
       onPress={() => router.push({ name: 'Instructions' })}
   >
       <Text style={styles.buttonText}>Welcome</Text>
   </TouchableOpacity>
   

   若配置了路由path，也可直接用路径跳转（无需./和.js）：

   onPress={() => router.push('Instructions')}
   

情况2：使用Expo Router（文件系统路由） #

Expo Router基于文件结构自动生成路由，跳转时不需要带.js后缀，同目录下直接写文件名即可：

<TouchableOpacity style={styles.button} 
    onPress={() => router.push('./Instructions')}
>
    <Text style={styles.buttonText}>Welcome</Text>
</TouchableOpacity>

也可使用绝对路径跳转（更直观）：

onPress={() => router.push('/components/Instructions')}

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