使用onGenerateRoute时，含查询参数的/new-password路由报错如何解决？

核心原因 #

当URL带?token=[...]&code=[...]这类查询参数时，onGenerateRoute收到的settings.name是包含完整查询串的（比如/new-password?token=abc&code=123），如果你的路由判断只匹配了/new-password，就会被识别成未知路由。

修复步骤 #

1. 解析路由路径，剥离查询参数
   在onGenerateRoute里先把完整URL拆分成纯路径和查询参数两部分，用纯路径做路由匹配：

   Route<dynamic> generateRoute(RouteSettings settings) {
     // 解析完整路由地址
     final uri = Uri.parse(settings.name!);
     final purePath = uri.path;
   
     // 按纯路径匹配路由
     switch (purePath) {
       case '/new-password':
         // 从查询参数中提取token和code
         final token = uri.queryParameters['token'];
         final code = uri.queryParameters['code'];
         // 跳转至密码重置页面并传递参数
         return MaterialPageRoute(
           builder: (_) => NewPasswordPage(token: token, code: code),
         );
       // 其他路由匹配逻辑...
       default:
         return MaterialPageRoute(builder: (_) => NotFoundPage());
     }
   }
   

2. 确保路由配置无冲突
   在MaterialApp中配置onGenerateRoute时，不要同时设置routes属性，避免路由匹配逻辑冲突：

   MaterialApp(
     onGenerateRoute: generateRoute,
     // 注释掉或删除routes配置
     // routes: {},
   );
   

3. 测试验证
   直接访问带参数的/new-password?token=test&code=123，确认能正常跳转至密码重置页面，且参数能被正确获取。

额外提示 #

• 如果后续路由逻辑复杂，可以考虑切换到GoRouter这类现代路由库，处理查询参数会更简洁；用原生onGenerateRoute的话，上述方法完全可行。
• 记得在NewPasswordPage中添加参数非空校验，避免空指针异常。

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