Expo web项目使用React Navigation刷新非根路由报Cannot GET错误

该报错是SPA客户端路由的典型问题：浏览器直接请求非根路径时，服务端没有对应静态资源，也未配置重定向规则，因此直接返回404。你之前的配置未生效大概率是配置不完整或加载逻辑有误，可按以下步骤逐一排查修复：

1. 补全自定义webpack配置 #

Expo Web要使自定义webpack配置生效，需先确保依赖安装和配置文件格式正确：

• 首先安装webpack适配依赖：
  npm install @expo/webpack-config --save-dev
• 在项目根目录新建webpack.config.js，使用完整配置：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 开发环境路由回退配置
  if (config.devServer) {
    config.devServer.historyApiFallback = {
      index: 'index.html',
      disableDotRule: true
    }
  }
  // 统一配置生产/开发环境的静态资源根路径
  config.output.publicPath = '/';
  return config;
};

配置完成后重启开发服务，验证开发环境下非根路径刷新是否正常。

2. 配置生产部署的服务端重定向规则 #

webpack配置仅解决本地开发环境的问题，生产环境部署时需根据你使用的静态服务配置对应重定向规则，将所有请求指向index.html：

• Nginx部署可在站点配置中添加：

location / {
  try_files $uri $uri/ /index.html;
}

• 其他静态托管服务均需找到对应「单页应用回退」「history路由支持」的配置项开启即可。

3. 校验React Navigation的linking配置 #

确保PathsByName的路由映射和你实际的路由结构完全匹配，可先用最简配置测试是否生效：

const linking={
  prefixes: [Linking.createURL('/')],
  config: {
    screens: {
      Home: '/',
      Search: '/search'
    },
  },
}

若最简配置下刷新正常，说明你原有PathsByName的嵌套路由、路径声明存在错误，可逐一核对修正。

备选兜底方案 #

如果暂时无法配置服务端规则，可切换为hash路由模式，路由路径会自动携带#前缀，无需服务端额外配置即可正常刷新，仅需在linking配置中添加enabled: 'hash'即可。

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