Flutter Web应用URL参数解析及404错误排查

使用场景 #

我的应用允许用户创建物品列表，希望用户能够分享列表链接，点击链接的用户无需安装应用，即可在浏览器中查看该物品列表。起初我认为Dynamic linking是合适的方案，但深入研究后发现，仅需读取链接信息并导航到Web应用对应视图，无需使用Dynamic linking。

遇到的问题 #

尝试用onGenerateRoute读取URL参数时，部署到Firebase Hosting后，访问主域名外的任何路径（比如https://myApp.app/anything）都会返回404，无法测试参数读取逻辑。

尝试的代码 #

routes: appRoutes,
onGenerateRoute: (settings) {
  if (settings.name == "/pack") {
    // 示例中settings.name = "/post?id=123"

    final settingsUri = Uri.parse(settings.name!);
    // settingsUri.queryParameters 是所有查询键值对的映射
    final postID = settingsUri.queryParameters['id'];
    print(postID); 

    Navigator.pushNamed(context, '/home');
  }
},

解决步骤 #

1. 修改firebase.json配置 #

Flutter Web是单页应用，所有路由请求都需要重定向到index.html，同时保留已有的Dynamic Links规则。更新后的firebase.json如下：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "appAssociation": "AUTO",
    "rewrites": [
      {
        "source": "/p/**",
        "dynamicLinks": true
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

配置说明：

• 所有/p/**开头的请求仍由Dynamic Links处理
• 其他所有路径的请求都重定向到index.html，让Flutter路由系统接管，避免404

2. 优化路由逻辑（可选） #

原代码中Navigator.pushNamed(context, '/home')可能存在上下文问题，建议直接返回对应页面组件：

onGenerateRoute: (settings) {
  if (settings.name?.startsWith("/pack") == true) {
    final uri = Uri.parse(settings.name!);
    final packId = uri.queryParameters['id'];
    print('Pack ID: $packId');
    // 返回对应的列表页面，传入packId参数
    return MaterialPageRoute(
      builder: (context) => PackListPage(packId: packId),
    );
  }
  // 其他路由按原有规则处理
  return MaterialPageRoute(builder: (context) => HomePage());
}

3. 重新部署应用 #

修改配置后，重新部署到Firebase Hosting：

firebase deploy --only hosting

现在访问https://myApp.app/pack?id=100就不会返回404，并且能正常读取到id参数了。

内容的提问来源于stack exchange，提问作者Ten Digit Grid