在 firebase 中托管的 React 路由器应用程序，子路由 returns 404

Question

我有一个在 Firebase 中托管的创建 React 应用程序。我正在使用 react-router-dom.

如果我请求根路由“/”，一切都按预期工作。然后我可以请求子路由。

但如果我是新用户或转到私人标签并尝试直接点击子路线。它 returns 404 未找到页面 :

这是我的路由器示例：

    <Router>
      <Switch>
        <Route path="/" component={UserDashboard} exact />
        <Route path="/email-link-sign-up" component={EmailLinkSignUp} exact />
        <Route path="/join-with-hash" component={JoinClubHash} exact />
        <Route component={Login} />
      </Switch>
    </Router>

我该如何解决这个问题？

Answer 1

在 firebase.json 文件的 hosting 属性中添加这条规则就成功了：

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

基本上就是"Every child paths should serve index.html file"

在 firebase 中托管的 React 路由器应用程序，子路由 returns 404

React router app hosted in firebase, child routes returns 404

firebase

firebase-hosting

react-router

create-react-app