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

问题描述

我正在尝试使用 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，我会看到：

由于我使用的是颤振，因此我真的不想像所说的那样添加 .html 文件，即使它有效。
我宁愿显示一个内置 dart 的自定义页面。

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

编辑：

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

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

我尝试过的和没用的：

没有重写
重写，希望颤振路由会带头
在 localhost 中测试项目
根据文档将 Flutter 路由策略从 URL 更改为 PATH

到底：

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

唯一有效的是：

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

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

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

标签： firebaseflutterdartfirebase-hosting

解决方案

问题确实出在 Flutter 方面。我使用 "/" asinitialRoute和 "/" 作为另一个路由，这显然会造成冲突，实际上在我的代码中没有用，因为返回的第一页是在MaterialApp's下定义的child。

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

所以我已经"/": (context) => Scaffold(),从routes地图上删除了。为了使它起作用，我也删除rewrites了。firebase.json

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

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

对于 / 路由，如果非 null，则使用 home 属性。

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

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

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

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

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

问题描述

解决方案

推荐阅读