Flutter Web调用html.window.location.href后无法渲染页面求助

你的问题核心在于手动操作浏览器location并调用reload()导致Flutter Web应用重启后路由状态不同步，加上setUrlStrategy(null)的模糊配置，使得Flutter无法正确感知浏览器路由变化。以下是具体修复方案：

1. 修正URL策略配置 #

首先明确指定Hash路由策略（匹配你当前带#的URL格式），替代原有的setUrlStrategy(null)模糊设置，确保Flutter路由系统与浏览器hash变化完全同步：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

class FlutterWebPluginWeb {
  static void setupRouteStrategy() {
    if (kIsWeb) {
      // 明确使用Hash路由策略，适配你的URL格式
      setUrlStrategy(const HashUrlStrategy());
    }
  }
}

在main函数初始化时调用该方法：

void main() {
  FlutterWebPluginWeb.setupRouteStrategy();
  runApp(const MyApp());
}

2. 移除错误的手动路由操作 #

删除以下代码，reload()会重启整个Flutter应用，导致状态丢失和冻结：

// 不要用这两行代码
html.window.location.hash = '/principles_main';
html.window.location.reload();

3. 同步浏览器路由到Flutter应用 #

支付跳转回应用后，浏览器URL已经是目标路由，只需让Flutter感知并同步这个状态。在根组件的initState中添加路由同步逻辑：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      // 读取当前浏览器的hash路由
      final currentHash = html.window.location.hash.replaceFirst('#', '');
      if (currentHash == '/principles_main') {
        // 延迟执行，确保Flutter初始化完成
        WidgetsBinding.instance.addPostFrameCallback((_) {
          Navigator.of(context).pushReplacementNamed('/principles_main');
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/principles_main':
            return MaterialPageRoute(builder: (_) => const PrincipleMain());
          // 其他路由配置...
          default:
            return MaterialPageRoute(builder: (_) => const HomePage());
        }
      },
      initialRoute: '/',
    );
  }
}

4. 确保onGenerateRoute逻辑正确 #

确认onGenerateRoute能正确解析路由名称并返回对应组件，无需额外处理浏览器hash——Hash路由策略会自动将#后的路径映射为Flutter的路由名称。

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