我当前的 server.js:
let express = require('express');
let harp = require('harp');
let path = require('path');
let app = express();
app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));
let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );
// ... other routes for data fetching ...
// For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
当我开始导航时,这工作正常mysite.com/
。但是,如果我输入mySite.com/someRoute
,它破裂了。具体来说,我在控制台中看到以下内容:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/dashboards/styles/normalize-3.0.3.min.css".
...
Uncaught SyntaxError: Unexpected token <
...
我的理解是,要解决这个问题,我还需要实现服务器端渲染。准确吗?如果是这样,所需的最低设置是什么?我见过的所有指南都比我现在想要的要深入得多。
(如果有帮助的话,我可以升级依赖项。)
反应:0.14.7
反应路由器:1.0.3
假设您的 css 文件位于静态文件夹中,并且该文件的路径与以下路径匹配__dirname + "/dist"
你是NOT导航至/someRoute
在您的应用程序中,但通过地址栏将浏览器定向到该地址,我怀疑问题是当您需要提供 css 文件时,您正在提供index.html。 (您向我们提供了浏览器报告的错误,但不是服务器对该请求的实际响应。)
这是由于将浏览器定向到mySite.com/someRoute
。浏览器现在认为/someRoute
是使用相对 url 时所有请求的根路径。所以如果index.html页面需要assets/css/mysite.css
。浏览器实际上会发送一个请求someRoute/assets/css/mysite.css
。您可以通过查看浏览器中的网络选项卡来验证这一点。
要解决此问题,请设置base
tag to /
在你的<head>
。这将告诉浏览器不要在相对 URL 上添加任何路径前缀。
Example:
<head>
<base href="/">
<link >
</head>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)