Question

我有一个使用react-router和路由器的反应应用程序，如下所示：

<Router>
  <div>
    <Route exact path="/" component={Homepage} />
    <Route path="/map/:uid" component={Userpage} />
    <Footer />
  </div>
</Router>

该应用使用Firebase托管托管。

如果我打开我的网站并点击此处，路由器将我带到/ map / uid，它会正常加载。但是，如果我关闭浏览器然后尝试明确导航到<domain>/map/<known uid>，我会从Firebase获得“找不到页面”页面。这是我第一次使用react-router。

更新＃1

我已将firebase.json更新为：

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

我不再收到“找不到页面”页面;但是，我的反应应用程序的内容永远不会加载，我在我的控制台中注意到一个错误：

Uncaught SyntaxError: Unexpected token <

更新＃2

我现在明白为什么我会收到错误。查看Chrome开发工具中的“来源”标签，我的静态/文件夹只有在我直接导航到static/css时才会有一个奇怪的名称（static而不是/map/{known uid}）。当我导航到主页时，所有加载都很好。

这解释了错误。我仍然不确定如何解决。

Answer 1

迟到的答案，但我面临着同样的问题。我用 2 个步骤解决了这个问题：

像这样更新 firebase.json

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

像这样在 index.html 中设置基本 url

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/">
.
.
.

Answer 2

晚了聚会，但是请尝试从package.json中删除“主页”键（或确保相对于主页的存储位置是正确的。

Answer 3

如何在basename中指定Router？这件事：

<Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>

Answer 4

对我来说，我可以看到根URL，但是其他路由（例如“ / pricing”）却给了我404。我将其添加到firebase.json文件中，但没有成功。另外，请确保允许Firebase / auth在域上运行。 firebase的auth部分中有一个设置。

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

我完整的firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    }],  
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Answer 5

迟到的答案，但它为我解决了问题：在执行 firebase init 时，它会询问它是否是单页应用程序。默认答案是 No，但是，只需选择 Yes 即可。

Firebase托管与反应路由器

5 个答案: