嵌套的路由请求被解释为请求CSS文件
甚至不知道如何说这个问题。
基本上我有一个React应用程序，我使用React-Router进行路由处理，节点服务器发送每个请求的index.html文件，并处理静态资产，因为我正在使用React Router的HistoryLocationconfiguration。 logging每个请求到该服务器，我可以看到，去基地url发送3个请求，一切正常工作：
GET / 200 3.795 ms - - GET /static/app.css 200 2.234 ms - - GET /build/bundle.js 200 0.608 ms - -
任何规则的浅层路线也是如此（例如/a ）。 但是，只要我尝试访问一个嵌套的路线（例如/a/b ），一切都打破。 更具体地说，在窗口中，我收到Uncaught SyntaxError: Unexpected token <一个语法错误，在我的节点服务器的日志中，我得到这些请求：
GET /a/b 304 2.286 ms - - GET /a/static/app.css 304 1.061 ms - - GET /a/build/bundle.js 304 1.004 ms - -
所以这里的行为似乎是每次我发送一个页面视图请求，它发送一个请求给定的嵌套路由，对于任何额外的静态资产，它只是popup嵌套的路由，并追加该静态资产的路由到那个路线的其他部分 所以例如，如果我去/a/b/c ，我会看到像GET /a/b/static/app.css 。
这是我的节点服务器设置：
import express from 'express'; import morgan from 'morgan'; import path from 'path'; const app = express(); const STATIC_PATH = path.join(__dirname, '/../dist'); app.use(morgan('dev')); app.use(express.static(STATIC_PATH)); app.get('*', (req, res) => { res.sendFile('index.html', { root: STATIC_PATH }); }); app.set('port', process.env.PORT || 8000); app.server = app.listen(app.get('port'), () => { console.log('Listening on port %d', app.get('port')); });
看起来，您的网页中可能有静态资源url，就像"static/app.css" ，它是完全相对的url。 当你这样做的时候，浏览器会在当前网页的相同path上请求这个文件名，它会根据当前网页的path而变化。 所以，如果你的网页是/a.html ，它会请求/static/app.css 。 如果你的网页是/a/b.html ，它会请求/a/static/app.css （这看起来就是你所看到的）。
你可能想要的是以/开头的静态资源的域相对path，看起来像"/static/app.css" 。 前导斜杠使其仅与域相关，而不与网页path相关。 不pipe网页path是什么，浏览器都会发出相同的请求，因为path是相对于域名的顶部的。
所以，总结一下，HTML文件从这改变了：
<link rel="stylesheet" href="static/app.css">
对此：
<link rel="stylesheet" href="/static/app.css">