React 使用 react-router 和 browserHistory 所需的最小 nodejs 服务器设置

Question

我现在的 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

Answer 1

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

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

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

Answer 2

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

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

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

示例：

<head>
  <base href="/">
  <link >
</head>

React 使用 react-router 和 browserHistory 所需的最小 nodejs 服务器设置

Minimum nodejs server setup needed for React using react-router and browserHistory

node.js

reactjs

react-router

browser-history

react-routing