嵌套的路由请求被解释为请求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')); }); 

       

网上收集的解决方案 "嵌套的路由请求被解释为请求CSS文件"

看起来,您的网页中可能有静态资源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">