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。 每次。
你可以设置一个单独的规则来处理对静态资源的请求(也许把它们放在一个单独的文件夹中?),或者从不同的服务器提供资源。