带有参数的 Flutterweb gorouter 路径显示黑屏

【问题标题】：Flutterweb gorouter path with parameters show blank screen带有参数的 Flutterweb gorouter 路径显示黑屏
【发布时间】：2023-02-10 18:48:56
【问题描述】：

我在 flutter 中使用 gorouter 来导航。每当我使用 context.push("/article/1234") 它都会转到正确的页面，但如果我将链接直接放在浏览器中，我会得到一个空白屏幕。

以下是我的代码

GoRoute(
      path: "/article/:id",
      builder:(context,state) =>  ArticleScreen(id:state.params['id']),
    ),

如果我使用下面的代码，它会按预期工作，但如果我将 url 放在浏览器中，它会显示一个空白页面

context.go("/article/1234");

【问题讨论】：

在我的项目中发生同样的事情。如果您找到任何解决方法，请告诉我
你看过网络请求/响应了吗？可能有一个 HTTP 错误，不是吗？
请您提供一些上下文：即 Flutter 网络版本和 go_router 版本，以及当它不起作用时您在浏览器中输入的 URL？

标签： flutter gorouter

【解决方案1】：

我已经为此打开了issue，我们可以在其中跟踪问题。

此外，我找不到此问题的永久修复，但我发现 this 拉取请求实际上解决了问题。

您还可以将 index.html 文件中的 main.dart.js 和 flutter_service_worker.js URL 配置为与您的应用匹配的内容，如本评论所述：

  _flutter.loader.loadEntrypoint({
    entrypointUrl: "/YOUR_APP_BASE/main.dart.js",
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
      serviceWorkerUrl: "/YOUR_APP_BASE/flutter_service_worker.js?v=",
    },

这样，将从文件的“绝对”URL 请求文件，而不是相对于 PathStrategy 指定的 URL。

（如果您的基本 URL 是“/”，您只需要：/main.dart.js 和/flutter_service_worker.js?v=）

【讨论】：