使用React Router托管Firebase
ast*_*ms1 3 firebase reactjs firebase-hosting react-router
我有一个React应用程序，它使用react-router和一个看起来像的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"
}
]
}
}
我不再收到“找不到页面”页面；但是，我的react应用程序的内容永远不会加载，并且我在控制台中注意到一个错误：
Uncaught SyntaxError: Unexpected token <
更新＃2
我现在明白为什么我得到了错误。在Chrome开发者工具中查看Sources标签，只有当我直接导航到时，我的static /文件夹才使用一个奇怪的名称（static/css而不是static）/map/{known uid}。当我导航到主页时，所有加载都正常。
这解释了错误。我仍然不确定如何解决。
小智 7
迟到的回答，但我面临着同样的问题。我通过两个步骤解决了这个问题：
- 像这样更新 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="/">
.
.
.对我来说，我可以看到根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"
}
}
Luk*_*ela -1
指定basenamein怎么样Router？沿着这个：
<Router basename='/map/5AJA3RefFuTZ8z4Gn6BjMgZRgPZ2'>
| 归档时间： |
|
| 查看次数： |
1203 次 |
| 最近记录： |