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

我目前的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/导航。 但是，如果我inputmySite.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 < ...

我的理解是，要解决这个问题，我还需要实现服务器端的渲染。 这是准确的吗？ 如果是这样，那么最低设置是什么？ 我所见过的所有导游都比我现在想去的要深入得多。

（如果有帮助的话，我很好地升级依赖项。）react：0.14.7 react-router：1.0.3

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

这是由浏览器指向mySite.com/someRoute引起的。 浏览器现在认为/someRoute是使用相对URL的所有请求的根path。 所以如果index.html页面需要assets/css/mysite.css 。 浏览器实际上会发送一个someRoute/assets/css/mysite.css的请求。 您可以通过在浏览器中查看networking标签来validation。

要解决这个问题，请将base标记设置为您的<head> 。 这将告诉浏览器不要在相关URL上加任何path。

例： 

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

这看起来没有特定的反应，但没有更多的细节…

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

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

Interesting Posts