如何使用 Firebase 托管在 Flutter 中设置 404 Not found 页面

Question

我正在尝试使用 Flutter 在我的网站中显示自定义 404 未找到页面。

我正在使用以下代码：

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，我真的不想添加一个 .html 文件，即使它可以工作。
我宁愿显示一个内置于 dart 中的自定义页面。

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

编辑 :

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

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

我尝试过的和无效的：

没有重写
正在重写，希望 flutter 路由能领先
在本地测试项目
根据documentation

最后:

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

唯一有效的是：

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

但这不是我想要的，我想显示我的 not_found_page.dart。

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

Answer 1

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

'Famous 404 page not found !' from here

Answer 2

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

Flutter 将我的路由重定向到 "/" 而不是调用 onUnknownRoute 并且与 firebase.json

中的重写发生冲突

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

我也取消了 URL 策略，上面的所有步骤都不适用于 PATH 策略。

EDIT ：我发现 PATH 策略只有在 [=] 上没有 home 属性 11=] 小部件。
如果是这样，所有错误的路由将被重定向到 home 而不是调用 onUnknownRoute

For the / route, the home property, if non-null, is used.

Otherwise, the routes table is used, if it has an entry for the route.

Otherwise, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.

Finally if all else fails onUnknownRoute is called.

PS : 不需要实现 404.html 文件

如何使用 Firebase 托管在 Flutter 中设置 404 Not found 页面

how to setup 404 Not found page in Flutter using Firebase Hosting

firebase

flutter

dart

firebase-hosting