React Navigation问题：手动输入URL无法跳转对应组件页面

核心修复步骤 #

1. 切换Web路由为浏览器模式 #

Expo默认使用哈希路由（URL带#），如果你的URL是myapp/settings这种路径式结构，必须在app.json里配置浏览器路由：

{
  "expo": {
    "web": {
      "router": "browser"
    }
  }
}

⚠️ 注意：Expo托管环境下修改后要重新构建部署，本地开发用expo start --web测试即可，dev server会自动支持SPA路由，但生产环境必须确保服务器能将所有路径请求指向index.html。

2. 移除Stack导航器的强制初始路由 #

不要在Stack.Navigator中设置initialRouteName，否则会直接覆盖URL的路由匹配逻辑，让导航器自动根据URL匹配对应页面：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{ path: 'log-in' }}
      />
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={{ path: 'settings' }}
      />
    </Stack.Navigator>
  );
}

3. 配置Web路由前缀（若部署在子路径） #

如果你的应用部署在myapp子路径下，在app.json里添加路径配置，保证本地测试与生产环境路径一致：

{
  "expo": {
    "web": {
      "router": "browser",
      "path": "/myapp"
    }
  }
}

此时本地测试URL为http://localhost:19006/myapp/settings。

4. 检查Auth逻辑的拦截规则 #

多数情况下是全局Auth拦截导致的异常——比如未登录时强制跳转到登录页，但如果用户直接访问设置页且已登录，要跳过该跳转。示例如下：

useEffect(() => {
  if (!isAuthenticated) {
    // 仅当前页面不是登录页时才执行跳转
    if (navigation.getCurrentRoute()?.name !== 'Login') {
      navigation.navigate('Login');
    }
  }
}, [isAuthenticated, navigation]);

5. 生产环境服务器SPA路由配置 #

如果不是使用Expo托管部署，必须配置服务器将所有请求重写到index.html：

• Vercel：在vercel.json中添加：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

• Netlify：在_redirects文件中添加：

/*    /index.html   200

额外排查点 #

• 清除浏览器缓存，旧缓存可能导致路由匹配异常
• 打开浏览器控制台查看路由相关报错，React Navigation会输出匹配失败的警告信息
• 确认没有其他自定义路由拦截逻辑（如第三方库、全局useEffect）

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