使用react-router和browser进行React所需的最低Node.js服务器设置 [英] Minimum nodejs server setup needed for React using react-router and browserHistory
问题描述
我当前的server.js：
My current 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 ，它会中断。具体来说，我在控制台中看到以下内容：
This works fine when I start navigation at mysite.com/. However, if I enter mySite.com/someRoute, it breaks. Specifically, I see the below in console:
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 <
...
我的理解是要解决此问题，我还需要实现服务器-侧面渲染。准确吗？如果是这样，那么所需的最低设置是多少？我见过的所有指南都比我现在想去的要深入。
My understanding is that to fix this I also need to implement server-side rendering. Is that accurate? If so, what is the minimum setup needed for that? All the guides I've seen are much more in-depth than I would like to go right now.
（如果有帮助，我很好地升级了依赖项。） b $ b react：0.14.7
react-router：1.0.3
(I am fine upgrading dependencies if it will help.) react: 0.14.7 react-router: 1.0.3
推荐答案
假设您的css文件位于您的静态文件夹，并且文件路径与 __ dirname + / dist 下的路径匹配，并且您不导航到 / someRoute 在您的应用中，但是通过地址栏将浏览器定向到该地址，我怀疑问题是当您需要提供CSS文件时，您正在提供index.html。 （您给了我们浏览器报告的错误，但没有提供服务器对该请求的实际响应。）
Assuming your css file is in your static folder and that the path for the file matches the path below __dirname + "/dist" and that you are NOT navigating to /someRoute within your app but directing browser to that address via the address bar, I suspect the problem is you are serving the index.html when you need to serve the css file. (You gave us the error that the browser reported, but not the actual response from server for that request.)
这是由于将浏览器指向 mySite.com/someRoute 。现在，浏览器认为 / someRoute 是使用相对URL时所有请求的根路径。因此，如果index.html页面需要 assets / css / mysite.css 。浏览器实际上将发送对 someRoute / assets / css / mysite.css 的请求。您可以通过查看浏览器中的网络标签来验证这一点。
This is caused by directing the browser towards mySite.com/someRoute. The browser now thinks /someRoute is the root path of all requests when using relative urls. So if the index.html page requires assets/css/mysite.css. The browser will actually send a request for someRoute/assets/css/mysite.css. You can verify this by watching the network tab in your browser.
要解决此问题，请将 base 标记设置为 / 在您的< head> 中。这将告诉浏览器不要在相对URL上添加任何路径。
To fix this, set the base tag to / in your <head>. This will tell the browser to not prefix any path on relative urls.
示例：
<head>
<base href="/">
<link >
</head>
这篇关于使用react-router和browser进行React所需的最低Node.js服务器设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
