hai*_*rbo 8 firebase reactjs webpack firebase-hosting react-router
(更新以下更多信息)
我们有一个基于反应的单页Web应用程序,它位于Firebase Hosting上.到目前为止,我们一直在使用基于散列的路由(例如mysite.com/#/path/to/content).我们引入了React Router,它允许我们拥有更漂亮的URL(例如mysite.com/path/to/content),但是现在当我们直接导航到深层路线时,app不会加载.详情如下:
使用React Router要求我们在Firebase托管中使用URL重写.方向很简单 - 看起来你需要做的就是:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
...在firebase.json文件里面.实际上,我们的完整firebase.json文件如下:
{
"firebase": "",
"public": "dist",
"rules": "rules.json",
"ignore": [
"firebase.json",
"**/.*",
"**/*.map",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
那里没有什么太复杂的(我们正在firebase deploy -f构建脚本中,如果你想知道为什么firebase参数是空的).链接rules.json文件更简单:
{
"rules":{
".write":"true",
".read":"true"
}
}
当我通过转到基本URL并开始导航来加载应用程序时,一切都很好.如果我直接进入一个深度的路线(例如mysite.com/path),那也是有效的.
然而
如果我直接进入深层次的路线,或者甚至是带有斜线(例如mysite.com/path/或者mysite.com/path/to/content)的顶级路线,那么该应用程序不会加载.
具体来说,会发生什么是index.html页面加载,然后浏览器加载我们的webpack创建的引用的bundle.js文件index.html,但Firebase Hosting为该JS文件返回的是index.html文件的内容.那么,可以预见,我们在浏览器控制台中看到的是这个错误:
Uncaught SyntaxError: Unexpected token <
...在"捆绑文件"的第1行.如果我在Chrome的开发工具中查看捆绑文件的内容,那么捆绑文件的第1行就是这样的:
<!doctype html>
...然后是index.html文件中的其余HTML .
似乎正在发生的事情是Firebase URL重写规则是说"哦,你正在尝试引用一个JS文件 - 我看到我应该返回所有内容index.html,所以你去吧".但情况并非总是如此,或者网站在任何情况下都不会工作.那么,为什么我从站点根目录开始工作呢,但是如果我粘贴到应用程序的深层URL会中断？我没有想法.
如果有帮助,这是我的index.html文件引用包文件的方式:
<script src="bundle.ce843ef7a2ae68e9e319.js"></script></body>
所以这似乎是Firebase托管的一个问题,但我也可以看到,我可能在某种程度上不了解React Router,所以我以某种方式搞砸了客户端代码,以至于强迫它服务器返回错误的东西.
这是我希望它是一些我们缺少的愚蠢配置.任何帮助表示赞赏!
谢谢!
更新:我剥离了我们的应用程序,以便它只返回"hello,world",绕过所有基于React的东西,包括React Router,问题仍然存在,所以我不再认为这与React-有任何关系路由器,虽然我认为这可能与React有关的可能性很小.
hai*_*rbo 12
我从Firebase Hosting回来了.显然,我们索引文件中引用的bundle.js文件需要在它前面斜杠,以使其成为绝对路径.所以这:
<script src="/bundle.js"></script>
......而不是这个:
<script src="bundle.js"></script>
如果其他人犯了同样的愚蠢错误,我希望这是有用的.
| 归档时间： |
|
| 查看次数： |
2824 次 |
| 最近记录： |