如何使用 Firebase 主机在 Flutter 中设置 404 未找到页面

Question

我正在尝试在我的网站中显示自定义 404 未找到页面，页面编号为 Flutter。

我正在使用以下代码：

MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: "/",
        routes: {
          "/": (context) => Scaffold(),
          "/test": (context) => TestPage()
        },
        onUnknownRoute: (settings) {
          return MaterialPageRoute(builder: (_) => Scaffold(
            body: Center(
              child: Text("Page not found !"),
            ),
          ));
        }, 

我已经重建我的应用程序并使用 Firebase 托管进行部署。 但是，如果我输入错误的 url，我会看到这个：

因为我使用的是 flutter，所以我真的不想添加 an.html 文件，即使它可以工作。
我宁愿显示一个内置于 dart 的自定义页面。

在这种情况下如何显示我的自定义“找不到页面”？

编辑：

这是我当前的firebase.json文件：

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

我尝试了什么，什么没用：

• 没有重写
• 重写希望flutter路由带头
• 在本地测试项目
• 根据文档将 Flutter 路由策略从 URL 更改为 PATH

到底：

• 我在网站上的现有页面运行良好
• 所有错误的网址都重定向到 /index.html

唯一有效的是：

• 在我的 /build/web 文件夹中添加一个 404.html 文件
• 删除firebase.json中的重写

然而，这不是我想要的，我想改为显示我的 not_found_page.dart。

这可能是一个 Flutter 问题，我在此期间保持开放状态，但我将在 Flutter 方面进行更深入的研究。

Answer 1

问题确实出在Flutter这边。 我将“/”用作initialRoute ，将“/”用作另一条路线，这显然会造成冲突，但实际上在我的代码中毫无用处，因为返回的第一页是在MaterialApp的child页面下定义的。

Flutter 将我的路由重定向到"/"而不是调用onUnknownRoute ，并且与 firebase.json 中的重写发生冲突

所以我从routes map 中删除了"/": (context) => Scaffold(),我还删除了firebase.json中的rewrites ，以使其工作。

我还设置了URL策略，上面的所有步骤都不适用于PATH策略。

编辑：我发现PATH策略只有在MaterialApp小部件上没有home属性时才能工作。
如果是这样，所有错误的路线将被重定向home ，而不是调用onUnknownRoute

• 对于 / 路由，使用 home 属性（如果非空）。

• 否则，如果路由表有路由条目，则使用路由表。

• 否则，如果提供，则调用 onGenerateRoute。 对于未由 home 和 routes 处理的任何有效路由，它应该返回一个非空值。

• 最后，如果所有其他方法都失败，则调用 onUnknownRoute。

PS：不需要执行404.html文件

Answer 2

只需在您的根目录中添加一个 404.html 页面并将其重定向到您自己的自定义 flutter 构建页面。 你也可以学习处理

“找不到著名的 404 页面！” 从这里