3

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'));
});

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.

(I am fine upgrading dependencies if it will help.) react: 0.14.7 react-router: 1.0.3

4

2 回答 2

7

假设您的 css 文件位于您的静态文件夹中，并且文件的路径与下面的路径匹配，__dirname + "/dist"并且您不是/someRoute在应用程序中导航到而是通过地址栏将浏览器定向到该地址，我怀疑问题是您正在服务index.html 当您需要提供 css 文件时。（您向我们提供了浏览器报告的错误，而不是服务器对该请求的实际响应。）

这是由于将浏览器指向mySite.com/someRoute. 浏览器现在认为/someRoute是使用相对 url 时所有请求的根路径。所以如果 index.html 页面需要assets/css/mysite.css. 浏览器实际上会发送一个请求someRoute/assets/css/mysite.css。您可以通过查看浏览器中的网络选项卡来验证这一点。

要解决此问题，请将base标签设置为/您的<head>. 这将告诉浏览器不要在相对 URL 上添加任何路径的前缀。

例子：

<head>
  <base href="/">
  <link >
</head>
于 2016-03-11T05:58:54.280 回答
0

这看起来不是 React 特定的，但没有更多细节......

在您的 index.html 中，您包含对存储在同一服务器上的 CSS 文件的引用。该服务器有一个为“*”设置的路由规则，它返回 index.html。因此，您在该服务器上访问的每个 URL 都将返回 index.html。每次。

您可以设置单独的规则来处理对静态资源的请求（也许将它们放在单独的文件夹中？）或从不同的服务器提供资源。

于 2016-03-11T05:29:14.883 回答