如何使用Firebase托管为React SPA提供404页面？

Question

我目前正在为我的单页React应用程序使用firebase托管.我还在我的公共目录中添加了一个404.html页面.我的假设是,如果用户输入不在我的路由中的URL(使用react-router),将会提供此页面,但是firebase无法知道url是否有效,或者是否存在.目前,如果我在主应用程序网址后面输入一些随机内容,则页面显示为空白.这是我需要在我的React应用程序中考虑的内容,如果是这样的话？

Answer 1

您可以使用firebase.json配置部分解决此问题,但由于Firebase Hosting仅提供静态内容,因此您必须处理JavaScript中的某些逻辑.一个简单的包罗万象看起来像:

{
  "hosting":{
    "rewrites":[{"source":"**","destination":"/index.html"}]
  }
}

但是,您可以创建更具体的重写以匹配应用程序的路由结构,例如:

{
  "hosting":{
    "rewrites":[
      {"source":"/users/*","destination":"/index.html"},
      {"source":"/account","destination":"/index.html"},
      {"source":"/posts/*","destination":"/index.html"},
    ]
  }
}

在上面的例子中,/users/foo将路由到/index.html但/unknown/url将路由到404.html.

以上内容让您了解其中的一部分,但不知道您的实际应用程序数据.如果/users/foo不是有效的用户名,则需要使用JavaScript显示未找到的消息/index.html.